Vue3集成高德地图API 2.0：自定义点击事件详解

本文将介绍如何在Vue3项目中，利用高德地图API 2.0在initMap()方法内自定义并触发点击事件。

首先，在load()方法加载地图后，使用on()方法监听自定义事件：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

amaploader.load({
  // ...其他配置
})
  .then((amap) => {
    const map = new amap.Map('container', {
      // ...地图配置
    });
    map.on('myCustomClick', (e) => {
      console.log('自定义点击事件触发', e);
      //在此处添加你的自定义事件处理逻辑
    });
  });

然后，在需要触发自定义点击事件的地方，调用fire()方法：

立即学习“前端免费学习笔记（深入）”；

map.fire('myCustomClick', {  //事件名称
  // ...传递给事件处理函数的数据
});

通过以上步骤，即可在initMap()方法中成功定义和触发自定义点击事件，实现地图交互功能的灵活定制。