javascript - 将 KMZ 图层导入谷歌地图 - Vue 2

Question

使用vue谷歌地图包:https://github.com/xkjyeah/vue-google-maps

在 mounted() 中，我尝试设置图层:

mounted() {
  this.$refs.gmap.$mapPromise.then((map) => {
    let options = {
      url: 'https://beeline.kg/ru/binaries/content/assets/kmz-files/3g-v2.kmz'
    }
    let kml = new google.maps.KmlLayer(options)
    kml.setMap(this.$refs.gmap)
  })
},

但是我进入控制台:“InvalidValueError:setMap:不是 Map 的实例”

this.$refs.gmap 是对 google map 组件的引用:

<GmapMap
  ref="gmap"
  :center="{lat: lat, lng: lng}"
  :zoom="5"
  map-type-id="roadmap"
  style="width: 100%; height: 500px"
  :options="{
    mapTypeControl: false
  }"
>
</GmapMap>

我猜问题就在这里:

让 kml = new google.maps.KmlLayer(options)

使用此包时如何正确调用谷歌地图的新实例？

Answer 1

其实这并没有那么难。太神奇了，没有人不知道如何做到这一点。

mounted() {
  this.$refs.gmap.$mapPromise.then((map) => {
    let options = {
      map: map,
      url: `https://example.com/filename.kmz?dummy=` + (new Date()).getTime()
    }
    let kml = new google.maps.KmlLayer(options)
  })
}

虚拟参数是为了避免谷歌地图缓存。