安装 vue-google-autocomplete 后的 Google 参考错误答案

【问题标题】：Google Reference Error after installing vue-google-autocomplete安装 vue-google-autocomplete 后的 Google 参考错误
【发布时间】：2018-06-01 16:27:14
【问题描述】：

我正在使用 vue.js 和 Laravel 5.6.12

I am following this github page to install vue.js google autocomplete.

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

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: google is not defined”

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

【问题讨论】：

标签： vue.js laravel-5.6

【解决方案1】：

您的index.html 似乎还没有添加谷歌地图脚本。

这个组件（Vue Google Autocomplete）使用 Google Maps Places API 来获取地理建议自动补全，因此您必须将 Google Maps Places API 包含在您的 HTML：

<!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 和任何相关服务。
在凭据页面上，获取 API 密钥。注意：如果您有一个现有的不受限制的 API 密钥，或者具有浏览器限制的密钥，您可以使用该密钥。
从显示 API 密钥的对话框中，选择限制密钥以设置对 API 密钥的浏览器限制。
在“密钥限制”部分，选择 HTTP 引荐来源网址（网站），然后按照屏幕上的说明设置引荐来源网址。
（可选）启用计费。有关详细信息，请参阅使用限制。

更多关于获取 API 密钥here

【讨论】：

我没有添加脚本 url。我去做。在我的问题的上述参考页面中，有 google api 控制台链接将我发送到此处：i.stack.imgur.com/rJwOj.png 你能告诉我如何获取 api 密钥吗？
@Pankaj 我已经更新了答案，如果您有任何其他问题，请告诉我
你能在这里给你有用的建议吗？ stackoverflow.com/questions/50649177/…
@Pankaj 好的，已回答:)