Question

Google地图未加载属性，除非我按ctrl + f5。我在vue js挂钩里面初始化地图。显示的错误是

挂钩时出错：＆＃34; ReferenceError：google未定义＆＃34;

当我按ctrl + f5时一切正常

<div id="map"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=****"
            async defer></script>
new Vue({
    el:'#app',
    mounted() {
         map = new google.maps.Map(document.getElementById('map'), {
             center: {lat: -34.397, lng: 150.644},
             zoom: 8
         });
    }
});

Answer 1

我建议将现有的Google地图库用于Vue，但如果您坚持按原样异步加载Google地图：

new Vue({
    el:'#app',
    created() {
         let script = document.createElement('script');
         script.src = 'https://maps.googleapis.com/maps/api/js?key=****';
         document.body.appendChild(script);
         script.load = function(){  
             map = new google.maps.Map(document.getElementById('map'), {
                 center: {lat: -34.397, lng: 150.644},
                 zoom: 8
             });
         };
    }
});

基本上，您必须侦听加载事件才能开始使用API。

但我觉得在你的情况下，最好的做法是在你的Vue.js应用程序加载之前同步加载它，因为它可能完全依赖于Google Maps API：

<html>
<body>
...
    <script src="https://maps.googleapis.com/maps/api/js?key=****"></script>
    <script src="path-to-your-app's-js"></script>
</body>
</html>

谷歌地图无法正确加载vue js

1 个答案: