javascript - 如何在页面加载谷歌地图时启动自动完成监听器

Question

下面的代码是 Google map 自动完成搜索，它只适用于 place_changed 操作。

根据 name="search" 中的值，我应该使用哪个事件来替换它并使其在页面加载时运行？

<input type="text" name="search" value="Sport Caffe - Pool & Sports Bar, Bulevar Makedonski Prosvetiteli, Ohrid, North Macedonia" id="search_al" placeholder="Search" class="form-control" autocomplete="off">

<input type="hidden" name="place_id" value="" id="place_id_al">
<input type="hidden" name="icon" value="" id="icon_al">

<script>
var autocomplete_al = new google.maps.places.Autocomplete(input_al);

autocomplete_al.setFields(['place_id', 'address_components']);

autocomplete_al.addListener('place_changed', function() {

  // on page load shows alert 1 and adds values based on `search` name
  alert(1);

  var place = autocomplete_al.getPlace();

  document.getElementById('place_id_al').value = place.place_id;
  document.getElementById('icon_al').value = place.icon;

});
</script>

Answer 1

如果您已经知道该地点，则不适合使用自动完成服务。这就是为什么 place_changed是这里使用的单个事件；用户根据用户在输入字段中键入的内容从自动完成预测列表中选择一个地点。喜欢these examples .

因此我建议您使用地点搜索服务，例如 Find Place from Query .您可以使用 callback 参数立即进行查询以初始化 Places 服务。请参阅下面的 Google 代码示例:

<script>
  var map;
  var service;
  var infowindow;

  function initMap() {
    var sydney = new google.maps.LatLng(-33.867, 151.195);

    infowindow = new google.maps.InfoWindow();

    map = new google.maps.Map(
        document.getElementById('map'), {center: sydney, zoom: 15});

    var request = {
      query: 'Museum of Contemporary Art Australia',
      fields: ['name', 'geometry'],
    };

    service = new google.maps.places.PlacesService(map);

    service.findPlaceFromQuery(request, function(results, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          createMarker(results[i]);
        }

        map.setCenter(results[0].geometry.location);
      }
    });
  }

  function createMarker(place) {
    var marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(place.name);
      infowindow.open(map, this);
    });
  }
</script>

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

希望这对您有所帮助!