在Vue中使用高德地图的时候,可以通过以下步骤给infowindow中的元素绑定点击事件:

  1. 在Vue的模板中定义infowindow的内容,并给需要绑定点击事件的元素添加一个唯一的id属性:
<template>
  <div>
    <amap-map :zoom="zoom" :center="center">
      <amap-marker :position="markerPosition" @click="openInfoWindow">
        <amap-info-window :position="markerPosition">
          <div>
            <p id="infoWindowContent">点击我触发事件</p>
          </div>
        </amap-info-window>
      </amap-marker>
    </amap-map>
  </div>
</template>
  1. 在Vue的script中,使用AMap.event.addListener方法给元素绑定点击事件:
<script>
import AMap from 'AMap';

export default {
  data() {
    return {
      zoom: 13,
      center: [116.397428, 39.90923],
      markerPosition: [116.397428, 39.90923],
      infoWindow: null
    };
  },
  mounted() {
    AMap.plugin('AMap.Autocomplete', () => {
      // 绑定事件
      const infoWindowContent = document.getElementById('infoWindowContent');
      AMap.event.addListener(infoWindowContent, 'click', () => {
        console.log('点击infowindow中的元素');
      });
    });
  },
  methods: {
    openInfoWindow() {
      // 打开infowindow
      const map = this.$refs.amapMap.map;
      this.infoWindow = new AMap.InfoWindow({
        content: '这是一个infowindow'
      });
      this.infoWindow.open(map, this.markerPosition);
    }
  }
};
</script>

在mounted生命周期中,通过AMap.plugin方法加载高德地图插件,并在回调函数中使用AMap.event.addListener方法给元素绑定点击事件。在这个例子中,我们给infowindow中的p元素添加了一个id属性,然后在监听函数中通过document.getElementById方法获取该元素,并给它绑定了一个click事件

vue 高德地图给infowindow中的元素绑定点击事件

原文地址: https://www.cveoy.top/t/topic/cj9s 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录