我正在建立一个网站，您可以通过在地图上放置标记，然后将带有所有事件的标记显示在不同的地图上，以报告犯罪/事件。
每个标记都有一个信息窗口，显示事件及其报告的时间。
我遇到的问题是，当我单击一个标记以打开其信息窗口时，所有信息窗口都会打开。
这是我的代码：
<template>
<div>
<GmapMap
ref="mapRef"
:center="{ lat: 10, lng: 10 }"
:zoom="11"
style="width: 500px; height: 300px"
>
<GmapMarker
:key="index"
v-for="(m, index) in this.markers"
:position="m.position"
:clickable="true"
@click="openWindow"
>
<GmapInfoWindow
:opened="window_open"
:position="m.position"
>
Incident: {{ m.incident }}<br />
Time: {{ m.time }}
</GmapInfoWindow>
</GmapMarker>
</GmapMap>
</div>
</template>
<script>
import { gmapApi } from "vue2-google-maps";
import { db } from "../main";
export default {
name: "MapComponent",
data() {
return {
markerCollection: [],
markers: [],
info_marker: null,
window_open: false,
};
},
firestore() {
return { markers: db.collection("Reports") };
},
methods: {
openWindow() {
if (this.window_open) {
this.window_open = false;
} else {
this.window_open = true;
}
},
},
mounted() {
// At this point, the child GmapMap has been mounted, but
// its map has not been initialized.
// Therefore we need to write mapRef.$mapPromise.then(() => ...)
this.$refs.mapRef.$mapPromise.then((map) => {
map.panTo({ lat: 10, lng: 10 });
});
},
computed: {
google: gmapApi,
},
};
</script>
我见过一些使用GmapInfoWindows的人的代码，但是他们每个人只有一个，并且没有表达任何问题。而且我尝试了他们的代码，但出现了这个问题。我还尝试了许多其他方法。
有什么解决办法吗？
问题是您所有的人GmapInfoWindow都附加了一个标志条件：window_open。
因此，如果更改window_open为true，则所有这些都将显示。
解决该问题的一种方法是：
openWindow方法为：openWindow(index) {
this.window_open = this.window_open === index ? null : index;
},
opened道具从更改:opened="window_open"为:opened="window_open === index"openWindow方法openWindow(index)。openWindow，toggleWindow因为您不仅要显示它，还要隐藏它。本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句