开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第32天，点击查看活动详情

写在前面

本篇文章中介绍高德地图给点标记添加点击事件并自定义传参。

下面要实现的一个功能是：点击地图上某个点标记，该点标记移到地图中心位置，同时调用一个方法，将自定义的参数传入该方法。

添加点击事件并移动点标记位置

想要实现上述功能的前提是：已经加载了地图，并且地图上添加了点标记，这篇文章就不多说了，如何加载地图可以参考我的文章：高德地图使用自定义地图的过程和问题解决，如何添加点标记可以参考我的文章：在高德地图上添加自定义图标以及偏移量的用处，加载完地图并且添加了点标记后，我们就可以开始给点标记添加点击事件，添加方式也很简单，是我们熟悉的ele.on('事件')，事件可以是click鼠标单击事件、dblclick鼠标双击事件、mouseover鼠标移入事件、mouseout鼠标移出事件等等，代码如下：

        Marker1.on('click', (e) => {
          console.log('e', e)
        })

接下来是将点标记移到地图中心位置：

        Marker1.on('click', (e) => {
          this.map.setCenter([e.lnglat.lng, e.lnglat.lat]);
        })

自定义传参

设置自定义传参有两种方式，第一种是使用extData参数，第二种是使用setExtData方法：

        // 第一种
        let Marker1 = new AMap.Marker({
          position: new AMap.LngLat(113.428702, 32.379164),
          icon: Icon,
          offset: new AMap.Pixel(-38, -122),
          extData: { id: 1 }
        });
        // 第二种
        let Marker1 = new AMap.Marker({
          position: new AMap.LngLat(113.428702, 32.379164),
          icon: Icon,
          offset: new AMap.Pixel(-38, -122),
        });
        Marker1.setExtData({ id: 1 })

获得自定义传参的方法和代码如下：

        Marker1.getExtData()

完整代码如下：

    initMap() {
      AMapLoader.load({
        key: "创建的Key",
        version: "2.0",
        plugins: [],
      }).then((AMap) => {
        this.map = new AMap.Map("container", {
          viewMode: "3D",
          zoom: 13,
          center: [113.428702, 32.379164],
        });

        let Icon = new AMap.Icon({
          size: new AMap.Size(75, 122), // 图标尺寸
          image: require('../../../assets/imgs/WaterPlant/map_icon.png'), // 图标的取图地址
          imageSize: new AMap.Size(75, 122), // 图标所用图片大小
        });

        let Marker1 = new AMap.Marker({
          position: new AMap.LngLat(113.428702, 32.379164),
          icon: Icon,
          offset: new AMap.Pixel(-38, -122),
          extData: { id: 1 }
        });

        Marker1.on('click', (e) => {
          this.map.setCenter([e.lnglat.lng, e.lnglat.lat]);
          this.setMarkerData(Marker1.getExtData())
        })

        this.map.add([Marker1]);
      }).catch(e => {
      })
    },

写在最后

以上就是在高德地图中给点标记添加点击事件并自定义传参的全部代码和说明