在 vue.js 中集成 Google 地图

我一直在尝试在我的 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/ https://jsfiddle.net/okubdoqa/没有在脚本标签中使用回调，但它对我不起作用......谢谢

我建议使用npm 谷歌地图 https://www.npmjs.com/package/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
    })
  })
}