我在Vue项目中实现了Google Maps API,本来我会使用像vue2-google-maps这样的库,但我的一个同学告诉我最好使用原始的JavaScript API,因为我们可能会有很多标记,并且他的经验表明,在存在太多标记时库确实会遇到困难。
所以现在我创建了这个方法来使用Vue在页面上呈现Google地图 - Map:
infoWindow包含一个超链接(
我考虑的解决方案是在超链接元素中包含一个唯一的ID,然后直接添加一个事件监听器,就像这样:
所以现在我创建了这个方法来使用Vue在页面上呈现Google地图 - Map:
methods: {
async generateMap() {
// Start and await Google script
const google = await gmapsInit();
// Create Google Map object
this.map = new google.maps.Map(this.$el, {
zoom: 7,
center: new google.maps.LatLng(52.100886023504415, 5.6446197918489)
});
// Standplaats is an object containg a name, lat, lon and slug
this.standplaatsen.forEach(standplaats => {
const position = {
lat: standplaats.location.latitude,
lng: standplaats.location.longitude
};
// Create the marker and add to map
const marker = new google.maps.Marker({
position: position,
title: standplaats.name,
map: this.map,
});
marker.addListener("click", () => {
const infoWindow = new google.maps.InfoWindow({
content:
`<div>` +
`<h4>${standplaats.name}</h4>` +
`${standplaats.location.street}<br/>` +
`${standplaats.location.zipcode} ${standplaats.location.location}<br/>` +
`<hr/>` +
`<a>${standplaats.posts} opdrachten beschikbaar</a>` +
`</div>`
});
infoWindow.open(this.map, marker);
});
});
},
}
infoWindow包含一个超链接(
<a>${standplaats.posts} opdrachten beschikbaar</a>
),当单击此超链接时,我想触发一个Vue emit
事件。由于这个HTML是通过Google API渲染的,所以我不能直接包含一个@click
事件。我考虑的解决方案是在超链接元素中包含一个唯一的ID,然后直接添加一个事件监听器,就像这样:
marker.addListener("click", () => {
const infoWindow = new google.maps.InfoWindow({
content:
`<div>` +
`<h4>${standplaats.name}</h4>` +
`${standplaats.location.street}<br/>` +
`${standplaats.location.zipcode} ${standplaats.location.location}<br/>` +
`<hr/>` +
`<a id="${standplaats.slug}">${standplaats.posts} opdrachten beschikbaar</a>` +
`</div>`
});
infoWindow.open(this.map, marker);
document.getElementById(`${standplaats.slug}`).addEventListener("click", () => {
console.log('I\'ve been clicked');
});
});
但是这种方法不起作用,因为谷歌API需要一段时间来渲染元素,我唯一解决的办法是在一秒钟的超时内包装事件监听器,但现在整个过程开始感到非常糟糕...
有什么建议处理这个问题吗?