调用天地图API实现关键词搜索

概述:

本文讲述结合天地图 js API,实现Openlayers中关键词的搜索与展示。

效果:

实现关键:

调用天地图APILocalSearch接口,实现关键词搜索,调用方式为:localsearch.search(keywod)。

完整代码:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers MapQuest Demo</title>
    <link rel="stylesheet" href="../../../plugin/OpenLayers-2.13.1/theme/default/style.css" type="text/css">
    <script src=" http://api.tianditu.com/api?v=4.0" type="text/javascript"></script>
    <script src="../../../plugin/jquery/jquery-3.1.1.min.js"></script>
    <script src="../../../plugin/OpenLayers-2.13.1/OpenLayers.js"></script>
    <script src="public_map/TiandituLayer-src.js"></script>
    <script src="extend/LabelMarkers.js"></script>
    <script src="extend/LabelLayer.js"></script>
    <style type="text/css">
        html, body, #map{
            padding:0;
            margin:0;
            height:100%;
            width:100%;
            overflow: hidden;
            font-size: 12.5px;
            font-family:"宋体"
        }
        .search-box{
        	position: absolute;
        	top:10px;
        	left:40%;
        	position: absolute;
        	z-index: 999;
        	padding: 5px;
        	border: 1px solid #ccc;
        	border-radius: 4px;
        	box-shadow: 1px 1px 1px #666;
        	background: #fff;
        }
        .item-list{
            position: absolute;
            top:100px;
            left: 20px;
            z-index: 999;
            border: 1px solid #ccc;
            width: 250px;
            background: #fff;
            display: none;
        }
        .list-close{
            background: url("img/panel_tools.png");
            width: 16px;
            height: 16px;
            float: right;
            margin: 3px 3px;
            background-position: -16px 0px;
        }
        .list-close:hover{
            cursor: pointer;
        }
        .list-title{
            background: #009dda;
            color: #fff;
            padding: 5px 8px;
            font-weight: bold;
        }
        ul{
            list-style: none;
            margin: -0px 0;
        }
        ul li{
            border-bottom: 1px dotted #eee;
            margin-left: -40px;
            margin-top: 5px;
            position: relative;
        }
        ul li:hover{
            background: #f2f2f2;
        }
        .item{
            padding: 2px 5px;
        }
        .item:hover{
            cursor: pointer;
        }
        .item-num{
            position: absolute;
            top: 0px;
            left: 12px;
            color: #fff;
            font-weight: bold;
            font-size: 15px;
            font-family: 微软雅黑;
        }
        .item-title{
            float: right;
            font-weight: bold;
            margin-right: 10px;
        }
        .item-content{
            padding: 3px 5px;
        }
        .item-detail{
            margin: 3px 5px;
            float: right;
        }
        .item-detail:hover{
            text-decoration: underline;
            color: #01A4F8;
            cursor: pointer;
        }
        .item-label{
            color:#fff;
            font-size: 15px;
            font-weight: bold;
            margin-top: 2px;
            margin-left: 7px;
        }
        .item-label-name,.item-label-name-map{
            border:1px solid #a6c9e2;
            background: #fff;
            padding: 3px 5px;
            font-size: 12px;
            margin-top: 23px;
            margin-left: 15px;
            border-radius: 5px;
        }
        .item-label-name-map{
            margin-left: 25px;
        }

        .marker-label{
            position: absolute;
            left: 7px;
            top: 0px;
            color: #fff;
            font-weight: bold;
            font-size: 15px;
            font-family: 微软雅黑;
        }
        .highlight-label{
            position: absolute;
            z-index: 999;
            padding:3px 5px;
            background: #fff;
            border: 1px solid #999;
            border-radius: 3px;
            white-space:nowrap;
        }
        
        .page-ctrl{
        	border-top: 1px dotted #eee;
        	text-align: center;
        	padding: 3px;
        }
        .page-ctrl p a{
        	margin-top:5px ;
        	margin-right:5px ;
        }
        .page-ctrl p a.button:hover{
        	cursor: pointer;
        	text-decoration: underline;
        }
    </style>
    <script type="text/javascript">
        var map, markerLyr;
        var localsearch; 
        function init(){
            var vec_c = new OpenLayers.Layer.TiandituLayer("vec_c", "http://t0.tianditu.com/DataServer",{
                mapType:"vec_c",
                topLevel: 0,
                bottomLevel: 18,
                isBaseLayer:true,
                isOnline:true,
                mirrorUrls:[
                    "http://t1.tianditu.com/DataServer",
                    "http://t2.tianditu.com/DataServer",
                    "http://t3.tianditu.com/DataServer",
                    "http://t4.tianditu.com/DataServer",
                    "http://t5.tianditu.com/DataServer",
                    "http://t6.tianditu.com/DataServer",
                    "http://t7.tianditu.com/DataServer"
                ]
            });
            var cva_c = new OpenLayers.Layer.TiandituLayer("cva_c", "http://t0.tianditu.com/DataServer",{
                mapType:"cva_c",
                topLevel: 0,
                bottomLevel: 18,
                isBaseLayer:false,
                isOnline:true
            });
            markerLyr = new OpenLayers.Layer.LabelMarkers("marker");
            map = new OpenLayers.Map({
                div: "map",
                projection: "EPSG:4326",
                layers: [cva_c,vec_c,markerLyr],
                center: [116.40969,39.89945],
                zoom: 12
            });
            map.addControl(new OpenLayers.Control.MousePosition());
            
            var config = { 
				pageCapacity:8,	//每页显示的数量 
				onSearchComplete:localSearchResult	//接收数据的回调函数 
			}; 
			var tdtmap=new T.Map("tdtmap"); 
			tdtmap.centerAndZoom(new T.LngLat(116.40969,39.89945),12); 
			//创建搜索对象 
			localsearch = new T.LocalSearch(tdtmap,config); 
			$("#tdtmap").hide();
			$("#searchbtn").on("click",function(){
				var keywod = $("#keyword").val();
				localsearch.search(keywod);
			});
        }
        
        function localSearchResult(result){
        	//显示页数
        	$("#countdiv").html("共查询到"+result.count+"条记录");
        	$("#firstpage").on("click",function(){
                localsearch.firstPage()
            });
            $("#prevpage").on("click",function(){
                localsearch.previousPage()
            });
            $("#nextpage").on("click",function(){
                localsearch.nextPage()
            });
            $("#lastpage").on("click",function(){
                localsearch.lastPage()
            });
        	$("#close").on("click",function(){
                $(".item-list").hide();
            });
        	$(".item-list").show();
        	var ul = $("#items").empty();
        	markerLyr.clearMarkers();
        	var size = new OpenLayers.Size(24,26);
            var offset = new OpenLayers.Pixel(0, 0);
        	var pois = result.pois;
        	var xmin = 180,ymin = 90,xmax = 0,ymax = 0;
        	for(var i=0,len = pois.length;i<len;i++){
        		var poiData = pois[i];
        		var lonlat = poiData.lonlat.split(" ");
        		var poi = {
        			id:i,
        			poiid:poiData.hotPointID,
        			x:parseFloat(lonlat[0]),
        			y:parseFloat(lonlat[1]),
        			name:poiData.name,
                    desc:poiData.address
        		}
        		xmin = xmin<poi.x?xmin:poi.x;
        		ymin = ymin<poi.y?ymin:poi.y;
        		xmax = xmax>poi.x?xmax:poi.x;
        		ymax = ymax>poi.y?ymax:poi.y;
        		/**
                 * 地图内容
                 */
                var pt =  new OpenLayers.LonLat(poi.x, poi.y);
                var icon = new OpenLayers.Icon('img/red.png',size,offset);
                var feature = new OpenLayers.Feature(markerLyr,
                        pt,
                        {'icon': icon,'attr':poi});
                var marker = feature.createMarker();
                marker.attr = poi;
                marker.id = i;
                marker.events.register("click", feature, function(e){
                    var data = e.object.attr;
                    showInfowindow(data);
                });
                marker.events.register("mouseover", feature, function(e){
                    map.layerContainerDiv.style.cursor = "pointer";
                    var id= e.object.id;
                    $("#img"+id).attr("src","img/blue.png");
                    $("#li"+id).css("background","#f2f2f2");
                    var data = e.object.attr;
                    markerLyr.highMarkerById(data.id);
                });
                marker.events.register("mouseout", feature, function(e){
                    map.layerContainerDiv.style.cursor = "default";
                    var id= e.object.id;
                    $("#img"+id).attr("src","img/red.png");
                    $("#li"+id).css("background","#ffffff");
                    markerLyr.highMarkerById("");
                });
                markerLyr.addMarker(marker);
                /**
                 * 列表内容
                 */
                var li = $("<li />").attr("id","li"+i).appendTo(ul);
                var title = $("<div />").addClass("item").attr("i",i).data("attr",poi);
                var img = $("<img />").attr("id","img"+i).attr("src", "img/red.png");
                var num = $("<a />").addClass("item-num").html(i+1);
                var name = $("<div />").addClass("item-title").html(poi.name);
                title.append(img).append(num).append(name);
                var content = $("<a />").addClass("item-content").html(poi.desc);
                var detail = $("<a />").addClass("item-detail").html("详细>>");
                li.append(title).append(content).append(detail);
                title.on("mouseover",function(){
                    var i = $(this).attr("i");
                    $("#img"+i).attr("src","img/blue.png");
                    var data = $(this).data("attr");
                    markerLyr.highMarkerById(data.id);
                     $("#li"+i).css("background","#f2f2f2");
                });
                title.on("mouseout",function(){
                    var i = $(this).attr("i");
                    $("#img"+i).attr("src","img/red.png");
                    $("#li"+i).css("background","#fff");
                    markerLyr.highMarkerById("");
                });
                title.on("click",function(){
                    var data = $(this).data("attr");
                    showInfowindow(data);
                });
        	}
        	map.zoomToExtent(markerLyr.getDataExtent());
        }
        function showInfowindow(data){
        	markerLyr.highMarkerById(data.id);
        }
    </script>
</head>
<body onload="init()">
<div id="tdtmap" style="height: 100px;"></div>
<div id="map">
	<div class="search-box">
		<input type="text" id="keyword" value="天安门"/>
		<button id="searchbtn">搜索</button>
	</div>
	<div class="item-list">
        <div id="close" class="list-close"></div>
        <div class="list-title">结果列表</div>
        <ul id="items">
        </ul>
        <div class="page-ctrl">
        	<p>
	        	<a class="button" id="firstpage">首页</a>|
	        	<a class="button" id="prevpage">上一页</a>|
	        	<a class="button" id="nextpage">下一页</a>|
	        	<a class="button" id="lastpage">尾页</a>
        	</p>
        	<p id="countdiv"></p>
        </div>
    </div>
</div>
</body>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android源码框架分析

Android6.0权限适配及兼容库的实现

从6.0 MarshMallow开始,Android支持动态权限管理,即有些权限需要在使用到的时候动态申请,根据用户的选择需要有不同的处理,具体表现可以看下图:

17920
来自专栏salesforce零基础学习

salesforce 零基础学习(六十)Wizard样式创建数据

项目中表之间关联关系特别多,比如三个表中A,B,C  C作为主表,A,B作为从表,有时候C表需要创建数据时,同时需要创建A,B两个表的数据,这种情况下,使用Wi...

28390
来自专栏Android知识点总结

SpringBoot-12-之Ajax跨域访问全解析

45520
来自专栏Kubernetes

Kubernetes如何通过Devi

Device Plugins Device Pulgins在Kubernetes 1.10中是beta特性,开始于Kubernetes 1.8,用来给第三方设备...

60180
来自专栏GIS讲堂

PostGIS+QGIS+GeoServer+OpenLayers实现数据的存储、服务的发布以及地图的显示

为方便大家下载,我将所有软件上传的百度网盘里了,有需要的可以上网盘直接下载,地址为:http://pan.baidu.com/s/1ntJrf8P,此外,ope...

1.3K40
来自专栏一只程序汪的自我修养

手把手教你用.NET Core写爬虫

自从上一个项目58HouseSearch从.NET迁移到.NET core之后,磕磕碰碰磨蹭了一个月才正式上线到新版本。

424120
来自专栏数据库新发现

Statspack之十四-"log file sync" 等待事件

http://www.eygle.com/statspack/statspack14-LogFileSync.htm 当一个用户提交(commits)或者回滚...

13210
来自专栏「3306 Pai」社区

深入理解MySQL 5.7 GTID系列(九):实际案例一

https://mp.weixin.qq.com/s/XSnFkuYzIlGWMaXIl-oPeQ

18200
来自专栏hrscy

iOS百度地图问题总结(三)

如果想创建以静态图片作为大头针图片的话,可以通过创建MKAnnotationView是实例。如果想使用apple自带的大头针则创建MKPinAnnotation...

19620
来自专栏老司机的简书

老司机出品———疯狂造轮子之图片异步下载类

SDWebImage,我估计没有一个做iOS的不知道这个三方库吧,他为我们提供了简洁的图片异步下载方式。在他为我一句api带来这么大便利的同时,你有没有想过他是...

13540

扫码关注云+社区

领取腾讯云代金券