GoogleMaps v3 autocomplete.getBounds(）在设置后返回undefined

GoogleMaps v3 autocomplete.getBounds() returns undefined after being set

本文关键字：设置 返回 undefined v3 autocomplete getBounds GoogleMaps      更新时间：2023-09-26

我遇到了一个问题，试图将谷歌地图自动完成的结果与放置在地图上的最后一个pin进行比较。我在这里遵循谷歌的教程：https://developers.google.com/maps/documentation/javascript/places-autocomplete#change_search_area

我的CoffeeScript代码如下：

initSearch = ->
  autocomplete = new (google.maps.places.Autocomplete)(document.getElementById('location-query'), types: [ 'geocode' ])
  autocomplete.addListener 'place_changed', ->
    place = autocomplete.getPlace()
    addDestination(place, map, insertIndex) #places pin on map
    console.log 'autocomplete bounds (before): ' + autocomplete.getBounds()
    #setting bounds around new place
    biasCircle = new google.maps.Circle
      center: place.geometry.location
      radius: 500 #in kilometers
    autocomplete.setBounds(biasCircle.getBounds())
    console.log 'autocomplete bounds (after): ' + autocomplete.getBounds()

它编译成以下javascript：

initSearch = function() {
    var autocomplete;
    autocomplete = new google.maps.places.Autocomplete(document.getElementById('location-query'), {
      types: ['geocode']
    });
    return autocomplete.addListener('place_changed', function() {
      var biasCircle;
      place = autocomplete.getPlace();
      addDestination(place, map, insertIndex);
      console.log('autocomplete bounds (before): ' + autocomplete.getBounds());
      biasCircle = new google.maps.Circle({
        center: place.geometry.location,
        radius: 500
      });
      autocomplete.setBounds(biasCircle.getBounds());
      return console.log('autocomplete bounds (after): ' + autocomplete.getBounds());
    });
  };

大头针被正确地放置在地图上，但无论我添加了多少个位置，console.log总是返回：

autocomplete bounds (before): undefined
autocomplete bounds (after): ((9.923577823579402, -84.09528446042509), (9.932560976420598, -84.08616473957488))

边界是正确设置的（如第二个console.log所示），但结果实际上并没有偏差，第一个总是导致未定义。

我们用来测试结果是否有偏差的测试用例是：1.在自动完成中键入"San Jose"（最好的结果应该在美国）2.在地图上添加"哥斯达黎加利蒙"作为标记3.在自动完成中键入"San Jose"，最高结果应为San Jose，COSTA RICA

我们认为这可能是范围界定的问题，所以我们在所有地方都尝试了window.autocomplete，但仍然存在相同的问题。我们还尝试在一个单独的方法中设置自动完成边界（而不是place_changed事件，但这也不起作用）。

提前感谢您的帮助！

更新：尝试Cedric的答案根据Cedric的建议，我试图在监听器回调之外设置界限（方法是从监听器内部调用的），但我仍然遇到同样的问题。新代码：

#Sets autocomplete bias
setAutocompleteBias = (place) ->
  console.log 'autocomplete bounds (before): ' + window.autocomplete.getBounds()
  #setting bounds around new place
  biasCircle = new google.maps.Circle
    center: place.geometry.location
    radius: 500 #in kilometers
  window.autocomplete.setBounds(biasCircle.getBounds())
  console.log 'autocomplete bounds (after): ' + window.autocomplete.getBounds()
window.autocomplete = null
#Autocomplete search box initialization
initSearch = ->
  window.autocomplete = new (google.maps.places.Autocomplete)(document.getElementById('location-query'), types: [ 'geocode' ])
  #autocomplete.bindTo('bounds', map)
  window.autocomplete.addListener 'place_changed', ->
    place = window.autocomplete.getPlace()
    addDestination(place, map, insertIndex)
    setAutocompleteBias(place)

您的自动完成似乎缺少从地图所需的边界初始化

initSearch = ->
  autocomplete = new (google.maps.places.Autocomplete(                  
    document.getElementById('location-query'), types: [ 'geocode' ])
  autocomplete.bindTo('bounds', map)
  autocomplete.addListener 'place_changed', ->
    place = autocomplete.getPlace()
    addDestination(place, map, insertIndex) #places pin on map
    console.log 'autocomplete bounds (before): ' + autocomplete.getBounds()
    #setting bounds around new place
    biasCircle = new google.maps.Circle
      center: place.geometry.location
      radius: 500 #in kilometers
    autocomplete.setBounds(biasCircle.getBounds())
    console.log 'autocomplete bounds (after): ' + autocomplete.getBounds()

或通过特定位置

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));
var input = document.getElementById('searchTextField');
var options = {
  bounds: defaultBounds,
  types: ['establishment']
};
autocomplete = new google.maps.places.Autocomplete(input, options);

教程中的链接https://developers.google.com/maps/documentation/javascript/places-autocomplete#add_autocomplete

来自文档的链接https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete

相关文章：