Vue:当单击其中一个时，所有GmapInfoWindows都打开

Question

我正在制作一个网站，您可以通过在地图上放置标记来报告犯罪/事件，然后在不同的地图上显示所有事件的标记。

每个标记都有一个信息窗口，显示事件和报告时间。

我遇到的问题是，当我点击其中一个标记打开其信息窗口时，所有的信息窗口都打开了。

下面是我的代码:

<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，但他们都只有一个，并没有表达任何问题。我试过他们的代码，遇到了这个问题。我还尝试了很多其他的方法。

有解决方案吗?

Answer 1

问题是所有的GmapInfoWindow都附加到一个标志条件:window_open。

如果你把window_open改成true，所有的都能显示。

解决这个问题的一种方法是:

1. 修改openWindow方法为:

openWindow(index) {
this.window_open = this.window_open === index ? null : index;
},

2. 将opened道具从:opened="window_open"更改为:opened="window_open === index"
3. 用openWindow(index)调用openWindow方法
4. 我建议将名称openWindow更改为toggleWindow，因为您不仅显示它，而且隐藏了它。