javascript - 获取 address_components 的 place_id

Question

我正在使用 Google 地点自动完成功能。而且我不知道如何获取 address_components 的 place_id。在 JSON 中只有 long_name、short_name 类型。我的代码在这里:

var object_location = document.getElementById('object_location'),
    autoComplete = new google.maps.places.Autocomplete(object_location);

autoComplete.addListener('place_changed', function() {
   var place = autoComplete.getPlace();
   console.log('place = ', place);
});

这是我的JSON(图片)

我不需要我的地点的 place_id。 我特别需要 address_components 的 place_ids

Answer 1

如果您对结果进行反向地理编码，它将为包含该位置的每个地址组件返回结果(包括 place_id)。

autoComplete.addListener('place_changed', function() {
  var place = autoComplete.getPlace();
  map.setZoom(11);
  var marker = new google.maps.Marker({
    position: place.geometry.location,
    map: map
  });
  infowindow.setContent(place.formatted_address);
  infowindow.open(map, marker);
  geocoder.geocode({
      latLng: place.geometry.location
    },
    function(results, status) {
      if (status === 'OK') {
        console.log("revGeo result=" + JSON.stringify(results));
        var htmlStr = "<table border='1'>";
        for (var i = 0; i < results.length; i++) {
          htmlStr += "<tr><td>" + results[i].formatted_address + "</td><td>" + results[i].place_id + "</td></tr>";
        }
        htmlStr += "</table>";
        infowindow.setContent(infowindow.getContent() + "<br>" + htmlStr);
      } else {
        window.alert('Geocoder failed due to: ' + status);
      }
    });
});

proof of concept fiddle

代码片段:

var geocoder;
var map;
var infowindow;

function initialize() {
  geocoder = new google.maps.Geocoder();
  infowindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var object_location = document.getElementById('object_location'),
    autoComplete = new google.maps.places.Autocomplete(object_location);

  autoComplete.addListener('place_changed', function() {
    var place = autoComplete.getPlace();
    map.setZoom(11);
    var marker = new google.maps.Marker({
      position: place.geometry.location,
      map: map
    });
    infowindow.setContent(place.formatted_address);
    infowindow.open(map, marker);
    geocoder.geocode({
        latLng: place.geometry.location
      },
      function(results, status) {
        if (status === 'OK') {
          var htmlStr = "<table border='1'>";
          for (var i = 0; i < results.length; i++) {
            htmlStr += "<tr><td>" + results[i].formatted_address + "</td><td>" + results[i].place_id + "</td></tr>";
          }
          htmlStr += "</table>";
          infowindow.setContent(infowindow.getContent() + "<br>" + htmlStr);
        } else {
          window.alert('Geocoder failed due to: ' + status);
        }
      });
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input id="object_location" />
<div id="map_canvas"></div>