天地图逆地理解析搜索名称获取相应坐标系

程序员文章站 2022-03-04 23:41:35

...

<!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>

天地图逆地理解析 搜索名称获取相应坐标系

天地图逆地理解析 搜索名称获取相应坐标系

天地图逆地理解析搜索名称获取相应坐标系

天地图逆地理解析搜索名称获取相应坐标系