高德地图两点之间连成一条直线 点击线可以出现图片的弹窗

这个是图片的html

   <el-image

      :initial-index="0"

      :src="wdList[0]"

      :preview-src-list="wdList"

      ref="wdDom"

    />

这是data里面的变量 

 wdList: [],

js代码

  async weidong () {

      // 清除上一个地图点位

      this.map.clearMap()

      // 请求接口

      let res = await selectDataMicorListDp()

      // 遍历后端传过来的接口

      res.data.forEach((x, i) => {

        // 判断可以不写

        if (x.se && x.sn && x.ee && x.en !== null) {

          // 创建线的样式跟位置

          let path = [[x.se, x.sn], [x.ee, x.en]]

          let polyline = new AMap.Polyline({

            path: path,

            strokeColor: '#ff1238',

            strokeWeight: 6,

            strokeOpacity: 0.9,

            zIndex: 50,

            bubble: true,

          })

          // 创建起点图片跟位置

          const m1 = new AMap.Marker({

            offset: new AMap.Pixel(-30, -30), // 弹窗的位置偏移

            position: new AMap.LngLat(x.se, x.sn),

            icon: new AMap.Icon({

              image: start,

              size: new AMap.Size(38, 60),  // 图标大小，根据实际需要调整

            })

          })

          // 创建终点图片位置

          const m2 = new AMap.Marker({

            offset: new AMap.Pixel(-25, -30), // 弹窗的位置偏移

            position: new AMap.LngLat(x.ee, x.en),

            icon: new AMap.Icon({

              image: end,

              size: new AMap.Size(38, 60),  // 图标大小，根据实际需要调整

            })

          })

          // 然后添加

          this.map.add([m1, m2])

          const that = this

          // 这个是给地图点位添加点击事件

          polyline.on('click', (e) => {

            // 这个是点击两点中间的线 可以浏览的弹窗

            this.wdList = x.photo.split(',')

            this.wdList.forEach((x, index) => {

              this.wdList[index] = httpEvery + x

            })

            this.$nextTick(() => {

              const content = this.$refs.wdDom.$el

              const infoWindow = new AMap.InfoWindow({

                content: content, // 弹窗的内容

                size: new AMap.Size(200, 100), // 弹窗大小

                offset: new AMap.Pixel(0, -30), // 弹窗的位置偏移

              })

              infoWindow.open(that.map, m1.getPosition())

            })

          })

          that.map.add([polyline])

          that.map.setFitView()

        }

      })

    },