“天地图”是国家测绘地理信息局建设的地理信息综合服务网站。集成了来自国家、省、市(县)各级测绘地理信息部门,以及相关政府部门、企事业单位 、社会团体、公众的地理信息公共服务资源,如果做的项目是政府部门、企事业单位尽量选择天地图,因为相比其他几家服务商更加权威。
第一步:登录/注册 国家地理信息公共服务平台
第二步:点击我 点击控制台 会提示注册为开发者
第三步:注册开发者后 创建新应用 选择浏览器端(可以不填白名单) 里面有 您的密钥
第四步:复制 下面的html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HELLO WORLD</title>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>
<script>
var map;
var zoom = 5;//默认级别(19级:20米18级:50米 17级:100米,15级:500米,14级:1公里,13级:2公里, 12级:5公里,11级:10公里,10级:20公里,5级 中国)
function onLoad() {
//找到DIV初始化
//参数 projection: 'EPSG:4326' 倾斜 900913
map = new T.Map('mapDiv', {
projection: 'EPSG:3785'
})
// 中心点和初始化级别
map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
//改变底色
//map.setStyle('indigo')
//创建一个点
var lng1 = new T.LngLat(116.411794, 39.9068);
// 创建标注对象
var marker = new T.Marker(lng1);
// 点击标注点
marker.addEventListener("click", (e) => {
console.log(e)
})
// 创建文本对象
var label = new T.Label({
text: "用户1",
position: lng1,
offset: new T.Point(-9, 0)
});
//向地图上添加标注
map.addOverLay(marker);
//向地图上添加文本
map.addOverLay(label);
//2秒后级别为19 且移动到 创建的点
setTimeout(function () {
map.setZoom(19);
map.panTo(lng1);
}, 2000);
}
</script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" style="position:absolute;width:1500px; height:900px"></div>
开发文档 http://lbs.tianditu.gov.cn/api/js4.0/examples.html
</body>
</html>
到此 初始化,创建标注点,标注点加文字,放大地图,移动到标注点 都已实现