调用天地图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>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2016年12月18日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
