利用天地图接口编写经纬度查询转换网页

最近项目需要采集核对 PGIS警用地图的经纬度，高德和百度这些民用地图坐标强制漂移过的，需要公式转换才能用可以看我另一篇文章（https://www.jianshu.com/p/b9a8e44ed306）

考虑了一下直接调用国家测绘局的天地图（采用CGCS2000）数据，因为天地图与警用地图坐标其实相差无几。

需要提前申请KEY给网页用

天地图官方演示案例可以参考：

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

主要需要2个功能

1.使用名称获得坐标信息

2.使用坐标获得地理信息

直接上代码，没有学过前端，东拼西凑写的比较简陋大神勿喷。

<!DOCTYPE html>

<html>

<head>

<title>天地图经纬度查询</title>

var map;

var zoom = 12;

var geocode;

function onLoad()

{

//初始化地图对象

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

//设置显示地图的中心点和级别

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

//创建对象

geocode = new T.Geocoder();

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

geocode.getLocation(e.lnglat,searchResult);

});

}

// 3.用鼠标点击地图获得详细信息

function searchResult(result)

{

if(result.getStatus() == 0)

{

// 添加点位符合

map.clearOverLays();

searchGEO(result);

// 显示点击展示的信息

document.getElementById("addressMsg").innerHTML = "<font style='font-weight:700'>详细地址："+result.getAddress();+"</font>"

var location = result.getLocationPoint();

var html = "<font style='font-weight:700'>GPS经纬度："+location.lng+","+location.lat+"</font><br/>";

var addressComponent = result.getAddressComponent();

var html = "<font style='font-weight:700'>详细信息如下：</font><br/>";

html += "<font style='font-size:12px'>此点最近地点信息："+addressComponent.address+"</font><br/>";

html += "<font style='font-size:12px'>距离此点最近poi点的距离："+addressComponent.poi_distance+"米</font><br/>";

html += "<font style='font-size:12px'>距离此点最近poi点："+addressComponent.poi+"</font><br/>";

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

}

else

{

document.getElementById("addressMsg").innerHTML = "<font style='font-weight:700'>服务器返回状态：</font>"+result.getStatus();

document.getElementById("detailedAddress").innerHTML = "<font style='font-weight:700'>服务器返回响应信息：</font>"+result.getMsg();

}

// 2.坐标反查询设置地图

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.使用地理编码接口获得坐标信息

function searchGEO(result)

{

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

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

//创建标注对象

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

//向地图上添加标注

map.addOverLay(marker);

// 点击出现信息窗口

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>

<div>

<font style='font-weight:1000'>1.使用地理编码获得坐标信息：</font>

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

</div>

<div >

<font style='font-weight:700'>2.使用坐标信息获得地理编码：</font>

经度:<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">

</div>

<div >

<font style='font-weight:700'>3.用鼠标点击地图获得详细信息:</font>

</div>

</body>

</html>

成果展示