搜索框 google 地图 api 无法显示自动完成

Question

我正在为位置搜索创建地图，但我的搜索框没有显示自动完成功能。我遵循了 https://www.youtube.com/watch?v=D_jUFC-Xktk&t=3s

上的教程

这是我的地图，没有显示自动完成功能

index.blade.php

<script async src="https://maps.googleapis.com/maps/api/js?key=keysensor&libraries=places"></script>
<div class="row">
   <div class="col-lg-12">
     <style>
     #map {
        width: 100%;
        height: 500px;
     }
    </style>
    <label for=""><b>ADRESSTANAH <font style="color: red;">*</font></b></label>
    <div class="form-group">
       <input type="text" id="searchmap">
       <div id="map"></div>
    </div>
</div>

var map = new google.maps.Map(document.getElementById('map'),{
    center:{
        lat:-6.8909965,
        lng:110.6046387
    },
    zoom:15
});

var marker = new google.maps.Marker({
    position: {
        lat:-6.8909965,
        lng:110.6046387
    },
    map : map,
    draggable : true
});

var searchBox = new google.maps.places.SearchBox(document.getElementById('searchmap'));

google.maps.event.addListener(searchBox, 'places_changed', function(){

    var places = searchBox.getPlaces();
    var bounds = new google.maps.LatLngBounds();
    var i, place;

    for(i=0; place=places[i];i++){
        bounds.extends(place.geometry.location);
        marker.setPosition(place.geometry.location);
    }

    map.fitBounds(bounds);
    map.setZoom(15);
});

google.maps.event.addListener(marker, 'position_changed', function(){
    var lat = marker.getPosition().lat();
    var lng = marker.getPosition().lng();

    $('#lat').val(lat);
    $('#lng').val(lng);
});

我想在搜索框中显示自动完成功能。请帮我解决它。谢谢你

Answer 1

您的请求中需要有一个回调参数来调用需要执行的内容。例如：

<script async src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap"></script>

然后，您将把所有 javascript 代码放在 initMap 函数中。这是一个有效的 JSBin 示例：https://jsbin.com/qerofoqudo/edit?html,js,console,output

搜索框 google 地图 api 无法显示自动完成

Searchbox google maps api cannot show the autocomplete

javascript

laravel

google-maps-api-3

autocomplete

search-box