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

在项目中需要利用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)
}), // 景区图标spotIcon: new AMap.Icon({
  size: new AMap.Size(25, 25),    // 图标尺寸  image: process.env.VUE_APP_OSS_PREFIX + 'icon/spot2.svg',  // Icon的图像  imageSize: new AMap.Size(25, 25)
}), // 景区图标
2、根据当前所在城市，获取景区信息，生成自定义的景区图标。

changeCity(adcode) { //切换城市函数
  let map = this.amapManager.getMap()
  map.setCity(adcode) //根据省市县三级联选，切换城市所在区域 
  //标记辖区内的景区  let windows = []//window窗体  let self = this            //this重定向  this.infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) })
  listByCode(adcode).then(response => {  //查询本声调所有景区，不含景点
    if (response.code == 200) {
      let data = response.data      for (let i in data) {
        let id = parseFloat(data[i].id)
        let lng = parseFloat(data[i].lng)
        let lat = parseFloat(data[i].lat)
        //窗口缺省位置和空信息        windows.push({
          position: [lng, lat],    //信息窗口地址的定位    循环添加接口数据          //信息窗口的信息内容           循环添加接口数据          content:
            `<el-dialog title='景区名称' class="prompt">                      <div></div>                      <div></div>                      <div></div>                      <div></div>                      </el-dialog>`,          visible: false        })
       //经过反复测试，还是直接用AMap直接生成Marker，主要是可以在后面添加Index和ID便于参数传递
        let marker = new AMap.Marker({
          position: [lng, lat],          
          icon: this.scenicIcon,         //使用自定义的景区图标 
          map: map
        })
        //下边两个参数很重要，用vue-amap生成的对象这两个参数无法传递，直接用JS生成的AMap.Maker可以传递这两个参数
        marker.index = i  //marker序号，用于后续显示自定认的信息窗口
        marker.id = id    //景区ID号，用于后续区获取详细信息
      //下面这个方法很重要，用vue-amap的marker的events: click事件时，不能增加扩展数据
        marker.on('click', function(e) {
          //后台根据 ID获取景区数据         
          getScenic(e.target.id).then(response => {
            //构建窗口信息           
            if (response.code == 200) {
              let scenic = response.data              //显示点击窗体内容              
              self.windows[e.target.index].url = process.env.VUE_APP_OSS_PREFIX + scenic.url             
              self.windows[e.target.index].name = scenic.name              
              self.windows[e.target.index].content = `<el-row>                          <el-col :span="8">                            <el-card :body-style="{ padding: '0px' }">                                <img src="${process.env.VUE_APP_OSS_PREFIX + scenic.url}" width="200px"/>                                <div style="font-size: 14px;"><span>景区名称：${scenic.name}</span></div>                                <div style="font-size: 14px;"><span>景区级别：${scenic.level}</span></div>                            </el-card>                          </el-col>                        </el-row>`            } else {
              alert('景区信息获取失败！')
            }
          })
          //给信息窗体里的判断默认传false   默认不显示          
          self.windows.forEach(window => {
            window.visible = false          })
          //当前点击的圆点对应的信息窗体  为true  显示          
          self.window = self.windows[e.target.index]
          self.$nextTick(() => {
            self.window.visible = true          })
        })
      }
      this.windows = windows
      //this.markers = markers      console.log(windows)
    } else {
      console.log(response.msg)
    }
  })
}

三、信息窗口

增加信息窗口接收信息内容，高德官网是JavaScription编程 ，用content拼接html结果接受内容，拼接比较复杂，还是改为vue组件，通过数据传输接收数据方式好一些。

<el-amap-info-window  class="prompt"  v-if="window"  :model="window"  :position="window.position"  :visible="window.visible">    <el-row>      <el-col :span="8">       
  <img v-bind:src="window.url" width="200px"/>        
    <div style="font-size: 14px; width: 200px"><span>景区名称：<el-input v-model="window.name"></el-input></span></div>        
    <div style="font-size: 14px; width: 200px"><span>景区级别：<el-input v-model="window.level"></el-input></span></div>     
</el-col>    
</el-row>
</el-amap-info-window>

四、显示成果

最终的成果是，自定义景区图片，点击景区图标，显示自定义信息。

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