Javascript Vue谷歌地图信息窗口自定义按钮不工作

嘿，Vuers

我正在使用vue2谷歌地图及其所有的荣耀，到目前为止，除了信息窗口中的自定义按钮之外，我已经管理了很多。到目前为止，我可以点击一个标记，它显示了相关的自定义信息窗口与正确的信息。我现在唯一缺少的就是让这些按钮正常工作。例如，close按钮：我可以单击它，它会与组件方法对话，但不会关闭它。关闭按钮的工作原理与选择标记相同，但同时不是？这些值会更新为false，但不会在地图中更新，而我选择了一个标记，它会像符咒一样更新。因此，我被困在这里，相当困惑，任何帮助，想法和提示都非常感谢

以下是我的代码供参考：

模板

组件脚本

---

}

由于信息窗口的外观由位置[索引]决定。infoBoxOpen标准的关闭处理程序@closeclick也需要实现，如下所示：

 <gmap-info-window
        :opened="location.infoBoxOpen"
        @closeclick="location.infoBoxOpen=false">
    ...
 </gmap-info-window>  

我还建议修改信息窗口的创建方式。不要为每个标记创建信息窗口，而是只创建信息窗口的单个实例。除了性能优势外，管理信息窗口状态将更加清晰，例如：

<gmap-map :center="center" :zoom="zoom" ref="map">
  <gmap-marker
    :key="index"
    v-for="(location,index) in locations"
    :position="{lat: location.lat,lng:location.lng}"
    :clickable="true"
    @click="openInfoWindow(location)"
  />
  <gmap-info-window v-if="selectedLocation !== null" :position="{lat: selectedLocation.lat,lng:selectedLocation.lng}" :opened="infoBoxOpen" @closeclick="closeInfoWindow()">
      <div class="infoWindow">
        <h2 id="infoWindow-location">{{ selectedLocation.name }}</h2>
        <button @click="closeInfoWindow()">Close</button>
      </div>
    </gmap-info-window>
</gmap-map>

export default {
  data: () => ({
    zoom: 5,
    center: { lat: 59.339025, lng: 18.065818 },
    selectedLocation: null,
    infoBoxOpen: false,
    locations: [
      {
        Id: 1,
        name: "Oslo",
        lat: 59.923043,
        lng: 10.752839
      },
      {
        Id: 2,
        name: "Stockholm",
        lat: 59.339025,
        lng: 18.065818
      },
      {
        Id: 3,
        name: "Copenhagen",
        lat: 55.675507,
        lng: 12.574227
      },
      {
        Id: 4,
        name: "Berlin",
        lat: 52.521248,
        lng: 13.399038
      },
      {
        Id: 5,
        name: "Paris",
        lat: 48.856127,
        lng: 2.346525
      }
    ]
  }),
  methods: {
    openInfoWindow(location) {
      this.selectedLocation = location
      this.infoBoxOpen = true;
    },
    closeInfoWindow() {
      this.infoBoxOpen = false;
    }
  }
};    

这演示了如何管理每个标记的信息窗口

 <gmap-info-window
        :opened="location.infoBoxOpen"
        @closeclick="location.infoBoxOpen=false">
    ...
 </gmap-info-window>  

<gmap-map :center="center" :zoom="zoom" ref="map">
  <gmap-marker
    :key="index"
    v-for="(location,index) in locations"
    :position="{lat: location.lat,lng:location.lng}"
    :clickable="true"
    @click="openInfoWindow(location)"
  />
  <gmap-info-window v-if="selectedLocation !== null" :position="{lat: selectedLocation.lat,lng:selectedLocation.lng}" :opened="infoBoxOpen" @closeclick="closeInfoWindow()">
      <div class="infoWindow">
        <h2 id="infoWindow-location">{{ selectedLocation.name }}</h2>
        <button @click="closeInfoWindow()">Close</button>
      </div>
    </gmap-info-window>
</gmap-map>

export default {
  data: () => ({
    zoom: 5,
    center: { lat: 59.339025, lng: 18.065818 },
    selectedLocation: null,
    infoBoxOpen: false,
    locations: [
      {
        Id: 1,
        name: "Oslo",
        lat: 59.923043,
        lng: 10.752839
      },
      {
        Id: 2,
        name: "Stockholm",
        lat: 59.339025,
        lng: 18.065818
      },
      {
        Id: 3,
        name: "Copenhagen",
        lat: 55.675507,
        lng: 12.574227
      },
      {
        Id: 4,
        name: "Berlin",
        lat: 52.521248,
        lng: 13.399038
      },
      {
        Id: 5,
        name: "Paris",
        lat: 48.856127,
        lng: 2.346525
      }
    ]
  }),
  methods: {
    openInfoWindow(location) {
      this.selectedLocation = location
      this.infoBoxOpen = true;
    },
    closeInfoWindow() {
      this.infoBoxOpen = false;
    }
  }
};