在 vue js 中访问 google 地图
Accessing google maps in vue js
这是我用来显示 google 地图的 link :
https://jsfiddle.net/oscar11/1krtvcfj/2/
尝试通过此代码访问地图时，显示以下错误：
Error in mounted hook: "ReferenceError: google is not defined"
正如有人在另一个 link 中建议的那样，我什至初始化了 4 个参数，例如
geocoder: null,
map: null,
marker: null,
infowindow: null
我需要使用此代码访问 google 地图。请有人帮忙。
你这里有很多问题：
- 应在数据组件中维护对变量的引用。
- 函数回调需要使用粗箭头函数，或
.bind(this)（以及其他选项）以保持作用域。这会将 function () { 更改为 () => {。否则，这些匿名回调中 this 的范围将不是 Vue 实例。
- 地图本身需要成为 Vue 模板的一部分。
address 输入应该使用 Vue 提供的 v-model 绑定，以保持它的数据与组件同步- 如果没有 API 密钥，
geocoder 服务将无法运行。
- 组件中的基础
div 也需要固定高度，或者至少 100% 的高度才能使地图正确显示。
- 虽然您可以使用
document.getElementById()，但我建议使用 ref 来维护对元素的引用，方法是向元素添加 ref="map_canvas"，然后使用 this.$refs.map_canvas相反。
您似乎只是将一些代码复制并粘贴到 Vue 组件中，并希望它能正常工作。它不会。我已经为您清理了这些内容，但我建议您密切注意差异，以便您了解它们是如何整合在一起的。
这是我用来显示 google 地图的 link :
https://jsfiddle.net/oscar11/1krtvcfj/2/
尝试通过此代码访问地图时，显示以下错误：
Error in mounted hook: "ReferenceError: google is not defined"
正如有人在另一个 link 中建议的那样，我什至初始化了 4 个参数，例如
geocoder: null,
map: null,
marker: null,
infowindow: null
我需要使用此代码访问 google 地图。请有人帮忙。
你这里有很多问题：
- 应在数据组件中维护对变量的引用。
- 函数回调需要使用粗箭头函数，或
.bind(this)（以及其他选项）以保持作用域。这会将function () {更改为() => {。否则，这些匿名回调中this的范围将不是 Vue 实例。 - 地图本身需要成为 Vue 模板的一部分。
address输入应该使用 Vue 提供的v-model绑定，以保持它的数据与组件同步- 如果没有 API 密钥，
geocoder服务将无法运行。 - 组件中的基础
div也需要固定高度，或者至少100%的高度才能使地图正确显示。 - 虽然您可以使用
document.getElementById()，但我建议使用ref来维护对元素的引用，方法是向元素添加ref="map_canvas"，然后使用this.$refs.map_canvas相反。
您似乎只是将一些代码复制并粘贴到 Vue 组件中，并希望它能正常工作。它不会。我已经为您清理了这些内容，但我建议您密切注意差异，以便您了解它们是如何整合在一起的。