腾讯地图利用绘图工具测量距离

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,
        //折线的zIndex
        zIndex: 1000
    });});