<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="天地图"/>
<title>天地图－地图API－范例－地理编码</title>
<style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:400px}input,b,p{margin-left:5px;font-size:14px}</style>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=秘钥"></script>
<script>
var map;
var zoom = 12;
var geocoder;
function onLoad()
{
//初始化地图对象
map=new T.Map("mapDiv");
//设置显示地图的中心点和级别
map.centerAndZoom(new T.LngLat(116.40969,39.89945),zoom)
//创建对象
geocoder = new T.Geocoder();
}
function searchResult(result){
console.log(result)
document.getElementById("zuobiao").value = result.location.lat + ',' + result.location.lon
if(result.getStatus() == 0){
map.panTo(result.getLocationPoint(), 16);
//创建标注对象
var marker = new T.Marker(result.getLocationPoint());
//向地图上添加标注
map.addOverLay(marker);
}else{
alert(result.getMsg());
}
}
function search(){
map.clearOverLays();
geocoder.getPoint(document.getElementById("searchPoint").value,searchResult);
}
</script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
<p>本示例演示如何使用地理编码接口获得坐标信息。</p>
<input type="text" id="searchPoint" value="北京市延庆区延庆镇莲花池村前街50夕阳红养老院" />
<input type="button" value="搜索" onclick="search();" />
<input type="text" name="" id="zuobiao" value="" />
</body>
</html>
