高德地图添加marker、删除marker和点击marker里面的heml按钮

最新推荐文章于 2025-03-19 22:18:40 发布

锦坤！

最新推荐文章于 2025-03-19 22:18:40 发布

阅读量2.2k

点赞数 9

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_44042792/article/details/135332430

版权

文章讲述了如何在地图上添加自定义标记，并通过JavaScript实现添加到markers数组中，以及在满足条件时删除所有标记。同时，还介绍了如何处理点击marker触发的事件，通过挂载在window上以便全局访问.

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

1. 添加（将marker放在markers数组中为了方便删除）

let marker = new AMap.Marker({
                      map: that.aMap,
                      position: e.data.lnglat,
                      content: `<div style='color: #a2aee0; background: rgb(2, 19, 54); margin: -5px;border-width: 2px;border-color: #02e6ff;border-style: solid; border-radius: 4px;'>
                              <div class="close-btn" style="float: right;margin-top: 3px; margin-right: 5px;" onclick="clearMarker()">X</div>
                              <div style="height: 36px; line-height: 45px; padding: 0px 20px; white-space:nowrap;">位置：北京</div>
                              <div style="height: 36px; line-height: 20px; padding: 0px 20px; white-space:nowrap;">
                                联系人：袁磊
                              </div>
                            </div>
                            `
                    });
                    that.markers.push(marker);

2. 删除

if (that.markers && that.markers.length) {
                      that.markers.map((ele, index) => {
                        ele.setMap(null);
                      });
                    }

3. 点击marker中的事件（因把clearMarker事件挂载在window上就可以调用）

mounted() {
    window.clearMarker = () => {
      if (this.markers && this.markers.length) {
        this.markers.map((ele, index) => {
          ele.setMap(null);
        });
      }
    };
  },