Vue.js Vue谷歌地图信息窗口

我有一个vue应用程序，通过使用vue2谷歌地图显示谷歌地图。 但我在将maps.infowindow实现到我的标记时遇到了一个问题，因为缺少vuejs stuff参考源

这是我的标记模板代码：

      <GmapMap ref="mapRef"
        :center="{lat: 3.974341, lng: 102.438057}"
        :zoom="7"
        class="gmap"
      >
         <GmapMarker
          :key="index"
          v-for="(location, index) in markers"
          :position="location"
          :draggable="true"
          icon="https://img.icons8.com/color/48/000000/map-pin.png"
         />
</GmapMap>

以下是脚本：

export default {
  data() {
    return {
      markers: [],
      infowindow: [],
    };
  },
async setMarker() {
  const { data } = await LocationRepository.getData(); //get data from api
  this.tempLatLong = data; 
  this.$refs.mapRef.$mapPromise.then((map) => {
    this.markers = [];
    this.infowindow = [];
    const bounds = new this.google.maps.LatLngBounds();
    for (let i = 0; i < this.tempLatLong.length; i += 1) {
      const lati = parseFloat(this.tempLatLong[i].latitude);
      const long = parseFloat(this.tempLatLong[i].longitude);
      const location = new this.google.maps.LatLng(lati, long);
      bounds.extend(location);

      const marker = 
        {
          lat: lati, lng: long
        }
      this.markers.push(marker);
      //this is where the problem occur.
     const content = '<div id="content">'+'<p>test</p>' +'</div>'
      this.infowindow.push(content)
    }
    map.fitBounds(bounds);
    map.panTo({ lat: 3.974341, lng: 102.438057 });
  });
},

导出默认值{
数据（）{
返回{
标记：[]，
信息窗口：[]，
};
},
异步setMarker（）{
const{data}=await LocationRepository.getData（）；//从api获取数据
this.tempLatLong=数据；
此.$refs.mapRef.$mapromise.then（（map）=>{
this.markers=[]；
this.infowindow=[]；
const bounds=newthis.google.maps.LatLngBounds（）；
for（设i=0；i

---

我参考了有关infowindows的google地图文档，但不知道如何将其实现到这段代码中。有人能教我如何在vuejs地图中使用此infowindow吗。

这里我有一个来自我的一个项目的工作示例。lat an lng的数据来自veux store。因此，您必须修改这些数据

<template>
<GmapMap
    :center="getCenterPosition"
    :zoom="getZoomLevel"
    map-type-id="roadmap"
    style="width: 100%; height: 600px"
>
    <GmapMarker
        v-for="(m, index) in loadedDealers"
        :key="index"
        :position="{ lat: m.lat, lng: m.lng }"
        :clickable="true"
        :draggable="false"
        @click="openInfoWindowTemplate(index)"
        :icon="{ url: require('./test.png') }"
    />
    <gmap-info-window
        :options="{
          maxWidth: 300,
          pixelOffset: { width: 0, height: -35 }
        }"
        :position="infoWindow.position"
        :opened="infoWindow.open"
        @closeclick="infoWindow.open=false">
        <div v-html="infoWindow.template"></div>
    </gmap-info-window>
</GmapMap>

从“vuex”导入{mapGetters}
导出默认值{
数据（）{
返回{
信息窗口：{
位置：{lat:0，lng:0}，
开：错，
模板：“”
}
}
},
计算：{
…地图绘制者([
“getDealers”，
“getCenterPosition”，
“getZoomLevel”，
]),
loadedDealers（）{
把这个还给我
}
},
方法：{
openInfoWindowTemplate（索引）{
const{lat，lng，name，street，zip，city}=this.loadedDealers[index]
this.infoWindow.position={lat:lat，lng:lng}
this.infoWindow.template=`${name}
${street}
${zip}${city}
`
this.infoWindow.open=true
},
}
}

---

请出示您的完整图片。是否已将标记包装好？我已编辑并添加包装？是否有效？信息窗口部分不太有效。它非常有效，我需要更改一些代码以匹配我的数据。

<script>
import { mapGetters } from 'vuex'

export default {
    data() {
      return {
        infoWindow: {
          position: {lat: 0, lng: 0},
          open: false,
          template: ''
        }
      }
    },
    computed: {
        ...mapGetters([
            'getDealers',
            'getCenterPosition',
            'getZoomLevel',
        ]),
        loadedDealers() {
            return this.getDealers
        }
    },
    methods: {
        openInfoWindowTemplate(index) {
            const { lat, lng, name, street, zip, city } = this.loadedDealers[index]
            this.infoWindow.position = { lat: lat, lng: lng }
            this.infoWindow.template = `<b>${name}</b><br>${street}<br>${zip} ${city}<br>`
            this.infoWindow.open = true
        },
    }
}