腾讯地图利用绘图工具api测量距离
利用腾讯地图绘图工具api测量两地之间的距离
1、引用
<script charset="utf-8"
src="https://map.qq.com/api/js?v=2.exp&key=“自己的key”&libraries=drawing,geometry"></script>
2、js
map = new qq.maps.Map(document.getElementById("map-canvas"), {
zoom: /*sov:zoom*/9/*eov*/,
center: new qq.maps.LatLng(/*sov:center_lat*/31.5/*eov*/, /*sov:center_lng*/121.5/*eov*/)
});
3、绘图
//绘图工具
drawingManager = new qq.maps.drawing.DrawingManager({
drawingMode: qq.maps.drawing.OverlayType.null,
drawingControl: true,
drawingControlOptions: {
position: qq.maps.ControlPosition.TOP_CENTER,
drawingModes: [
qq.maps.drawing.OverlayType.MARKER,
qq.maps.drawing.OverlayType.CIRCLE,
qq.maps.drawing.OverlayType.POLYGON,
qq.maps.drawing.OverlayType.POLYLINE,
qq.maps.drawing.OverlayType.RECTANGLE
]
},
circleOptions: {
fillColor: new qq.maps.Color(255, 208, 70, 0.3),
strokeColor: new qq.maps.Color(88, 88, 88, 1),
strokeWeight: 3,
clickable: false
},
PolylineOptions: {
strokeLinecap: 'square',
},
// polylinecomplete:getPolylinecomplete(qq.maps.Polyline),
});
drawingManager.setMap(map);
// 当一个折线覆盖物绘制完成时,触发此事件
qq.maps.event.addListener(drawingManager, 'polylinecomplete', function (event) {
let polyline = event;
let polylineLatLng = event.getPath();
let start = new qq.maps.LatLng(polylineLatLng.elems[0].lat, polylineLatLng.elems[0].lng),
end = new qq.maps.LatLng(polylineLatLng.elems[polylineLatLng.length-1].lat, polylineLatLng.elems[polylineLatLng.length-1].lng);
//计算距离
let distance = Math.round(qq.maps.geometry.spherical.computeDistanceBetween(start, end) * 10) / 10000;
let label = new qq.maps.Label({
position: end,
map: map,
content: distance + 'km'
});
polyline.setVisible(false);
polyline = new qq.maps.Polyline({
//折线是否可点击
clickable: true,
map: map,
//折线的路径
path: [start,end],
//折线的宽度
strokeWeight: 3,
//折线末端线帽的样式
strokeLinecap: 'square',
//折线是否可见
visible: true,
//折线的zIndex
zIndex: 1000
});});
转载请注明作者和出处,并添加本页链接。
原文链接:
//v2ci.com/54.html