如何围绕区域或标记居中？

Question

我有一张地图显示用户的“签到”。我需要在2个场景中首次展示这张地图：

1. 用户从未登记过：在这种情况下，我想缩小到显示特定“区域”的级别。该地区被称为“西开普省，南非”。所以基本上是这个map，但是放大了，所以红色区域位于地图的远边，你只能看到它。
2. 如果用户已登记到一个或多个地方，我想放大，以便用户只能看到他已登记过的地点的特写视图。例如：



所以红色“块”是我想在地图上看到的区域。不是整个午睡。

这是我创建地图的方式：

mapDiv = document.getElementById('map');
map = new google.maps.Map(mapDiv, {
    center: markerLocation,
    zoom: zoomLevel, 
});

然后我为签到添加“标记”：

marker = new google.maps.Marker({
    position: markerLocation,
    label: '',
    icon: 'img/map_marker.png', 
    map: map
});

所以我的猜测是我需要专注于“缩放级别”。因为这决定了地图的显示量。但请记住，此地图具有响应性，因此高度和宽度会有所不同。此外，标记可以放置在各种不同的地方。

那么如何计算ZoomLevel只显示相关信息？即只有包含地图标记的区域，或者如果没有地图标记，则只包括西开普省的区域？

更新

我认为对于第一个问题，我可以找到西开普省的中心并将其用作地图的“中心”。这很容易。如果只有一次办理登机手续，这也很容易。但如果办理登机手续的次数超过1，您如何找到地图的中心？事实上，即使2分也许不会太难，但你怎么找到许多分数的中心？！

Answer 1

google.maps.LatLngBounds是一个对象，旨在包含矩形边界。它可以通过两种方式创建：

1. 将其作为参数传递给constructior：var my_bounds = new google.maps.LatLngBounds({east: -34, north: 151, south: -34, west: 151});
2. 或创建空var my_bounds = new google.maps.LatLngBounds();这将创建一个没有坐标的边界，并且您将使用extend方法添加到它们中的任何坐标将对它们进行扩展。因此，如果extend使用坐标lat:20, lng:-12，那么您将获得{e:20, n:-12, s:-12, w:20}的界限，那么如果extend进一步lat:22, lng:10，您将获得边界{e:22, n:10, s:-12, w:20}等等。

google.maps.Map函数fitBounds(bounds)的工作方式是计算最接近的缩放级别以包含您创建的边界（视口可能大于bounds传递的但是永远不会更小）和一个中心，它是bounds矩形的中心，然后使用计算出的值缩放和居中地图。

所以要解决你的问题：

1.要缩放到＆＃34;西开普省，南非＆＃34;，使用此区域的硬编码值创建一个边界，即cca south:-34.985081, west:17.811984, north:-30.016613, east:24.265440并将视口放入其中，这样您就可以：

var western_cape_bounds = new google.maps.LatLngBounds({east: 24.265440, north: -30.016613, south: -34.985081, west: 17.811984});
map.fitBounds(western_cape_bounds);

2.如果你有很多标记，那么你需要遍历所有标记，extend边界，然后将视口放入其中：

var marker_bounds = new google.maps.LatLngBounds();
for(var i = 0; i < markers.length; i++){
    marker_bounds.extend(markers[i].getPosition());
    //alternatively, if you don't have markers created yet, you can extend the bounds like this: marker_bounds.extend({lat: MY_LAT, lng:MY_LNG});
}
map.fitBounds(marker_bounds);

Answer 2

您可以使用fitBounds方法将视口设置为包含给定的边界（documentation）

var myBounds = new google.maps.LatLngBounds();
myBounds.extend(myMarker1);
myBounds.extend(myMarker2);

map.fitBounds(myBounds);