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

Question

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

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

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

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

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

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

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

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

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

请帮忙！

Answer 1

是的，你是对的。这实际上不是 Vue 的问题。这是一个 JavaScript 模块问题。

由于谷歌地图是在 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)

Answer 2

为什么不做以下事情？

<div>
 <img class="google-map" :src="googleUrl()">
</div>

methods: {
      googleUrl () {
        return 'https://maps.googleapis.com/maps/api/staticmap?zoom=16&scale=2&markers=color:blue|' + this.fullAddress() + '&size=250x200&sensor=false'
      },
      fullAddress () {
        return this.streetname + ' ' + this.housenumber + ',' + this.zipcode + ' ' + this.city
}