天地图显示多个标注点带点击事件有检索框
天地图的坐标和百度地图坐标还有有点区别的，直接上代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>天地图－地图API－范例－多个点的信息窗口</title>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的**"></script>
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#mapDiv{height:800px;width:100%;}
input,p { margin-top: 10px; margin-left: 5px; font-size: 14px; }
#top{
/*float:left;*/
top:30px;
left:30px;
position:absolute;
z-index:9999;
}
</style>
<script>
var map
var zoom = 12;
var localsearch;
function onLoad() {
var data_info = [[119.8621103,31.13477982,"名称：长兴开元芳草地乡村酒店"],
[119.650058,30.98824388,"名称：艳阳度假果圣山庄"],
[119.9453394,31.00378236,"名称：天一幼儿园"],
[120.3362481,30.77911669,"名称：湖州市双林镇中心幼儿园"],
[119.982657,30.52798994,"名称：莫干花农"],
[119.9282644,31.0266448,"名称：中央花园"]
];
//初始化地图对象
map = new T.Map("mapDiv");
//设置显示地图的中心点和级别
map.centerAndZoom(new T.LngLat(120.107124, 30.873583), zoom);
//创建图片对象
var icon = new T.Icon({
iconUrl: "http://api.tianditu.gov.cn/img/map/markerA.png",
iconSize: new T.Point(19, 27),
iconAnchor: new T.Point(10, 25)
});
for(var i=0;i<data_info.length;i++){
var marker = new T.Marker(new T.LngLat(data_info[i][0],data_info[i][1]),{icon: icon}); // 创建标注
var content = data_info[i][2];
map.addOverLay(marker); // 将标注添加到地图中
addClickHandler(content,marker);
}
function addClickHandler(content,marker){
marker.addEventListener("click",function(e){
openInfo(content,e)}
);
}
function openInfo(content,e){
var point = e.lnglat;
marker = new T.Marker(point);// 创建标注
var markerInfoWin = new T.InfoWindow(content,{offset:new T.Point(0,-30)}); // 创建信息窗口对象
map.openInfoWindow(markerInfoWin,point); //开启信息窗口
}
//关键字搜索
var config = {
pageCapacity: 1000, //每页显示的数量
onSearchComplete: localSearchResult //接收数据的回调函数
};
//创建搜索对象
localsearch = new T.LocalSearch(map, config);
}
function localSearchResult(result) {
//清空地图及搜索列表
clearAll();
//添加提示词
prompt(result);
//根据返回类型解析搜索结果
switch(parseInt(result.getResultType())) {
case 1:
//解析点数据结果
pois(result.getPois());
break;
case 2:
//解析推荐城市
statistics(result.getStatistics());
break;
case 3:
//解析行政区划边界
area(result.getArea());
break;
case 4:
//解析建议词信息
suggests(result.getSuggests());
break;
case 5:
//解析公交信息
lineData(result.getLineData());
break;
}
}
//解析提示词
function prompt(obj) {
var prompts = obj.getPrompt();
if(prompts) {
var promptHtml = "";
for(var i = 0; i < prompts.length; i++) {
var prompt = prompts[i];
var promptType = prompt.type;
var promptAdmins = prompt.admins;
var meanprompt = prompt.DidYouMean;
}
if(promptHtml != "") {
document.getElementById("promptDiv").style.display = "block";
document.getElementById("promptDiv").innerHTML = promptHtml;
}
}
}
//解析点数据结果
function pois(obj) {
if(obj) {
//显示搜索列表
var divMarker = document.createElement("div");
//坐标数组，设置最佳比例尺时会用到
var zoomArr = [];
for(var i = 0; i < obj.length; i++) {
//闭包
(function(i) {
//名称
var name = obj[i].name;
//地址
var address = obj[i].address;
//坐标
var lnglatArr = obj[i].lonlat.split(" ");
var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
var winHtml = "名称:" + name + "<br/>地址:" + address;
//创建标注对象
var marker = new T.Marker(lnglat);
//地图上添加标注点
map.addOverLay(marker);
//注册标注点的点击事件
var markerInfoWin = new T.InfoWindow(winHtml, {
autoPan: true
});
marker.addEventListener("click", function() {
marker.openInfoWindow(markerInfoWin);
});
zoomArr.push(lnglat);
//在页面上显示搜索的列表
var a = document.createElement("a");
a.href = "javascript://";
a.innerHTML = name;
a.onclick = function() {
showPosition(marker, winHtml);
}
divMarker.appendChild(document.createTextNode((i + 1) + "."));
divMarker.appendChild(a);
divMarker.appendChild(document.createElement("br"));
})(i);
}
//显示地图的最佳级别
map.setViewport(zoomArr);
//显示搜索结果
document.getElementById("resultDiv").style.display = "block";
}
}
//显示信息框
function showPosition(marker, winHtml) {
var markerInfoWin = new T.InfoWindow(winHtml, {
autoPan: true
});
marker.openInfoWindow(markerInfoWin);
}
//解析推荐城市
function statistics(obj) {
if(obj) {
//坐标数组，设置最佳比例尺时会用到
var pointsArr = [];
var priorityCitysHtml = "";
var allAdminsHtml = "";
var priorityCitys = obj.priorityCitys;
if(priorityCitys) {
//推荐城市显示
priorityCitysHtml += "在中国以下城市有结果<ul>";
for(var i = 0; i < priorityCitys.length; i++) {
priorityCitysHtml += "<li>" + priorityCitys[i].name + "(" + priorityCitys[i].count + ")</li>";
}
priorityCitysHtml += "</ul>";
}
var allAdmins = obj.allAdmins;
if(allAdmins) {
allAdminsHtml += "更多城市<ul>";
for(var i = 0; i < allAdmins.length; i++) {
allAdminsHtml += "<li>" + allAdmins[i].name + "(" + allAdmins[i].count + ")";
var childAdmins = allAdmins[i].childAdmins;
if(childAdmins) {
for(var m = 0; m < childAdmins.length; m++) {
allAdminsHtml += "<blockquote>" + childAdmins[m].name + "(" + childAdmins[m].count + ")</blockquote>";
}
}
allAdminsHtml += "</li>"
}
allAdminsHtml += "</ul>";
}
document.getElementById("statisticsDiv").style.display = "block";
document.getElementById("statisticsDiv").innerHTML = priorityCitysHtml + allAdminsHtml;
}
}
//解析行政区划边界
function area(obj) {
if(obj) {
if(obj.points) {
//坐标数组，设置最佳比例尺时会用到
var pointsArr = [];
var points = obj.points;
for(var i = 0; i < points.length; i++) {
var regionLngLats = [];
var regionArr = points[i].region.split(",");
for(var m = 0; m < regionArr.length; m++) {
var lnglatArr = regionArr[m].split(" ");
var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
regionLngLats.push(lnglat);
pointsArr.push(lnglat);
}
//创建线对象
var line = new T.Polyline(regionLngLats, {
color: "blue",
weight: 3,
opacity: 1,
lineStyle: "dashed"
});
//向地图上添加线
map.addOverLay(line);
}
//显示最佳比例尺
map.setViewport(pointsArr);
}
if(obj.lonlat) {
var regionArr = obj.lonlat.split(",");
map.panTo(new T.LngLat(regionArr[0], regionArr[1]));
}
}
}
//解析建议词信息
function suggests(obj) {
if(obj) {
//建议词提示，如果搜索类型为公交规划建议词或公交站搜索时，返回结果为公交信息的建议词。
var suggestsHtml = "建议词提示<ul>";
for(var i = 0; i < obj.length; i++) {
suggestsHtml += "<li>" + obj[i].name + " <font style='color:#666666'>" + obj[i].address + "</font></li>";
}
suggestsHtml += "</ul>";
document.getElementById("suggestsDiv").style.display = "block";
document.getElementById("suggestsDiv").innerHTML = suggestsHtml;
}
}
//解析公交信息
function lineData(obj) {
if(obj) {
//公交提示
var lineDataHtml = "公交提示<ul>";
for(var i = 0; i < obj.length; i++) {
lineDataHtml += "<li>" + obj[i].name + " <font style='color:#666666'>共" + obj[i].stationNum + "站</font></li>";
}
lineDataHtml += "</ul>";
document.getElementById("lineDataDiv").style.display = "block";
document.getElementById("lineDataDiv").innerHTML = lineDataHtml;
}
}
//清空地图及搜索列表
function clearAll() {
map.clearOverLays();
document.getElementById("searchDiv").innerHTML = "";
document.getElementById("resultDiv").style.display = "none";
document.getElementById("statisticsDiv").innerHTML = "";
document.getElementById("statisticsDiv").style.display = "none";
document.getElementById("promptDiv").innerHTML = "";
document.getElementById("promptDiv").style.display = "none";
document.getElementById("suggestsDiv").innerHTML = "";
document.getElementById("suggestsDiv").style.display = "none";
document.getElementById("lineDataDiv").innerHTML = "";
document.getElementById("lineDataDiv").style.display = "none";
}
</script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv">
<div id="top">
<input type="text" id="keyWord" value="" />
<input type="button" onClick="localsearch.search(document.getElementById('keyWord').value)" value="搜索" /><br/>
<!-- 提示词面板 -->
<div id="promptDiv" class="prompt"></div>
<!-- 统计面板 -->
<div id="statisticsDiv" class="statistics"></div>
<!-- 建议词面板 -->
<div id="suggestsDiv" class="suggests"></div>
<!-- 公交提示面板 -->
<div id="lineDataDiv" class="lineData"></div>
<!-- 搜索结果面板 -->
<div id="resultDiv" class="result">
<div id="searchDiv"></div>
</div>
</div>
</div>
</body>
</html>
效果展示图：