为什么我的自动完成搜索文件在尝试从 Google 个地点 API 中提取城市时会冻结？

Question

在我的网页基础模板中，我有 JQuery、Google 地方 API 的链接、自动完成插件和调用该功能的 JS 代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDaa7NZzS-SE4JW3J-7TaA1v1Y5aWUTiyc&libraries=places"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.7.0/jquery.geocomplete.js"></script>

 <script>

    $(function(){

    $("#searchBoxGlow").geocomplete()

    });

    </script>

我终于有了一个搜索字段，我想自动完成城市名称

<input type="text" class="form-control input-lg" id="searchBoxGlow" name="city" placeholder="Search Cities">

但是它冻结并显示感叹号，如下图所示：

Answer 1

这对我有用。

<input type="text" id="searchplace" />
<input type="hidden" id="latitude" name="latitude"/>
<input type="hidden" id="longitude" name="longitude"/>

在 html 部分，我添加了这个：

<script type="text/javascript">
    function initialize() {
        var searchBox = document.getElementById('searchplace');
        var autocomplete =  new google.maps.places.Autocomplete(searchBox);
        var latitude;
        var longitude;

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();

            latitude = place.geometry.location.lat();
            longitude = place.geometry.location.lng();
            document.getElementById('latitude').value = place.geometry.location.lat();
            document.getElementById('longitude').value = place.geometry.location.lng();                                     
        });                                             
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

为什么我的自动完成搜索文件在尝试从 Google 个地点 API 中提取城市时会冻结？

Why does my autocomplete search fiels freeze when trying to pull cities from Google Places API?

javascript

jquery

autocomplete

google-places-api