vue利用高德地图自定义信息窗体内实现信息交互

spMap组件中的方法
addInfoWindow (extData) {
      this.infoWindowIntance = new AMap.InfoWindow({
        offset: extData.offset.length === 0 ? new AMap.Pixel(0, -50) : new AMap.Pixel(extData.offset[0], extData.offset[1]), // 设置偏移量
        content: extData.content,
        closeWhenClickMap: false, // 控制是否在鼠标点击地图后关闭信息窗体，默认false，鼠标点击地图后不关闭信息窗体
        autoMove: false // 是否自动调整窗体到视野内（当信息窗体超出视野范围时，通过该属性设置是否自动平移地图，使信息窗体完全显示,默认true）
      })
      this.map.panTo(extData.position)
      this.infoWindowIntance.open(this.map, extData.position)
    },
父组件
<SpAMap v-show="locationShow" ref="map" :autoInit="false" @search="search" @makerClick="clickMakers"/>
<!-- 将content写成一个子组件 -->
        <infoWindow ref="infoWindow"
        :popMark="popMark"
        @clickshowVideo="showVideo"
        v-show="showPop"
        ></infoWindow>
showVideo (videoUrl, name) {
      this.show = true
      // this.videoUrl = videoUrl
      this.stationHighName = name
    },
clickMakers (marker) {
      if (marker.attributes.index) {
        this.showPop = true
        let content, position
        const MARK = this.stationList[marker.attributes.index - 1]
        this.popMark = { ...MARK }
        // content = `<div><p>收费站:${MARK.tollName ? MARK.tollName : '-'}</p>
        // <p>高速:${MARK.highwayName ? MARK.highwayName : '-'}</p>
        // <input type="button" value="视频" οnclick="showVideo()"/></div>`
        // console.log(this.$refs.infoWindow.$el)
        content = this.$refs.infoWindow.$el
        position = [MARK.lng, MARK.lat]
        this.$refs.map.addInfoWindow({
          position,
          content,
          offset: [0, -50]
        })
      }
    },

  
infoWindow子组件
<template>
  <div>
      <p>收费站:{{popMark.tollName ? popMark.tollName : '-'}}</p>
       <p>高速:{{popMark.highwayName ? popMark.highwayName : '-'}}</p>
      <input class="input-button" type="button" value="视频" @click="showVideo(popMark.hls, popMark.tollName)"/>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
    popMark: {
      type: Object,
      default: () => {}
    }
  },
  data () {
  },
  methods: {
    showVideo (pophls, poptollName) {
      // console.log(pophls,poptollName)
      this.$emit('clickshowVideo', pophls, poptollName)
    }
  }
}
</script>
<style lang="stylus" scoped>
p
  margin-bottom .1rem
>>> input.input-button
      margin-top .1rem
      width 1rem
      transform translateX(.8rem)
</style>