为什么 Google Place Search 只有 return 这个地址的一个结果？

Question

我正在尝试使用 Google API 对地址进行地理编码。这里的 Geocode 意思是给定一个地址，计算出经纬度。通过我的系统发送的地址往往有拼写错误和缺失的部分。 Google 建议对像我这样不明确的地址使用 Places API。

The service is especially useful for making ambiguous address queries in an automated system, and non-address components of the string may match businesses as well as addresses. Examples of ambiguous address queries are incomplete addresses, poorly formatted addresses, or a request that includes non-address components such as business names.

我在页面上包含了这样的脚本：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

然后我提出了一个要求：

var mapElem = document.getElementById('map');
var service = new google.maps.places.PlacesService(mapElem);
var bounds = { 
    north: 50, 
    south: 20, 
    east: -60, 
    west: -130 
};
var searchOptions = { 
    bounds: bounds, 
    query: '100 Broadway, Tyler, TX' 
};
service.textSearch(searchOptions, (results, status) => { 
    console.log(results, status); 
});

问题是德克萨斯州泰勒有两条不同的 100 Broadway（100 N Broadway 和 100 S Broadway），但 API 只有 returns 100 N Broadway。我需要结果包括两个结果，以便用户可以选择正确的结果。我该如何实现？

我也尝试过使用 findPlaceFromQuery() 和 nearbySearch()。前者也只返回一个结果，后者没有放地址的地方（我认为后者更多的目的是为了找到给定区域中的所有类型的东西，例如餐馆）。

Answer 1

自动完成returns两个选项，您可以让您的用户选择正确的一个。

另外，搜索“100 Broadway Tyler, TX”returns 只是“100 North Broadway”，而搜索“100 S Broadway Tyler, TX”returns 两个结果.这似乎是 API 或 API.

使用的数据中的错误

proof of concept fiddle

代码片段（使用地点搜索 100 S Broadway, Tyler TX；并自动完成）：

"use strict";

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCPJpjD-qcR_yIxJnS8maR5W9KB0E3EzYI&libraries=places">
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: {
      lat: -33.8688,
      lng: 151.2195
    },
    zoom: 13
  });
  const card = document.getElementById("pac-card");
  const input = document.getElementById("pac-input");
  map.controls[google.maps.ControlPosition.TOP_RIGHT].push(card);
  const request = {
    query: "100 S Broadway Tyler, TX",
    fields: ["name", "geometry"]
  };
  let service = new google.maps.places.PlacesService(map);
  service.findPlaceFromQuery(request, (results, status) => {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      console.log("results.length=" + results.length);
      let bounds = new google.maps.LatLngBounds();
      for (let i = 0; i < results.length; i++) {
        console.log(results[i]);
        let marker = createMarker(results[i]);
        bounds.extend(marker.getPosition())
      }
      console.log(bounds.getCenter().toUrlValue(6));
      google.maps.event.addListenerOnce(map, 'zoom_changed', function() {
        map.setZoom(map.getZoom() - 1);
      })
      map.fitBounds(bounds);
    }
  });


  function createMarker(place) {
    const marker = new google.maps.Marker({
      map,
      position: place.geometry.location
    });
    console.log(place.name + "<br>" + place.formatted_address);
    google.maps.event.addListener(marker, "click", () => {
      infowindow.setContent(place.name);
      infowindow.open(map, marker);
    });
    return marker;
  }
  const autocomplete = new google.maps.places.Autocomplete(input); // Bind the map's bounds (viewport) property to the autocomplete object,
  // so that the autocomplete requests use the current map bounds for the
  // bounds option in the request.

  autocomplete.bindTo("bounds", map); // Set the data fields to return when the user selects a place.

  autocomplete.setFields(["address_components", "geometry", "icon", "name"]);
  const infowindow = new google.maps.InfoWindow();
  const infowindowContent = document.getElementById("infowindow-content");
  infowindow.setContent(infowindowContent);
  const marker = new google.maps.Marker({
    map,
    anchorPoint: new google.maps.Point(0, -29)
  });
  autocomplete.addListener("place_changed", () => {
    infowindow.close();
    marker.setVisible(false);
    const place = autocomplete.getPlace();

    if (!place.geometry) {
      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
      window.alert("No details available for input: '" + place.name + "'");
      return;
    } // If the place has a geometry, then present it on a map.

    marker.setPosition(place.geometry.location);
    marker.setVisible(true);
    let address = "";

    if (place.address_components) {
      address = [
        (place.address_components[0] &&
          place.address_components[0].short_name) ||
        "",
        (place.address_components[1] &&
          place.address_components[1].short_name) ||
        "",
        (place.address_components[2] &&
          place.address_components[2].short_name) ||
        ""
      ].join(" ");
    }

    infowindowContent.children["place-icon"].src = place.icon;
    infowindowContent.children["place-name"].textContent = place.name;
    infowindowContent.children["place-address"].textContent = address;
    infowindow.open(map, marker);
  }); // Sets a listener on a radio button to change the filter type on Places
  // Autocomplete.

}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#description {
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
}

#infowindow-content .title {
  font-weight: bold;
}

#infowindow-content {
  display: none;
}

#map #infowindow-content {
  display: inline;
}

.pac-card {
  margin: 10px 10px 0 0;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  background-color: #fff;
  font-family: Roboto;
}

#pac-container {
  padding-bottom: 12px;
  margin-right: 12px;
}

.pac-controls {
  display: inline-block;
  padding: 5px 11px;
}

.pac-controls label {
  font-family: Roboto;
  font-size: 13px;
  font-weight: 300;
}

#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 400px;
}

#pac-input:focus {
  border-color: #4d90fe;
}

#title {
  color: #fff;
  background-color: #4d90fe;
  font-size: 25px;
  font-weight: 500;
  padding: 6px 12px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Place Autocomplete</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=places&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div class="pac-card" id="pac-card">
    <div>
      <div id="title">
        Autocomplete search
      </div>
    </div>
    <div id="pac-container">
      <input id="pac-input" type="text" placeholder="Enter a location" value="100 Broadway, Tyler, TX " />
    </div>
  </div>
  <div id="map"></div>
  <div id="infowindow-content">
    <img src="" width="16" height="16" id="place-icon" />
    <span id="place-name" class="title"></span><br />
    <span id="place-address"></span>
  </div>
</body>

</html>

为什么 Google Place Search 只有 return 这个地址的一个结果？

Why does Google Place Search only return one result for this address?

javascript

google-maps-api-3