0

这是我用来显示谷歌地图的链接：

https://jsfiddle.net/oscar11/1krtvcfj/2/

在尝试通过尝试此代码访问地图时，它显示以下错误：

挂载钩子中的错误：“ReferenceError：未定义谷歌”

正如有人在另一个链接中建议的那样，我什至初始化了 4 个参数，例如

geocoder: null,
map: null,
marker: null,
infowindow: null

我需要使用此代码访问谷歌地图。请有人帮忙。

4

1 回答 1

0

你这里有很多问题：

  • 应在数据组件中维护对变量的引用。
  • 函数回调需要使用胖箭头函数，或者.bind(this)（以及其他选项）以保持范围。这将更function () {改为() => {. 否则，this这些匿名回调的范围不会是 Vue 实例。
  • 地图本身需要成为 Vue 模板的一部分。
  • address输入应该使用 Vue 提供的绑定v-model，以保持其数据与组件同步
  • 如果没有 API 密钥，该geocoder服务将无法运行。
  • 组件中的底座div也需要一个固定的高度，或者至少需要一个高度100%才能正确显示地图。
  • 虽然您可以使用document.getElementById()，但我建议使用 aref来维护对元素的引用，方法是添加ref="map_canvas"到元素然后使用this.$refs.map_canvas。

似乎您刚刚将一些代码复制并粘贴到 Vue 组件中，并希望它能够正常工作。它不会。我已经为您清理了这一点，但我建议您密切注意差异，以便您了解它们如何集成在一起。

这是您更新的 jsFiddle

于 2019-05-16T14:41:50.790 回答