最近在做的項目需要用的天地圖,置於爲哈不用高德或者其他的…只能說,免費有免費的好處,收費有收費的好處吧
下面是源碼,在對應位置加上你的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>