时间戳

首页 > 解决方案 > 安装 vue-google-autocomplete 后的 Google 参考错误

vue.js - 安装 vue-google-autocomplete 后的 Google 参考错误

问题描述

我正在使用 vue.js 和 Laravel 5.6.12

我正在关注这个 github 页面来安装 vue.js 谷歌自动完成功能。

以下是我遵循的分步指南。

npm install vue-google-autocomplete --save

然后在 app.js 中添加以下代码

import VueGoogleAutocomplete from 'vue-google-autocomplete'
Vue.component('vue-google-autocomplete', VueGoogleAutocomplete);

最后是模板中的代码。

<vue-google-autocomplete
    id="map"
    classname="form-control"
    placeholder="Start typing">
</vue-google-autocomplete>

我得到以下错误

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

在此处输入图像描述

我在上面的代码中遗漏了什么吗？

标签： vue.jslaravel-5.6

解决方案

您似乎尚未将 google 地图脚本添加到您的index.html.

该组件（Vue Google Autocomplete）使用 Google Maps Places API 来获取地理建议以进行自动完成，因此您必须在 HTML 中包含 Google Maps Places API ：

<!DOCTYPE html>
  <html>
  <head>
    …
    <!-- NEXT LINE IS SUPER IMPORTANT -->
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places"></script>
  </head>
  <body>
    …
  </body>
</html>

如果您使用的是 vue cli，可以将其添加到此文件中： https ://github.com/vuejs-templates/webpack/blob/develop/template/index.html

顺便说一句：您也可以在示例页面上找到此脚本查看源代码：https ://olefirenko.github.io/vue-google-autocomplete/ （检查页面的源代码）

按照以下步骤获取 API 密钥：

  • 转到 Google API 控制台。
  • 创建或选择一个项目。
  • 单击继续以启用 API 和任何相关服务。
  • 在 Credentials 页面上，获取 API 密钥。注意：如果您有一个现有的不受限制的 API 密钥，或者具有浏览器限制的密钥，您可以使用该密钥。
  • 从显示 API 密钥的对话框中，选择限制密钥以设置对 API 密钥的浏览器限制。
  • 在“密钥限制”部分，选择 HTTP 引荐来源网址（网站），然后按照屏幕上的说明设置引荐来源网址。
  • （可选）启用计费。有关详细信息，请参阅使用限制。

有关在此处获取 API 密钥的更多信息

推荐阅读