时间戳

首页 > 解决方案 > 如何在页面加载谷歌地图时启动自动完成监听器

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

问题描述

下面的代码是谷歌地图自动完成搜索，它只适用于place_changed行动。

我应该使用哪个事件来替换它并使其在页面加载时运行 - 基于值 in 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>

标签： javascriptgoogle-maps

解决方案

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

因此，我建议您使用 Place Search 服务，例如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>

希望这可以帮助！

推荐阅读