首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >调用天地图API实现关键词搜索

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

作者头像
lzugis
发布2018-10-23 11:38:07
2.9K0
发布2018-10-23 11:38:07
举报

概述:

本文讲述结合天地图 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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2016年12月18日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档