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

debugcn 发表于 Dev

拉胡尔·雷古纳特

除非我按 ctrl+f5，否则 Google 地图不会加载属性。我在 vue js 挂载钩子内初始化地图。显示的错误是

挂载钩子错误：“ReferenceError: google is not defined”

当我按 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
         });
    }
});

网络AP

我建议为 Vue 使用现有的谷歌地图库，但如果你坚持按原样异步加载谷歌地图：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。