让谷歌地图与 Vue.js 一起工作 [英] Getting Google Maps to work with Vue.js

问题描述

我正在尝试使用 Vue.js 使用 Google 地图.

这是我正在使用的 HTML.假设 v-if="activeStep === 1" 工作并正确显示预期的 div:

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

id 样式:

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

和我的 Vue 绑定:

if(document.getElementById("map-container")) {const mapVue = 新 Vue({el: '#map-container',数据: {活动步骤:1，defaultLatLng: {lat: 37.5665, lng: 126.9780}},安装:功能(){var map = new google.maps.Map(document.getElementById('location-map'), {变焦:15，中心:this.defaultLatLng，滚轮:假，disableDoubleClickZoom: 真,泛控制:假，街景控制:假，可拖动:假});var 标记 = 新的 google.maps.Marker({位置:this.defaultLatLng，地图:地图});}})}

但是地图没有显示.我在这里做错了什么吗?

我能想到的有两个问题:

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的生成?

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

解决方案

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

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

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

使您的回调指向全局 Vue 实例:

&callback=app.createMap

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

window.app = new Vue({});

现在你可以在你的主 Vue 实例上简单地使用一个 createMap 方法来初始化你的地图.

当然，如果您没有立即显示您的地图容器并且稍后显示它，您将必须在地图上调用 resize 事件以确保它重新呈现.

I'm trying to get Google Maps working with Vue.js.

This is the HTML I am using. Assume that v-if="activeStep === 1" works and is properly displaying the intended 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 styling:

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

and my Vue binding:

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

But the map is not displaying. Am I doing something incorrectly here?

There are two issues I can think of:

1. The Google Maps documentation calls the script with a &callback=initMap and names the function initMap whereas I haven't done that. Instead, I am having the function call occur with vue's mounted directive. Not sure how I'd call initMap from a vue method. Also, I am not using async defer (like <script async defer src="https://maps.googleapis.com/maps/api/js?key=MYKEY"></script>) on the script as I read somewhere this was not necessary.

2. The v-if actually removes the element and displays it depending on the activeStep, so perhaps the map function isn't re-initialized when that part of the DOM is generated?

Any help would be much appreciated. Thanks in advance!

解决方案

If you are not using async defer with a callback, the order of your Javascript will be important.

And it will also matter if you do use async/defer for other scripts. I suggest using async defer with a callback to ensure that Google maps has loaded properly and so you don't have to worry about order.

If you want to hook up your callback to Vue you can do something like this:

Make your callback point to a global Vue instance:

&callback=app.createMap

Create a global Vue instance like so:

window.app = new Vue({});

Now you can simply have a createMap method on your main Vue instance where you can initialize your map.

Of course if you are not showing your map container straight away and you display it later on you will have to call a resize event on your map to ensure it re-renders.

这篇关于让谷歌地图与 Vue.js 一起工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！