如何使用 2 个标记和 InfoWindow 拟合边界地图

Question

我需要在我的地图上放置几个标记，并且还需要在其中一个上显示信息窗口。所有这些东西都应该在地图视口内。我正在尝试使用此代码来获取 InfoWindow 左上角、右上角和 2 个标记的边界：

function calculateWaypointsBounds(attraction, destination, client, infoBox, map){

  const bounds = new google.maps.LatLngBounds();
  bounds.extend(new google.maps.LatLng(attraction.lat, attraction.lon));
  bounds.extend(new google.maps.LatLng(client.lat, client.lon));
  bounds.extend(new google.maps.LatLng(destination.lat, destination.lon));

  const div = infoBox.content_;

  const projectionCoords = infoBox.getProjection().fromLatLngToContainerPixel(new google.maps.LatLng(attraction.lat, attraction.lon));
  const leftTop = new google.maps.Point(projectionCoords.x - div.offsetWidth / 2, projectionCoords.y - 400);
  const rightTop = new google.maps.Point(projectionCoords.x + div.offsetWidth / 2, projectionCoords.y - 400);
  const ltCoords = infoBox.getProjection().fromContainerPixelToLatLng(leftTop);
  const rtCoords = infoBox.getProjection().fromContainerPixelToLatLng(rightTop);

  bounds.extend(ltCoords);
  bounds.extend(rtCoords); //InfoWindow always shows above marker, so i'm need only top left and top right corners.



  return bounds;
}

但看起来我的想法是错误的。我该怎么做呢 infoWindow 和我的 2 个标记总是在地图视口内。

Answer 1

var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
    bounds.extend(markers[i].getPosition());
}

维护一个数组中所有标记的列表（在 :: 标记上方）。继续扩展循环中所有标记的边界，然后使用以下代码将其应用于地图对象：

mapObject.fitBounds(bounds);

这将自动缩小地图以适应您的所有标记及其信息窗口。希望这对你有帮助....