在 vue.js 中集成谷歌地图

Question

我一直在尝试在包含脚本的同时在我的 vue.js 项目上初始化 Google 地图：

 <script src="https://maps.googleapis.com/maps/api/js?key="MY_API_KEY"&callback=initMap" async defer></script>

问题是我的 .vue 文件看起来像这样：

 <template>
  ...
</template>

<script>
  ...
</script>

而且我不能在我的 vue 文件中包含多个脚本标签，我可以在传递 index.html 时显示地图，但我真的不想将 js 放在 index.html 上，+ 我不能指向脚本vue 方法的回调。

你们对如何使用 .vue 文件显示地图有什么想法吗？我确实使用了 vue2-google-maps 但我想使用原始的谷歌地图。

我有一个小提琴正在做一些事情： https ://jsfiddle.net/okubdoqa/ 没有在脚本标签中使用回调，但它对我不起作用……谢谢

原文由 Loïc Monard 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我建议使用 npm google-maps 而不是在 index.html 中添加脚本。您可能不需要在每个页面都调用 google-maps API，我认为最好正确使用 Webpack。您可以使用 npm install google-maps

 import GoogleMapsLoader from 'google-maps'

mounted: function () {
  GoogleMapsLoader.load(function(google) {
    let map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: position
    })
  })
}

原文由 j-printemps 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在不使用库的情况下让它工作有点麻烦，而且可能有更简洁的方法，但是如果你想启动和运行，你可以简单地导入库并在你的组件中使用它。

首先，不要使用 defer & async <script> 。将其加载到 index.html ：

 <script src="https://maps.googleapis.com/maps/api/js?key=yourKey"></script>

然后在您的组件中，您可以访问全局 google 并在设置组件后向其传递一个元素。例如使用 Vuejs cli 的设置：

 <template>
  <div class="hello">
    <h1>{{ msg }}</h1>

    <div id="myMap"></div>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }},
  mounted: function() {
        console.log("map: ", google.maps)
            this.map = new google.maps.Map(document.getElementById('myMap'), {
            center: {lat:61.180059, lng: -149.822075},
            scrollwheel: false,
            zoom: 4
            })
  }

}
</script>
<style scoped>
    #myMap {
    height:300px;
    width: 100%;
   }
</style>

原文由 Mark 发布，翻译遵循 CC BY-SA 3.0 许可协议