Question

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

Answer 1

关于自动完成服务，官方文档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/

我还在下面添加了代码段：

＆＃13;

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);

＆＃13;

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

＆＃13;

<!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>

＆＃13;

从Marker Google Map API检索地名

1 个答案: