安装vue-google-autocomplete后的Google参考错误 [英] Google Reference Error after installing vue-google-autocomplete
问题描述
我正在使用vue.js和Laravel 5.6.12
I am using vue.js and Laravel 5.6.12
我正在关注此github页面，以安装vue.js谷歌自动完成功能.
I am following this github page to install vue.js google autocomplete.
下面是我遵循的分步指南.
Below is the Step by Step guidelines I followed.
npm install vue-google-autocomplete --save
然后在app.js中添加以下代码
Then added below code in 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"
Error in mounted hook: "ReferenceError: google is not defined"
我在上面的代码中缺少任何内容吗?
Am I missing anything in above code?
推荐答案
似乎您尚未将google maps脚本添加到index.html.
It seems like you have not added google maps script to your index.html.
此组件(Vue Google自动完成)使用Google Maps Places API来获取地理建议 自动补全功能，因此您必须在其中包含Google Maps Places API HTML的:
This component (Vue Google Autocomplete) uses Google Maps Places API to get geo suggests for autocompletion, so you have to include the Google Maps Places API in the of your 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
If you are using vue cli, you can add it to this file: https://github.com/vuejs-templates/webpack/blob/develop/template/index.html
顺便说一句:您还可以在示例页面上找到此脚本以及查看源代码: https: //olefirenko.github.io/vue-google-autocomplete/(检查页面的源代码)
BTW: You can find this script on example page as well view-source: https://olefirenko.github.io/vue-google-autocomplete/ (check source code of the page)
请按照以下步骤获取API密钥:
- 转到Google API控制台.
- 创建或选择一个项目.
- 点击继续以启用API和所有相关服务.
- 在凭据"页面上，获取API密钥. 注意:如果您有现有的不受限制的API密钥，或具有浏览器限制的密钥，则可以使用该密钥.
- 从显示API密钥的对话框中，选择限制密钥"以对API密钥设置浏览器限制.
- 在密钥限制"部分中，选择HTTP引荐来源网址(网站)，然后按照屏幕上的说明设置引荐来源网址.
- (可选)启用计费.有关更多信息，请参见使用限制.
- Go to the Google API Console.
- Create or select a project.
- Click Continue to enable the API and any related services.
- On the Credentials page, get an API key. Note: If you have an existing unrestricted API key, or a key with browser restrictions, you may use that key.
- From the dialog displaying the API key, select Restrict key to set a browser restriction on the API key.
- In the Key restriction section, select HTTP referrers (web sites), then follow the on-screen instructions to set referrers.
- (Optional) Enable billing. See Usage Limits for more information.
有关获取API密钥的更多信息，请此处
More info about getting the API key here
这篇关于安装vue-google-autocomplete后的Google参考错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
