利用天地圖接口編寫經(jīng)緯度查詢轉(zhuǎn)換網(wǎng)頁

最近項目需要采集核對?PGIS警用地圖的經(jīng)緯度，高德和百度這些民用地圖坐標(biāo)強(qiáng)制漂移過的馏鹤，需要公式轉(zhuǎn)換才能用可以看我另一篇文章（http://www.reibang.com/p/b9a8e44ed306）

考慮了一下直接調(diào)用國家測繪局的天地圖（采用CGCS2000）數(shù)據(jù)，因為天地圖與警用地圖坐標(biāo)其實相差無幾阳仔。

需要提前申請KEY給網(wǎng)頁用

天地圖官方演示案例可以參考：

http://lbs.tianditu.gov.cn/api/js4.0/examples.html

主要需要2個功能

1.使用名稱獲得坐標(biāo)信息

2.使用坐標(biāo)獲得地理信息

直接上代碼递礼，沒有學(xué)過前端，東拼西湊寫的比較簡陋大神勿噴讹语。

<!DOCTYPE?html>

<html>

<head>

????<meta?http-equiv="content-type"?content="text/html;?charset=utf-8"/>

????<meta?name="keywords"?content="地圖"/>

????<title>天地圖經(jīng)緯度查詢</title>

????<style?type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft?YaHei"}#mapDiv{width:100%;height:75%}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?geocode;

????????function?onLoad()

????????{

????????????//初始化地圖對象

????????????map=new?T.Map("mapDiv");

????????????//設(shè)置顯示地圖的中心點(diǎn)和級別

????????????map.centerAndZoom(new?T.LngLat(120.69534,27.9982),zoom=14);

????????????//創(chuàng)建對象

????????????geocode?=?new?T.Geocoder();?

????????????map.addEventListener("click",?function(e){

????????????????geocode.getLocation(e.lnglat,searchResult);

????????????});

????????}

????????//?3.用鼠標(biāo)點(diǎn)擊地圖獲得詳細(xì)信息

????????function?searchResult(result)

????????{

????????????if(result.getStatus()?==?0)

????????????{

????????????????//?添加點(diǎn)位符合

????????????????map.clearOverLays();

????????????????searchGEO(result);

????????????????//?顯示點(diǎn)擊展示的信息

????????????????document.getElementById("addressMsg").innerHTML?=?"<font?style='font-weight:700'>詳細(xì)地址："+result.getAddress();+"</font>"

????????????????var?location?=?result.getLocationPoint();

????????????????var?html?=?"<font?style='font-weight:700'>GPS經(jīng)緯度："+location.lng+","+location.lat+"</font><br/>";?

????????????????var?addressComponent?=?result.getAddressComponent();

????????????????var?html?=?"<font?style='font-weight:700'>詳細(xì)信息如下：</font><br/>";

????????????????html?+=?"<font?style='font-size:12px'>此點(diǎn)最近地點(diǎn)信息："+addressComponent.address+"</font><br/>";

????????????????html?+=?"<font?style='font-size:12px'>距離此點(diǎn)最近poi點(diǎn)的距離："+addressComponent.poi_distance+"米</font><br/>";

????????????????html?+=?"<font?style='font-size:12px'>距離此點(diǎn)最近poi點(diǎn)："+addressComponent.poi+"</font><br/>";

????????????????document.getElementById("detailedAddress").innerHTML?=?html;

????????????}

????????????else

????????????{

????????????????document.getElementById("addressMsg").innerHTML?=?"<font?style='font-weight:700'>服務(wù)器返回狀態(tài)：</font>"+result.getStatus();

????????????????document.getElementById("detailedAddress").innerHTML?=?"<font?style='font-weight:700'>服務(wù)器返回響應(yīng)信息：</font>"+result.getMsg();

????????????}

????????}

????????//?2.坐標(biāo)反查詢設(shè)置地圖

????????function?setCenterAndZoom()?{

????????????var?lng?=?document.getElementById("lng").value;

????????????var?lat?=?document.getElementById("lat").value;

????????????map.centerAndZoom(new?T.LngLat(lng,?lat),?zoom=17);

????????????map.clearOverLays();

????????????var?lnglat?=?new?T.LngLat(lng,?lat);

????????????geocode.getLocation(lnglat,searchGEO);

????????}

????????//?1.使用地理編碼接口獲得坐標(biāo)信息

????????function?searchGEO(result)

????????{

????????????if(result.getStatus()?==?0){

????????????????map.panTo(result.getLocationPoint(),?17);

????????????????//創(chuàng)建標(biāo)注對象

????????????????var?marker?=?new?T.Marker(result.getLocationPoint());

????????????????//向地圖上添加標(biāo)注

????????????????map.addOverLay(marker);

????????????????//?點(diǎn)擊出現(xiàn)信息窗口

????????????????var?location?=?result.getLocationPoint();

????????????????var?markerInfoWin?=?new?T.InfoWindow(result.getAddress()+'<br/>'+location.lng+","+location.lat);

????????????????marker.openInfoWindow(markerInfoWin);

????????????}else{

????????????????alert(result.getMsg());

????????????}

????????}

????//?0.提取文本用于上面檢索

????????function?search(){

????????????map.clearOverLays();

????????????geocode.getPoint(document.getElementById("searchPoint").value,?searchGEO);

????????}

</script>

</head>

<body?onLoad="onLoad()">

<div?id="mapDiv"?></div>

<div>

????<font?style='font-weight:1000'>1.使用地理編碼獲得坐標(biāo)信息：</font>

????<input?id="searchPoint"?type="search"??size="25"?onkeydown="this.onkeyup();"?onkeyup="this.size=(this.value.length>25?this.value.length:25);"??value="溫州市"?/>

????<input?type="button"?value="搜索"?onclick="search();"?/>

</div>??

<div?>

????<font?style='font-weight:700'>2.使用坐標(biāo)信息獲得地理編碼：</font>

????經(jīng)度:<input?id="lng"?type="search"?size="25"?onkeydown="this.onkeyup();"?onkeyup="this.size=(this.value.length>25?this.value.length:25);"?placeholder="120.69563">

????緯度:<input?id="lat"?type="search"?size="25"?onkeydown="this.onkeyup();"?onkeyup="this.size=(this.value.length>25?this.value.length:25);"?placeholder="27.99766">

????<input?type="button"?value="搜索"?onClick="setCenterAndZoom()"/>

????

</div>

<div?>

????<font?style='font-weight:700'>3.用鼠標(biāo)點(diǎn)擊地圖獲得詳細(xì)信息:</font>

????<div?id="addressMsg"?style="font-size:14px"></div>?<div?id="detailedAddress"?style="font-size:14px"></div>

</div>

</body>

</html>

成果展示