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

子组件infoWindow
<template>
  <div>
      <input class="input-button" type="button" @click="showInfo(info)"/>
  </div>
</template>

<script>
export default {
  name: '',
  props: {
  	info: [String, Number]
  },
  data () {
  },
  methods: {
    showInfo (info) {
      // console.log(pophls,poptollName)
      this.$emit('clickshow', info)
    }
  }
}
</script>
<style scoped>
</style>

父组件
<infoWindow ref="infoWindow"
 @clickshow="showInfo"
 :info="info"
 ></infoWindow>
 import infoWindow from './infoWindow'
 找到创建的infowindow实例将dom传入content
     // 创建一个自定义内容的 infowindow 实例
    var infoWindow = new AMap.InfoWindow({
        position: lnglat,
        offset: new AMap.Pixel(0, -35),
        content: this.$refs.infoWindow.$el
    });

    infoWindow.open(map);
  想要在父组件中调用的方法
 showInfo(info){
 	console.log(info)
 }

你可能感兴趣的:(总结,vue)