安装vue- Google -autocomplete后出现google参考错误
安装vue- Google -autocomplete后出现google参考错误
提问于 2018-06-02 00:27:14
我使用的是vue.js和Laravel 5.6.12
下面是我遵循的一步一步的指导方针。
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“
我在上面的代码中遗漏了什么吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-02 00:56:53
似乎你还没有将谷歌地图脚本添加到你的index.html中。
这个组件(Vue Google Autocomplete)使用Google Maps Places API来获取自动完成的地理建议，所以你必须在你的
中包含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
要获取密钥，请执行以下步骤
API Console.
- Create转到Google API Console.
- Create或选择一个project.
- Click继续启用和任何相关服务。
- 在凭据页面上，获取
- 密钥。注:如果您有一个不受限制的API密钥，或者有一个具有浏览器限制的密钥，则可以使用该密钥。
- 从显示该API密钥的对话框中，选择受限密钥以设置对该API密钥的浏览器限制。
- 在密钥限制部分中，选择HTTP referrers (
- )，然后按照屏幕上的说明设置HTTP。有关更多information.
，请参阅使用限制
获取接口密钥here更多信息
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50647627
复制相关文章
相似问题