Vue：单击一个时打开所有GmapInfoWindows

Question

I am making a website where you can report crimes/incidents by placing a marker on a map and then the markers with all the incidents show on a different map.

Every marker has an info window that shows the incident and the time it was reported.

The problem I am having is that when I click one of the markers to open its info window, all of the info windows open.

Here is my code:

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

I've seen some people's code that use GmapInfoWindows but they all just have one each, and didn't express any problems with it. And I have tried their code and I get this issue. I have also tried a lot of other things with the bools.

Any solution for this?

Answer 1

The problem is that all of your GmapInfoWindow are attached to one flag condition: window_open .

So if you change window_open to true , all of them gets to show.

One way to fix that would be:

1. Modify openWindow method to:

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

2. Change you opened prop from :opened="window_open" to :opened="window_open === index"
3. Call your openWindow method with openWindow(index) .
4. I am suggesting changing the name openWindow to toggleWindow since you are not only showing it but hiding too.