从 Marker Google Map API 检索地名答案

【问题标题】：Retrieving place name from Marker Google Map API从 Marker Google Map API 检索地名
【发布时间】：2018-08-15 09:45:02
【问题描述】：

我正在使用 Google 地点自动完成功能来搜索地点。如果有多个结果，我想在点击时使用标记的地点名称和其他信息填充一些 html 字段。有没有办法从标记（标准）中检索信息并使用这些值填充文本字段？

【问题讨论】：

标签： javascript html google-maps google-maps-api-3 maps

【解决方案1】：

关于AutoComplete服务，在官方文档here中有一个全面的指南和示例。

AutoComplete 可用的方法是 getPlace()，它只返回一个位置。但如果您打算显示多个结果，那么我建议您改用 SearchBox。

至于使用相应标记的位置详细信息填充输入文本，您可以通过为每个标记添加侦听器并从地理编码结果中检索数据来实现：

s_markers.forEach(function(s_mark){
s_mark.addListener('click', function() {
 var geocoder = new google.maps.Geocoder();
 geocoder.geocode(
  { 'address': s_mark.title },
 function(results, status) {
  if(status == google.maps.GeocoderStatus.OK){ 

      var lat = results[0].geometry.location.lat();
      var lng = results[0].geometry.location.lng();

      document.getElementById("address_name").value = s_mark.title;
      document.getElementById("address_type").value = results[0].types;
      document.getElementById("coordinates").value = lat+","+lng;
      document.getElementById("location_type").value = results[0].geometry.location_type;
        }
      });
  });  
});

这是一个工作的 JSBin 供参考：http://output.jsbin.com/dazitup/

我还在下面添加了代码 sn-p：

var search_markers = [];
var markers = [];

function initialize() {
  var currentarea = {
    lat: -33.8688,
    lng: 151.2195
  };
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: currentarea
  });

  var input = document.getElementById('pac-input');
  var searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

  map.addListener('bounds_changed', function() {
    searchBox.setBounds(map.getBounds());
  });

  var s_markers = [];

  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();

    if (places.length === 0) {
      return;
    }

    // Clear out the old markers.
    s_markers.forEach(function(marker) {
      marker.setMap(null);
    });
    s_markers = [];

    // For each place, get the icon, name and location.
    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place) {
      if (!place.geometry) {
        console.log("Returned place contains no geometry");
        return;
      }
      var icon = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

      // Create a marker for each place.
      s_marker = new google.maps.Marker({
        map: map,
        icon: icon,
        title: place.formatted_address,
        position: place.geometry.location
      })
      s_markers.push(s_marker);

      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }
    });
    s_markers.forEach(function(s_mark) {
      s_mark.addListener('click', function() {
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({
            'address': s_mark.title
          },
          function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {

              var lat = results[0].geometry.location.lat();
              var lng = results[0].geometry.location.lng();

              document.getElementById("address_name").value = s_mark.title;
              document.getElementById("address_type").value = results[0].types;
              document.getElementById("coordinates").value = lat + "," + lng;
              document.getElementById("location_type").value = results[0].geometry.location_type;
            }
          });
      });
    });
    map.fitBounds(bounds);
  });

}


google.maps.event.addDomListener(window, 'load', initialize);

#map {
  height: 600px;
  width:70%;
  position: relative;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Marker Labels</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDLHKWYAEE2PDjvt6BaBH1SIs4Q93PMpQs&libraries=places"></script>
</head>

<body>
  <input id="pac-input" class="controls" type="text" placeholder="Search Box" style="margin-top:13px">
  <div id="map"></div>
</body>
<input id="address_name" type="text" placeholder="Address"><br>
<input id="address_type" type="text" placeholder="Address type"><br>
<input id="coordinates" type="text" placeholder="Coordinates"><br>
<input id="location_type" type="text" placeholder="Location type"><br>

</html>

【讨论】：