<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>天地图-地图API-范例-纯文字的信息窗口</title>
<script type="text/javascript" src="http://api.tianditu.com/api?v=4.0"></script>
<style type="text/css">
body, html{
width: 100%;
height: 100%;
margin:0;
}
#map{
height:400px;
width:100%;
}
.jishou,.host,.build{
text-align: center;
cursor: pointer;
}
</style>
<script>
var map, marker,localsearch;
var zoom = 10 ;
function onLoad() {
//初始化地图对象
map = new T.Map("map");
//允许鼠标滚轮缩放地图
map.enableScrollWheelZoom();
//创建比例尺控件对象
var scale = new T.Control.Scale();
//添加比例尺控件
map.addControl(scale);
//创建缩放平移控件对象
control = new T.Control.Zoom();
//创建地图类型切换对象
var ctrl = new T.Control.MapType();
//添加控件
map.addControl(ctrl);
//添加缩放平移控件
map.addControl(control);
//设置显示地图的中心点和级别 吉首市政府为中心
map.centerAndZoom(new T.LngLat(109.593424, 28.32429), zoom);
var point = new T.LngLat(109.593424, 28.32429);
var config = {
onSearchComplete: localSearchResult //接收数据结果
};
//创建搜索对象
localsearch = new T.LocalSearch(map, config);
}
function localSearchResult(result) {
console.log(result.getPois())
//解析点数据结果
pois(result.getPois());
}
//解析点数据结果
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);
});
marker.openInfoWindow(markerInfoWin);
zoomArr.push(lnglat);
})(i);
}
//显示地图的最佳级别
map.setViewport(zoomArr);
}
}
</script>
</head>
<body onLoad="onLoad()">
<div id="map"></div>
<div class="jishou">双江寺</div>
<div class="host">吉首市政府</div>
<div class="build">水利大厦</div>
<script type="text/javascript" src="map/jquery.js"></script> // 添加自己的
<script type="text/javascript">
$(function() {
$(".jishou,.host,.build").click(function(event) {
console.log($(this).text());
localsearch.search($(this).text())
});
});
</script>
</body>
</html>
添加自己的jquery就可以直接查看效果