最近在做的项目需要用的天地图，置于为哈不用高德或者其他的…只能说，免费有免费的好处，收费有收费的好处吧
下面是源码，在对应位置加上你的key即可
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="天地图" />
<title>天地图－地图API－web定位并获取详细地址</title>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的key"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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>
</head>
<body onLoad="onLoad()">
<div id="mapDiv"></div>
<p>用H5定位所在位置</p>
<span id="localInfo"></span><br/>
<span id="zuobiao"></span>
<script>
var map;
//天地图key
const mapKey = "你的key";
//初始化地图级别
var zoom = 12;
//当前位置
var detaillocation;
//加载地图
function onLoad() {
//初始化地图对象
map = new T.Map("mapDiv");
//设置显示地图的中心点和级别
map.centerAndZoom(new T.LngLat(116.40969, 38.89945), zoom);
//创建地图类型控件对象
var _mapType = new T.Control.MapType();
//添加地图类型控件
map.addControl(_mapType);
//创建缩放平移控件对象
_zoomControl = new T.Control.Zoom();
//添加缩放平移控件
map.addControl(_zoomControl);
//创建缩放平移控件对象
_zoomControl.setPosition(T_ANCHOR_TOP_LEFT);
//创建定位对象lo
var lo = new T.Geolocation();
//创建右键菜单对象
var menu = new T.ContextMenu({
width: 140
});
//添加右键菜单
var txtMenuItem = [{
text: '放大',
callback: function() {
map.zoomIn()
}
},
{
text: '缩小',
callback: function() {
map.zoomOut()
}
},
{
text: '放置到最大级',
callback: function() {
map.setZoom(18)
}
},
{
text: '查看全国',
callback: function() {
map.setZoom(4)
}
},
{
text: '获得右键点击处座标',
isDisable: false,
callback: function(lnglat) {
alert(lnglat.getLng() + "," + lnglat.getLat());
}
}
];
for (var i = 0; i < txtMenuItem.length; i++) {
//添加菜单项
var item = new T.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback);
//item.disable();
menu.addItem(item);
if (i == 1 || i == 3) {
//添加分割线
menu.addSeparator();
}
}
//装载菜单
map.addContextMenu(menu);
//定位回调函数
fn = function(e) {
//当前为移动端时
if (this.getStatus() == 0) {
map.centerAndZoom(e.lnglat, 15)
console.log(e);
//获取地理位置信息并设置到标注
getDetailLocation(e.lnglat, e.lnglat);
}
//当前为PC端时
if (this.getStatus() == 1) {
map.centerAndZoom(e.lnglat, e.level)
console.log(e);
//获取地理位置信息并设置到标注
getDetailLocation(e.lnglat, e.lnglat);
}
}
//设置标注
function setMarker(e) {
var marker = new T.Marker(e);
map.addOverLay(marker);
var markerInfoWin = new T.InfoWindow("" + detaillocation);
marker.addEventListener("click", function() {
marker.openInfoWindow(markerInfoWin);
});
}
//通过经纬度获取详细地址
function getDetailLocation(lnglat_lng, lnglat_lat) {
$.ajax({
url: "https://api.tianditu.gov.cn/geocoder",
type: 'GET',
contentType: "application/json;charset=utf-8",
data: {
tk: mapKey,
type: "geocode",
postStr: "{'lon':" + lnglat_lng.lng + ",'lat':" + lnglat_lat.lat + ",'ver':1}"
},
success: function(data) {
var addressdata = eval("(" + data + ")");
//截取地址信息显示在span上
detaillocation = addressdata.result.formatted_address;
$("#localInfo").text(detaillocation + "->" + (new Date()).toLocaleDateString());
$("#zuobiao").text("座标->"+lnglat_lng.lng+","+lnglat_lat.lat);
console.log(detaillocation);
if (addressdata.msg == "ok" && addressdata.status == 0) {
//将位置信息设置到标注
setMarker(lnglat_lat);
} else {
//dosomething
}
},
error: function(er, er1, er2) {
alert("获取失败");
}
});
}
//开始定位
lo.getCurrentPosition(fn);
}
</script>
</body>
</html>