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*/) });//繪圖工具 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,//折線的zIndexzIndex: 1000});});

?

總結

以上是生活随笔為你收集整理的腾讯地图利用绘图工具测量距离的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。