高德地图测距功能js

您可以使用高德地图的JavaScript API来实现测距功能。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测距功能示例</title>
    <style type="text/css">
        #mapContainer {
            width: 100%;
            height: 500px;
        }
        #resultContainer {
            margin-top: 10px;
        }
    </style>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的高德地图API密钥"></script>
    <script type="text/javascript">
        var map = new AMap.Map('mapContainer', {
            zoom: 13,
            center: [116.397428, 39.90923]
        });

        // 创建测距工具对象
        var ruler = new AMap.RangingTool(map);

        // 监听测距完成事件
        AMap.event.addListener(ruler, 'end', function (e) {
            var resultContainer = document.getElementById('resultContainer');
            var result = e.data.path;
            var distance = e.data.distance.toFixed(2); // 距离保留两位小数
            resultContainer.innerHTML = '总距离：' + distance + '米';
        });

        // 启动测距工具
        ruler.turnOn();

        // 停止测距工具
        ruler.turnOff();
    </script>
</head>
<body>
<div id="mapContainer"></div>
<div id="resultContainer"></div>
</body>
</html>

请将代码中的您申请的高德地图API密钥替换为您自己申请的API密钥。在浏览器中打开该HTML文件，即可看到一个地图，并且可以通过点击地图上的点来进行测距操作。测距结果会显示在resultContainer元素中