javascript - 使用 Laravel 自动完成谷歌地图

标签 javascript jquery google-maps laravel autocomplete

尝试在 Laravel 中添加谷歌自动完成功能。我的代码如下-

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
    google.maps.event.addDomListener(window, 'load', function () {
        var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces'));
        google.maps.event.addListener(places, 'place_changed', function () {

        });
    });
</script>
<span>Location:</span>
<input type="text" id="txtPlaces" style="width: 250px" placeholder="Enter a location" />

它绝对适用于 HTML/PHP 文件。 html/php 文件中的输出是这样的-

enter image description here

但是,当我想在 Laravel 中实现时,它根本不起作用。它显示以下错误。 enter image description here

你能帮我解决这个问题吗?

最佳答案

你需要在url中添加 key ,这个错误的原因是你还没有配置你的谷歌地图API key 。

请参阅 - 如何创建 key :http://docs.gravityview.co/article/306-signing-up-for-a-google-maps-api-key

将 key 添加到 url:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR API KEY&libraries=places"></script>

或使用此网址:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

关于javascript - 使用 Laravel 自动完成谷歌地图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38321753/

相关文章:

javascript - 纯 JavaScript - Div 内的 ScrollIntoView

jquery - 如何在 highchart 中以编程方式更改柱形图的工具提示

javascript - 我应该使用 JSON 还是 AJAX 作为响应数据?

javascript - jQuery 选择器问题

javascript - 谷歌地图航点不显示完整路径

javascript - Google Maps for AngularJS 不适用于与 "HIDE"和 "SHOW"相关的任何 Angular 指令

javascript - 在将响应发送回客户端之前,如何等待 Mandrill 的交付响应?

javascript - 如何使用 NGINX 和 Node.js 提供静态文件(css、js、img)

javascript - NextJS _app.tsx Component 和 pageProps 应该是什么 TypeScript 类型?

javascript - ngModel 在 Controller 中更新,但不在 View 中更新, Angular 2