VUE集成高德地图自定义Marker图标及事件

最新推荐文章于 2025-06-17 14:05:30 发布

海盐老伍

最新推荐文章于 2025-06-17 14:05:30 发布

阅读量1.1w

点赞数 4

CC 4.0 BY-SA版权

文章标签： java vue javascript

本文链接：https://blog.youkuaiyun.com/wujize/article/details/105924710

本文介绍了在Vue项目中集成高德地图并实现自定义Marker图标及点击事件的详细过程。遇到的问题包括图标路径设置、多个Marker的管理和信息窗口的显示。最终实现了根据业务对象显示不同图标，点击Marker弹出信息窗口的功能。

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

在项目中需要利用Marker对地图位置进行自定义标记，想使用自己的图标，并在点击Marker时需要弹出框显示对象信息，并且做后续自定义的操作。

高德地图上自定义单位Marker有介绍，但自定义多个使用的方法不是一样，并且直接用vue的el组件生成Marker后续操作时多个Marker传递marker的序号有问题，导致信息窗口显示不正常。这个坑到处找资料，花了整整2天才全部搞定。

一、需求

根据用户自已定信的对象，在地图上显示，对象是具有地图属性的业务对象，为了区分业务对象，不同的业务对象在地图上想显示不同的Marker图标。点南击图标Marker弹出窗口，进一步显示更多属性信息，和相应的操作。

二、准备

定义了一个地衅组件，增加了Marker标记，弹出信息窗两个子组件。Markers组由于不能传递Marker的序号，该序号用于决定哪个信息窗显示不成功，放弃了此方法，直接在程序中生成marker

<el-amap class="amap-box"
             :amap-manager="amapManager"
             :vid="'amap-vue'"
             :zoom="zoom"
             :plugin="plugin"
             :center="center"
             :events="events"
    >
      <!-- 景区标记 -->
      <!--      <el-amap-marker v-for="(marker) in markers"
                            :position="marker.position"
                            :index="marker.index"
                            :icon="scenicIcon"
                            :events="marker.events">
            </el-amap-marker>-->

    </el-amap>

三、生成多个景区标记（Markers）

1、自定义图标：

图标放在阿里云的OSS上的，起初上放在程序的assets目录，由于是在高德地图中嵌入使用，搞了半天都不成功，看高德地图的官方资料，也是使用全名称路径，没办法，改到OSS上用全路径搞成功了。此处定义了景区和景点两图标备后面使用

scenicIcon: new AMap.Icon({
   
   
  size: new AMap.Size(35, 35),    // 图标尺寸  image: process.env.VUE_APP_OSS_PREFIX + 'icon/scenic2.svg',  // Icon的图像  imageSize: new AMap.Size(35, 35)
}),