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

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

  • 9
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在高德地图添加 marker 点,可以按照以下步骤进行: 1. 引入高德地图 JavaScript API 库 在 HTML 页面中引入高德地图 JavaScript API 库,可以在官网上下载或使用 CDN 引入。 2. 创建地图 使用 `new AMap.Map()` 方法创建一个地图实例,指定地图容器的 ID 和地图的中心点和缩放级别。 ``` var map = new AMap.Map('mapContainer', { center: [116.397428, 39.90923], zoom: 13 }); ``` 3. 创建 marker 点 使用 `new AMap.Marker()` 方法创建一个 marker 点,指定 marker 点的位置和其他属性。 ``` var marker = new AMap.Marker({ position: [116.397428, 39.90923], title: '这是一个 marker 点', icon: 'https://webapi.amap.com/images/0.png' }); ``` 4. 将 marker添加到地图中 使用 `map.add(marker)` 方法将 marker添加到地图中。 ``` map.add(marker); ``` 完整的代码示例: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高德地图添加 marker 点</title> <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德地图 API Key"></script> <style type="text/css"> #mapContainer { width: 100%; height: 500px; } </style> </head> <body> <div id="mapContainer"></div> <script type="text/javascript"> var map = new AMap.Map('mapContainer', { center: [116.397428, 39.90923], zoom: 13 }); var marker = new AMap.Marker({ position: [116.397428, 39.90923], title: '这是一个 marker 点', icon: 'https://webapi.amap.com/images/0.png' }); map.add(marker); </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值