Javascript Vue:单击其中一个窗口时，所有GmapInfoWindows都将打开

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

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

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

这是我的密码：

<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>

事件：{{m.Incident}}

时间：{m.Time}
从“vue2谷歌地图”导入{gmapApi}；
从“./main”导入{db}；
导出默认值{
名称：“MapComponent”，
数据（）{
返回{
标记集合：[]，
标记：[]，
信息标记：空，
窗口打开：错误，
};
},
firestore（）{
返回{markers:db.collection（“Reports”）}；
},
方法：{
openWindow（）{
如果（此窗口打开）{
this.window_open=false；
}否则{
this.window_open=true；
}
},
},
安装的（）{
//此时，子GmapMap已装入，但
//其映射尚未初始化。
//因此，我们需要编写mapRef.$mapromise.then（（）=>…）
此.$refs.mapRef.$mapromise.then（（map）=>{
panTo地图（{lat:10，lng:10}）；
});
},
计算：{
谷歌：GMAPPI，
},
};

我见过一些人使用GmapInfoWindows的代码，但他们每个人都只有一个，没有表示出任何问题。我试过他们的代码，我发现了这个问题。我也试过很多其他的方法来处理胸部

---

有什么解决办法吗？

问题是所有的

GmapInfoWindow

都附加到一个标志条件：

window\u open

因此，如果您将

window\u open

更改为

true

，则所有这些选项都会显示出来

解决这一问题的一种方法是：

将

openWindow

方法修改为：

将您的

opened

道具从

：opened=“window\u open”

更改为

：opened=“window\u open===index”

使用

openWindow（index）

调用您的

openWindow

方法

我建议将名称

openWindow

更改为

toggleWindow

，因为您不仅要显示它，还要隐藏它

---

这有帮助。我刚刚添加了这样一个选项，当报表出现时，它们会附加一个名为

window\u open

的bool，默认为false，当它们被单击时，它只会显示所选的标记。@Boopiester我认为后端不应该参与前端显示的内容。您在数据库中保留了完全不必要的附加信息。但无论如何，这只是一个建议，我用了你编辑过的建议，效果很好。现在它也不会把数据库弄得乱七八糟。谢谢

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