最近项目需要采集核对 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>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="地图"/>
<title>天地图经纬度查询</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");
//设置显示地图的中心点和级别
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>
<body onLoad="onLoad()">
<div id="mapDiv" ></div>
<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="温州市" />
<input type="button" value="搜索" onclick="search();" />
</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">
<input type="button" value="搜索" onClick="setCenterAndZoom()"/>
<!-- <button type="submit" id="btn" οnClick="setCenterAndZoom()">搜索</button> -->
</div>
<div >
<font style='font-weight:700'>3.用鼠标点击地图获得详细信息:</font>
<div id="addressMsg" style="font-size:14px"></div> <div id="detailedAddress" style="font-size:14px"></div>
</div>
</body>
</html>
成果展示
网友评论