javascript - 如何在 ES6 中的 Vue.js 中使用谷歌地图

Question

我想在 ES6 的 Vue.js 中使用谷歌地图和 jquery。

我不希望它成为一个组件或类似 vue-google-maps 的东西。 我只想导入谷歌地图，并像我平常使用它一样使用它。

我已经让jquery像这样工作了。

  import jQuery from 'jquery'
  var jq = window.Jquery = jQuery

现在我想对谷歌地图做同样的事情，这样我就可以访问“google”变量。并在 Mounted() 方法中使用它。就像这样...

  export default {
      mounted () {
           var map = google.maps///etc
      }
  }

无论如何我都无法导入它。如果我只是将脚本包含在 index.html 页面上，即使我将其设置为全局对象，它也不可用。因为它是在 Vue.js 之后创建的

我已经尝试过 vue-google-maps，但我的用例非常具体，而且我需要很多已经编写的旧代码，所以我只需要普通的旧谷歌地图而不是 VUE 组件。

我想你可能会说，我希望我的应用程序的这一部分根本不受 Vue 控制。安装后只是普通的旧 Jquery。

请帮忙!

Answer 1

是的，你说得对，其实不是Vue的问题。这是一个 JavaScript 模块问题。

由于 google map 是用 IIFE 模式编写的，因此您不能直接导入它。你最好把它翻译成UMD或者commonjs模式。

如果你不知道该怎么做，也许你可以看看这个。 google-maps

你可以编写这样的模块，例如 my-google-map.js

import 'https://maps.googleapis.com/maps/api/js'
export default window.google

然后在你的 vue 文件中

import google from 'my-google-map.js'
console.log(google)