时间戳

首页 > 解决方案 > 将自动完成结果限制在 place_id 范围内

google-maps - 将自动完成结果限制在 place_id 范围内

问题描述

我有两个文本框，它们都是自动完成的。当我改变它时，我们得到第一个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)'],
        componentRestrictions: {country: 'gb'},
    };

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

所以假设我在第一个文本框中输入了 London，那么第二个文本框应该只建议伦敦内的地点。

标签： google-mapsgoogleplacesautocomplete

解决方案

如果要将 an 的结果限制在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);
});

概念证明小提琴

结果自动完成的屏幕截图

"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, 'place_changed', 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'],
      strictBounds: true,
      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, 'place_changed', 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>

推荐阅读