将自动完成结果限制在place_id的范围内

编程问答 2022-08-11

问题描述

我有两个文本框，它们都是自动完成的。当我更改它时，第一个获得place_id。第二个文本框应该在第一个的place_id中建议结果。

这是我的代码：

const options = {
                    types: ['(regions)'],componentRestrictions: {country: 'gb'},};

const search = new google.maps.places.Autocomplete(  $("#address_1")[0],options);

google.maps.event.addListener(search,'place_changed',function () {
    var place = search.getPlace();

    const options_b = {
        types: ['(regions)'],};

    var options_2 = {
        types: ['address'],strictbounds: true,radius:500,//other parameters here..perhaps place_id ?

        };

    const search = new google.maps.places.Autocomplete(  $("#address_2")[0],options_b);
});

因此，假设我在第一个文本框中输入了伦敦，那么第二个文本框应仅建议伦敦内的位置。

解决方法

如果您想将Autocomplete的结果限制为某个地点的边界，请使用该地点的边界来限制Autocomplete并设置strictBounds: true选项（请注意，大写）

const search1 = new google.maps.places.Autocomplete($("#address_1")[0],options);

google.maps.event.addListener(search1,'place_changed',function() {
  var place = search1.getPlace();
  var bounds = place.geometry.viewport; // bounds of place returned by the first autocomplete

  var options_2 = {
    types: ['address'],strictBounds: true,bounds: bounds
  };

  const search2 = new google.maps.places.Autocomplete($("#address_2")[0],options_2);
});

proof of concept fiddle

screenshot of resulting autocomplete 

"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 initAutocomplete() {
  var map = new google.maps.Map(document.getElementById('map'))
  const options = {
    types: ['(regions)'],componentRestrictions: {
      country: 'gb'
    },};

  const search1 = new google.maps.places.Autocomplete($("#address_1")[0],options);

  google.maps.event.addListener(search1,function() {
    var place = search1.getPlace();
    var bounds = place.geometry.viewport;
    var marker = new google.maps.Marker({
      position: place.geometry.location,map: map
    });
    var rectangle = new google.maps.Rectangle({
      bounds: bounds,map: map
    })
    map.fitBounds(bounds);

    var options_2 = {
      types: ['address'],bounds: bounds
      //other parameters here..perhaps place_id ?

    };

    const search2 = new google.maps.places.Autocomplete($("#address_2")[0],options_2);
    google.maps.event.addListener(search2,function() {
      var place = search2.getPlace();
      var marker = new google.maps.Marker({
        position: place.geometry.location,map: map,icon: {
          url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",size: new google.maps.Size(7,7),anchor: new google.maps.Point(3.5,3.5)
        }
      });
    });
  });
}
/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 80%;
}


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

html,body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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=initAutocomplete&libraries=places&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div class="pac-card" id="pac-card">
    <div id="pac-container">
      <input id="address_1" type="text" placeholder="Enter a location" /><br/>
      <input id="address_2" type="text" placeholder="Enter a location" />
    </div>
  </div>
  <div id="map"></div>
</body>

</html>

google-mapsgoogleplacesautocomplete