在项目中需要利用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/sceni