如何为 Google 地点自动完成添加位置偏差：Javascript API

Question

我有一个地方自动填充字段，我用它来让用户提供位置。自动完成表格正在工作，但它并没有像我想要的那样偏向位置。我有以下代码：

function activatePlacesSearch() {
  var input = document.getElementById('project-location-input');
  var location = {lat: 53.2910591, lng: -6.1823276};
  var radius = 1000;
  var autocomplete = new google.maps.places.Autocomplete(input, location, radius);
  google.maps.event.addListener(autocomplete, 'place_changed', function(e) {
      const place = autocomplete.getPlace();
      lat = place.geometry.location.lat();
      lng = place.geometry.location.lng();
      // draw the map
      document.getElementById('new-project-map-div').style.display = 'block'
      var map = new google.maps.Map(document.getElementById('new-project-map-div'), {
      zoom: 15,
      center: new google.maps.LatLng(lat, lng),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      fullscreenControl:false,
      disableDefaultUI: true,
    });

// Set marker position
  var myMarker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      draggable: false
    });


  map.setCenter(myMarker.position);
  myMarker.setMap(map);
  });

}

我知道您可以按如下方式查询并且有效： https://maps.googleapis.com/maps/api/place/autocomplete/xml?input=20&location=53.2910591,-6.1823276&radius=5000&key=AIzaSyC8sJYstB5U0fi8UdiHHAlG4tHVDuX_e-o

我想用我的代码来完成这个，但我在这里做错了。

Answer 1

看看他们文档中的这一部分：google places autocomplete location biasing。您可以利用 strictbounds 和 components 参数。

如果这不能让您更接近您想要完成的目标，post link 一个带有您示例的 CodeSandbox，我可以帮助您解决问题。

干杯！

Answer 2

在做了一些调查工作之后，这就是我想出的。似乎除非您在 DOM 上显示地图（如果您不想看到它，可以将其放置在视线之外），否则这将无法正常工作。这里是 an example I found on JSFiddle

//片段

var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 39.742347, lng: -104.941121}, //Denver, CO
    zoom: 12
  });

并且 here's my CodeSandbox example 使用您的沙箱和上面示例中的一些指针。

Answer 3

一种选择是使用 AutocompleteOption.bounds。如果您只知道位置和半径，则可以创建一个圆并在其上调用 getBounds（没有记录的方法可以使用位置和半径来偏置 javascript 自动完成）。

var location = {lat: 53.2910591, lng: -6.1823276};
  var radius = 1000;
  var circle = new google.maps.Circle({
    center: location,
    radius: radius
  });
  var autocomplete = new google.maps.places.Autocomplete(input, {
    bounds: circle.getBounds()
  });

proof of concept fiddle

代码片段：

// 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=YOUR_API_KEY&libraries=places">

function activatePlacesSearch() {
  var input = document.getElementById('project-location-input');
  var location = {lat: 53.2910591, lng: -6.1823276};
  var radius = 1000;
  var circle = new google.maps.Circle({
    center: location,
    radius: radius
  });
  var autocomplete = new google.maps.places.Autocomplete(input, {bounds: circle.getBounds()});
  google.maps.event.addListener(autocomplete, 'place_changed', function(e) {
      const place = autocomplete.getPlace();
      console.log(place);
      lat = place.geometry.location.lat();
      lng = place.geometry.location.lng();
      // draw the map
      document.getElementById('new-project-map-div').style.display = 'block'
      var map = new google.maps.Map(document.getElementById('new-project-map-div'), {
      zoom: 15,
      center: new google.maps.LatLng(lat, lng),
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      mapTypeControl: false,
      streetViewControl: false,
      fullscreenControl:false,
      disableDefaultUI: true,
    });

// Set marker position
  var myMarker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      draggable: false
    });

  map.setCenter(myMarker.position);
  myMarker.setMap(map);
  });

}

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#new-project-map-div {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div class="pac-card" id="pac-card">
  <div id="pac-container">
    <input id="project-location-input" type="text"
        placeholder="Enter a location">
  </div>
</div>
<div id="new-project-map-div"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=activatePlacesSearch"
        async defer></script>

如何为 Google 地点自动完成添加位置偏差：Javascript API

How do I add location biasing to Google Places Autocomplete: Javascript API

javascript

google-maps

autocomplete