天地图API-获取自定义点覆盖物集
作者:互联网
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>天地图-地图API-范例-添加点覆盖物工具</title>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script>
<style type="text/css">body,html{width:100%;height:100%;margin:0;font-family:"Microsoft YaHei"}#mapDiv{width:100%;height:700px}input,b,p{margin-left:5px;font-size:14px}</style>
<script>
var map, zoom = 17, markerTool
var listener = null;
function onl oad() {
//初始化地图对象
map = new T.Map("mapDiv");
//设置显示地图的中心点和级别
map.centerAndZoom(new T.LngLat(116.40969, 39.94940), zoom);
//允许鼠标双击放大地图
map.enableScrollWheelZoom();
//创建标注工具对象
markerTool = new T.MarkTool(map, {follow: true});
markerTool.addEventListener('mouseup', function(){
setTimeout(function(){
markerTool.open();
}, 100);
});
}
function editMarker() {
var markers = markerTool.getMarkers()
for (var i = 0; i < markers.length; i++) {
markers[i].enableDragging();
}
}
function endeditMarker() {
var markers = markerTool.getMarkers()
for (var i = 0; i < markers.length; i++) {
markers[i].disableDragging();
}
}
function getMarkers() {
var marks = markerTool.getMarkers();
marks.forEach(function(o) {
var lngLat = o.getLngLat ();
console.log(lngLat.getLng() .toFixed(6)+ "," + lngLat.getLat().toFixed(6));
});
}
</script>
</head>
<body onl oad="onLoad()">
<div id="mapDiv" ></div>
<div >
<p>本示例演示如何在地图上用鼠标添加点</p>
<input type="button" value="开 启" onClick="endeditMarker();markerTool.open();"/>
<input type="button" value="关 闭" onClick="markerTool.close();"/>
<input type="button" value="编 辑" onClick="editMarker();"/>
<input type="button" value="获取所有" onClick="getMarkers();"/>
</div>
</body>
</html>
![使用步骤](https://www.icode9.com/i/ll/?i=20210323104429479.png)
![提取经纬度 ,可以使用sublime_text等工具进行多行编辑成目标格式](https://www.icode9.com/i/ll/?i=20210323104543894.png)
标签:function,map,覆盖物,markerTool,地图,markers,API,var,自定义 来源: https://blog.csdn.net/weixin_45711444/article/details/115112012