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

最新推荐文章于 2024-07-04 08:52:33 发布

KAGHQ

最新推荐文章于 2024-07-04 08:52:33 发布

阅读量1.3k

点赞数 1

分类专栏：总结文章标签： vue

本文链接：https://blog.csdn.net/LRQQHM/article/details/117047438

版权

总结专栏收录该内容

51 篇文章 1 订阅

订阅专栏

子组件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)
 }