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

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

一、需求

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

二、准备

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

三、生成多个景区标记(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:            ``,          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 = `

` } 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组件，通过数据传输接收数据方式好一些。

四、显示成果

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