百度地图自定义覆盖物拖拽移动功能

原创

已于 2025-01-03 14:49:59 修改 · 1.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#BMapGL #百度地图

于 2025-01-03 14:46:15 首次发布

百度地图的自定义覆盖物 CustomOverlay，官方好像没有提供拖拽移动的功能。需要自己实现，AI 给的办法也是一言难尽，连 API 都编的假里假气的。这里记录一下我的实现思路，避免以后忘记：

给覆盖物的 dom 元素添加 mousedown 事件，触发后开启拖拽功能，并记录鼠标起始位置
- 还要关闭地图的缩放功能（如果有的话），避免缩放过程中鼠标和覆盖物发生错位，这个过程，不会触发mousemove
给页面添加 mousemove 事件，触发后记录鼠标实时位置，执行拖拽移动操作
- 还要判断鼠标移出地图容器的时候，关闭拖拽功能
- 在页面上绑定事件，而不是在覆盖物的 dom 元素上，是因为事件回调队列的执行顺序，万一更新dom元素定位的逻辑没有执行完，鼠标就已经移动到 dom 元素外，那 mousemove 事件就中断了。绑定到页面上，能保证事件正常触发。
给页面添加 mouseleave 和 mouseup 事件，触发后关闭拖拽功能
- 重新开启地图的缩放功能（如果有的话）
- 给页面添加 mouseleave 事件，是为了监听鼠标离开浏览器页面的情况
- 给页面添加 mouseup 事件，而不是绑定到覆盖物的 dom 元素上，原因同 mousemove

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=您的密钥"></script>
    <style>
      h1, p {
     
      text-align: center; }
      #container {
     
     
        width: 80vw;
        height: calc(80vh - 40px);
        border: 4px solid pink;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <h1>百度地图自定义覆盖物拖拽移动功能</h1>
    <p><button id