使用Google Maps JavaScript API创建带有多个边界的食品场所/餐厅自动填充字段

时间:2018-01-02 14:39:52

标签: javascript google-maps google-maps-api-3 google-places-api google-maps-api-2

我正在尝试创建一个食品场所/餐厅Autocomplete字段,它执行以下操作:

  1. 优先考虑Office 1和Office 2(纬度/经度)附近的食品场所/餐厅。 (看起来当您传递多个LatLng组合作为边界时,它不会这样做。想要确认它是不可能的。)
  2. 仅显示与食物相关的地方。 (我相信使用自动填充功能这是不可能的,因为它仅限于传入某些地方类型)
  3. 这是我能够达到的最接近的目标。但是,如果我为Office 1或Office 2传递单个LatLng,但它们不能同时传递,它只能正常工作。

    <script type="text/javascript">
    var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-33.8902, 151.1759),
      new google.maps.LatLng(-60.8474, 200.2631));
    
    var input = document.getElementById('searchTextField');
    var options = {
      bounds: defaultBounds,
      types: ['establishment']
    };
    
    autocomplete = new google.maps.places.Autocomplete(input, options);
    </script>
    

1 个答案:

答案 0 :(得分:1)

LatLngBounds将西南坐标作为其第一个参数,将东北作为第二个参数。在你的例子中,你的第二个坐标比第一个坐标更南,因此边界无效:

无论点的相对位置如何,这种替代方案都应该起作用:

var defaultBounds = new google.maps.LatLngBounds(new google.maps.LatLng(-33.8902, 151.1759));
defaultBounds.extend(new google.maps.LatLng(-60.8474, 200.2631));