javascript - 在 vue.js 中集成谷歌地图

Question

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

<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 时显示 map ，但我真的不想将 js 放在 index.html 上，+ 我不能将脚本回调指向 vue 方法。

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

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

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