在百度地图上开启测距的功能

最新推荐文章于 2025-02-16 21:59:24 发布

yunchong_zhao

最新推荐文章于 2025-02-16 21:59:24 发布

阅读量4k

点赞数 8

分类专栏： javascript 地图文章标签：百度

本文链接：https://blog.csdn.net/yunchong_zhao/article/details/109119096

版权

百度地图API DistanceTool 测距 JavaScript GIS

关键词由CSDN通过智能技术生成

javascript 同时被 2 个专栏收录

346 篇文章

订阅专栏

地图

2 篇文章

订阅专栏

这篇博客介绍了如何利用百度地图API的DistanceTool工具类库，在网页中实现距离测量功能。通过引入百度地图SDK和DistanceTool_min.js，结合简单的JavaScript代码，可以实现在地图上点击开启和关闭测距功能，方便进行地理空间距离的测量。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百度地图本来api不带测距的功能不过在开源库中存在一个测距的工具类库
DistanceTool 工具

这个是工具类的地址
http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js

然后我们拿到本地进行使用

// 百度地图sdk
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的ak密钥"></script>
// 工具类
<script src="./DistanceTool_min.js"></script>

布局

<body>
    <div id="container">

    </div>
    <div>
        <button id="open">开启测距</button>
        <button id="close">关闭测距</button>
    </div>
</body>

在这里插入图片描述
js 代码

<script type="text/javascript">
    let open = document.querySelector('#open');
    let close = document.querySelector('#close');

    // 百度地图API功能
    var map = new BMap.Map("container");
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    var myDistanceToolObject = new BMapLib.DistanceTool(map, { lineStroke: 2 });
    open.onclick = function() {
        myDistanceToolObject.open(); // 开启
    }
    close.onclick = function () {
        myDistanceToolObject.close(); // 关闭
    }
</script>