Question

我有一个Vue应用程序，可以使用vue2-google-map显示google地图。但由于缺少vuejs素材参考源，我无法在自己的标记上实现maps.infowindow。

这是我的标记模板代码：

      <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 });
  });
},

我指的是有关信息窗口的Google地图文档，但不知道如何在此代码中实现它。有人可以教我如何在vuejs地图中使用此信息窗口。

Answer 1

在这里，我有一个来自我的项目的工作示例。经纬度的数据来自veux商店。所以你必须修改这些

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

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

Vue谷歌地图信息窗口

1 个答案: