vue 高德地图给infowindow中的元素绑定点击事件
在Vue中使用高德地图的时候,可以通过以下步骤给infowindow中的元素绑定点击事件:
- 在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>
- 在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事件
原文地址: https://www.cveoy.top/t/topic/cj9s 著作权归作者所有。请勿转载和采集!