获取 address_components 的 place_id [英] Get place_id of address_components

问题描述

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

I am using Google place autocomplete. And I don't know how to get place_id of address_components. In JSON there are only long_name, short_name, types. My code is here:

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(图片)

Here is my JSON (picture)

我不需要我的地方的 place_id.我特别需要address_components的place_ids

I don't need place_id of my place. I need especially place_ids of address_components

推荐答案

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

If you reverse geocode the result, it will return results (which include a place_id) for each of the address components that contain that 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') {
        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);
      }
    });
});

概念证明小提琴

代码片段:

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>

这篇关于获取 address_components 的 place_id的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！