如何加入 vue 2 中的 google 对象？

Question

我正在尝试在我的 vue2 项目中使用 google 地图 API，但我尝试了一些失败的方法。在使用了 vue2googlemaps 模块和来自 google 的节点模块后，我决定直接使用 CDN 并将其添加到索引页面。我现在的问题是，要访问 google 对象，例如创建一个标记或类似的东西，我需要使用 this.marker = new window.google.maps.Marker() 例如，但是在我看到的教程中，每个人都使用直接 google 对象，从不使用 window。我不明白为什么会这样。如果有人向我展示在 google.

上导入或使用此库的正确方法，我们将不胜感激

Answer 1

这是因为你的模板代码是在你的组件实例(a.k.a vm)的范围内编译和执行的，而不是在全局范围内(a.k.a。window ) 范围。

要在您的模板中直接使用 google，您可以添加以下计算：

computed: {
  google: () => window.google
}

如果您的问题是没有在组件的 <script> 中定义 google，一个简单的解决方案是将其作为 const 添加到顶部：

import Vue from 'vue';
const google = window.google;

export default Vue.extend({
  computed: {
    google: () => google // also make it available in template, as `google`
  }
})

一个更优雅的解决方案是教 webpack 在任何组件中导入时从 window 对象中获取 google：

vue.config.js:

module.exports = {
  configureWebpack: {
    externals: {
      google: 'window.google'
    }
  }
}

这会在您的 webpack 配置中创建一个 google 命名空间，因此您可以在任何组件中从中导入：

import google from 'google';

//... 
  computed: {
    google: () => google // provide it to template, as `google`
  }

为什么我说它更优雅？
因为它将组件与上下文分离，现在您不需要在不同上下文中使用时修改组件（即：在测试环境中，它甚至可能不使用浏览器，所以它可能没有 window 对象，而是一个 global ；在这种情况下，您所要做的就是在该环境中定义一个 google 名称空间，这就是您的组件将从中获取其 google 对象的地方; 但您不必调整或模拟任何组件的 methods/properties).

如何加入 vue 2 中的 google 对象？

How to acced to google object in vue 2?

google-maps

google-maps-api-3

vue.js

vuejs2