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

2024-01-02 09:29:46

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);
        });
      }
    };
  },

文章来源:https://blog.csdn.net/weixin_44042792/article/details/135332430
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。