Question

我正在使用vue.js和Laravel 5.6.12

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

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

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

然后在app.js

中添加以下代码

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

最后在模板中的代码下面。

{{1}}

我得到以下错误

挂钩时出错：＆＃34; ReferenceError：google未定义＆＃34;

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

Answer 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

BTW：您可以在示例页面上找到此脚本以及view-source：https://olefirenko.github.io/vue-google-autocomplete/（查看页面的源代码）

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

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

有关获取API密钥的更多信息here

安装vue-google-autocomplete后出现Google参考错误

1 个答案: