让 Google 地图与 Vue.js 一起工作

Question

我正在尝试让 Google 地图与 Vue.js 一起使用。

这是我正在使用的 HTML。假设 v-if="activeStep === 1" 可以正常工作并正确显示预期的 div：

<div id="map-container" v-if="activeStep === 1">
  <div id='location-map'></div>
</div>
...
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY"></script>

id 样式：

#location-map { height: 250px; }
#map-container { padding: 15px 0; }

和我的 Vue 绑定：

if(document.getElementById("map-container")) {
  const mapVue = new Vue({
    el: '#map-container',
    data: {
      activeStep: 1,
      defaultLatLng: {lat: 37.5665, lng: 126.9780}
    },
    mounted: function() {
      var map = new google.maps.Map(document.getElementById('location-map'), {
        zoom: 15,
        center: this.defaultLatLng,
        scrollwheel: false,
        disableDoubleClickZoom: true,
        panControl: false,
        streetViewControl: false,
        draggable: false
      });
      var marker = new google.maps.Marker({
        position: this.defaultLatLng,
        map: map
      });
    }
  })
}

但是地图没有显示。我在这里做错了吗？

我能想到两个问题：

1. Google 地图文档使用&callback=initMap 调用脚本并将函数命名为initMap，而我没有这样做。相反，我让函数调用发生在 vue 的 mount 指令中。不知道如何从 vue 方法调用 initMap 。另外，我没有在脚本上使用async defer（如<script async defer src="https://maps.googleapis.com/maps/api/js?key=MYKEY"></script>），因为我在某处读到这不是必需的。

2. v-if 实际上会移除元素并根据activeStep 显示它，所以可能在生成该部分 DOM 时 map 函数没有重新初始化？

   李>

任何帮助将不胜感激。提前致谢！

Answer 1

如果您不使用带有回调的异步延迟，那么您的 Javascript 的顺序将很重要。

如果你对其他脚本使用 async/defer 也很重要。我建议使用带有回调的异步延迟，以确保 Google 地图已正确加载，因此您不必担心顺序。

如果您想将回调连接到 Vue，您可以执行以下操作：

让你的回调指向一个全局的 Vue 实例：

&callback=app.createMap

像这样创建一个全局 Vue 实例：

window.app = new Vue({});

现在您可以在主 Vue 实例上简单地使用 createMap 方法来初始化您的地图。

当然，如果您没有立即显示地图容器并且稍后显示它，则必须在地图上调用 resize 事件以确保它重新渲染。

Answer 2

我很确定您必须设置默认高度才能使其呈现。

Answer 3

我通过创建自定义指令并将初始化脚本绑定到 inserted 挂钩来解决它：

Vue.directive('map', {
  // When the bound element is inserted into the DOM:
  inserted: function (el, binding) {
    var map = new google.maps.Map(document.getElementById('location-map'), {
      zoom: 15,
      draggable: false,
      panControl: false,
      scrollwheel: false,
      streetViewControl: false,
      center: binding.value,
      disableDoubleClickZoom: true
    });
    var marker = new google.maps.Marker({
      map: map,
      position: binding.value
    });
  }
})

模板：

<strong>Map</strong><br>
<div id="map-container" v-map="{lat: coords_here, lng: coords_here}">
  <div id='location-map'></div>
</div>

我认为问题在于 v-if 创建并破坏了实际的 HTML，因此元素没有被重新初始化或类似的东西。这似乎可以解决问题。

Answer 4

我知道这是一个老问题，但如果有人遇到同样的问题......请使用 v-show 而不是 v-if。