<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="天地图"/>
<title>天地图－地图API－范例－自定义标注图片</title>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=b35def15383896248a54d690213ce565"></script>
<style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:600px}input,b,p{margin-left:5px;font-size:14px}</style>
<!-- <script src="https://unpkg.com/gcoord@1.0.5/dist/gcoord.global.js"></script> -->
<script src="js/gcoord.js"></script>
<script src="js/jquery-1.11.2.min.js"></script>
<style>
.tdt-control-copyright{display: none;}
.tdt-control{display: none;}
</style>
<script>
var map;
var zoom = 12;
function onLoad() {
//初始化地图对象
map = new T.Map("mapDiv");
//设置显示地图的中心点和级别
map.centerAndZoom(new T.LngLat(106.533776,29.555699), zoom);
//创建图片对象
var icon = new T.Icon({
iconUrl: "http://api.tianditu.gov.cn/img/map/markerA.png",
iconSize: new T.Point(19, 27),
iconAnchor: new T.Point(10, 25)
});
//百度坐标转换
// var longlat = BD09II2WGS84(106.534061,29.555601);
var longlat = transformGCJ2WGS(106.527629,29.549594);
//向地图上添加自定义标注
var marker = new T.Marker(new T.LngLat(longlat.lon,longlat.lat), {icon: icon});
map.addOverLay(marker);
}
//坐标转地址
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(){
var geoCoder = new T.Geocoder();
map.clearOverLays();
geoCoder.getPoint(document.getElementById("searchPoint").value,searchResult);
}
//高德坐标系转天地图坐标系
function transformGCJ2WGS(gcjLon,gcjLat) {
let d = delta(gcjLat, gcjLon);
return {
'lat': (gcjLat - d.lat),
'lon': (gcjLon - d.lon)
}
}
// 百度坐标系转天地图坐标系
function BD09II2WGS84(bdLon, bdLat) {
let x_pi = 3.14159265358979324 * 3000.0 / 180.0;
//百度坐标转成火星坐标
let mars_point = { lat: 0, lon: 0,};
let x = bdLon - 0.0065;
let y = bdLat - 0.006;
let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
mars_point.lat = z * Math.sin(theta);
mars_point.lon = z * Math.cos(theta);
//把火星坐标GCJ02转地球坐标系WGS84
let gcjLat = mars_point.lat;
let gcjLon = mars_point.lon;
let d = this.delta(gcjLat, gcjLon);
return {
'lat': ( gcjLat - d.lat ),
'lon': ( gcjLon - d.lon )
}
}
function delta(lat,lon) {
let PI = 3.14159265358979324;
let a = 6378245.0 ;
let ee = 0.00669342162296594323 ;
let dLat = this.transformLat(lon - 105.0, lat - 35.0);
let dLon = this.transformLon(lon - 105.0, lat - 35.0);
let radLat = lat / 180.0 * PI;
let magic = Math.sin(radLat);
magic = 1 - ee * magic * magic;
let sqrtMagic = Math.sqrt(magic);
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * PI);
dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * PI);
return {
'lat': dLat,
'lon': dLon
}
}
function transformLat(x, y) {
let PI = 3.14159265358979324;
let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(y * PI) + 40.0 * Math.sin(y / 3.0 * PI)) * 2.0 / 3.0;
ret += (160.0 * Math.sin(y / 12.0 * PI) + 320 * Math.sin(y * PI / 30.0)) * 2.0 / 3.0;
return ret
}
function transformLon(x, y) {
let PI = 3.14159265358979324;
let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
ret += (20.0 * Math.sin(6.0 * x * PI) + 20.0 * Math.sin(2.0 * x * PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(x * PI) + 40.0 * Math.sin(x / 3.0 * PI)) * 2.0 / 3.0;
ret += (150.0 * Math.sin(x / 12.0 * PI) + 300.0 * Math.sin(x / 30.0 * PI)) * 2.0 / 3.0;
return ret;
}
</script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" ></div>
<p>本示例演示如何使用地理编码接口获得坐标信息。</p>
<input type="text" id="searchPoint" value="重庆市渝中区李子坝正街113号" />
<input type="button" value="搜索" onclick="search();" />
<input type="text" name="" id="zuobiao" value="" />
</body>
</html>
