时间戳

首页 > 解决方案 > 将 KMZ 图层导入谷歌地图 - Vue 2

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

问题描述

使用 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: not an instance of Map”

this.$refs.gmap是对谷歌地图组件的引用：

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

我猜问题出在这里：

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

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

标签： javascriptgoogle-mapsvue.js

解决方案

其实没那么难。太神奇了，没有人不知道该怎么做。

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

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

推荐阅读