网站Google Maps搜索框城市建议与当前位置不符问题咨询

看起来你已经成功获取了用户位置并初始化了地图，但Google Places的自动补全功能默认不会自动关联到你的地图位置——得手动给它配置「位置偏向」才行～下面是具体的解决步骤：

1. 先确认加载了Places库 #

加载Google Maps JS API时，一定要带上places库，不然自动补全功能没法正常工作：

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

2. 给Autocomplete绑定位置限制 #

在你的initialize函数里，创建Autocomplete实例的时候，通过配置项让建议优先匹配你的目标位置，有两种常用方式：

方式一：绑定到地图当前视野边界 #

这样搜索建议会优先显示地图当前范围内的地点，当地图移动缩放时还能自动更新：

function initialize(position) {
  var thePoint = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var mapOptions = {
    zoom: 14,
    center: thePoint
  };
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  // 获取你的搜索输入框元素
  var input = document.getElementById('your-search-input-id');
  // 创建Autocomplete实例，绑定地图边界
  var autocomplete = new google.maps.places.Autocomplete(input, {
    bounds: map.getBounds(), // 用当前地图的视野边界做限制
    types: ['(cities)'] // 如果只需要城市类建议，加上这个类型过滤
  });

  // 可选：当地图视野变化时，自动更新Autocomplete的边界
  google.maps.event.addListener(map, 'bounds_changed', function() {
    autocomplete.setBounds(map.getBounds());
  });
}

方式二：基于用户当前位置设置固定搜索半径 #

如果不想跟着地图视野变，而是固定以用户当前位置为中心，设置一个搜索半径（比如50000米=50公里）：

function initialize(position) {
  var thePoint = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var mapOptions = {
    zoom: 14,
    center: thePoint
  };
  map = new google.maps.Map(document.getElementById('map'), mapOptions);

  var input = document.getElementById('your-search-input-id');
  var autocomplete = new google.maps.places.Autocomplete(input, {
    location: thePoint, // 以用户当前位置为中心
    radius: 50000, // 搜索半径，单位是米
    types: ['(cities)']
  });
}

3. 额外优化：强制只显示范围内结果 #

如果上面的设置还不够精准，可以开启strictBounds参数（设置为true后，只会返回边界内的结果，但可能会过滤掉一些边缘相关的地点，按需使用）：

var autocomplete = new google.maps.places.Autocomplete(input, {
  bounds: map.getBounds(),
  strictBounds: true, // 只返回边界内的结果
  types: ['(cities)']
});

这样配置后，搜索框的城市建议就会优先匹配和用户当前位置或地图中心相关的结果啦～

内容的提问来源于stack exchange，提问作者David TG