基于Google Maps JS API实现多边界优先的餐饮场所自动完成字段的问题

嘿，我来帮你搞定这个Google Places Autocomplete的问题！你的两个需求其实都有可行的解决方案，咱们一步步来拆解：

1. 优先显示同时靠近两个办公点的餐饮场所 #

你提到用LatLngBounds传入两个点没达到预期，这是因为LatLngBounds是生成一个包含两个点的最小矩形区域，而不是“同时靠近两个点”的核心区域。要实现优先显示两个办公点附近的场所，更合理的方式是：

• 计算两个办公点的中心点
• 以中心点为基准，设置一个合适的搜索半径（比如两个点距离的一半），让Autocomplete优先返回这个核心区域内的结果

这样就能确保结果更贴近“同时靠近两个办公点”的需求，而不是分散在整个矩形里。

2. 仅显示餐饮类场所 #

你之前以为Autocomplete不支持餐饮类型，其实是可以的！把types参数从['establishment']改成['restaurant']，就能直接限定结果为餐饮类场所，不用再过滤其他商业机构。

修改后的完整代码示例 #

<script type="text/javascript">
// 定义两个办公点的经纬度（注意：你的第二个经度200.2631超出了有效范围[-180, 180]，需要修正为合法值）
const office1 = new google.maps.LatLng(-33.8902, 151.1759);
const office2 = new google.maps.LatLng(-60.8474, 170.2631); // 修正后的经度示例

// 计算两个点的中心点
function getCenter(pointA, pointB) {
  const centerLat = (pointA.lat() + pointB.lat()) / 2;
  const centerLng = (pointA.lng() + pointB.lng()) / 2;
  return new google.maps.LatLng(centerLat, centerLng);
}

// 计算两个点之间的距离（单位：米），设置搜索半径为距离的一半
const centerPoint = getCenter(office1, office2);
const distanceBetweenOffices = google.maps.geometry.spherical.computeDistanceBetween(office1, office2);
const searchRadius = distanceBetweenOffices / 2;

// 初始化Autocomplete
const input = document.getElementById('searchTextField');
const options = {
  location: centerPoint,
  radius: searchRadius,
  types: ['restaurant'], // 仅显示餐饮类场所
  strictBounds: false // 设为true会强制结果在半径范围内，按需调整
};

const autocomplete = new google.maps.places.Autocomplete(input, options);
</script>

额外说明 #

• 如果你需要更严格的“同时靠近两个点”（比如结果到两个办公点的距离都不超过N米），可以在place_changed事件中获取选中的地点，用google.maps.geometry.spherical.computeDistanceBetween计算距离，不符合条件的话提示用户，但这种方式会增加交互复杂度，一般中心点+半径的方案已经能满足大部分场景。
• 记得确保你的Google Maps API已经启用了Places API和Geometry API（因为用到了距离计算）。

内容的提问来源于stack exchange，提问作者Blake Rivell