如何在地区或标记周围放置地图？

-1

我有一张地图显示用户的“签到”。我需要在2种情况，以应付这个地图的第一时间显示：如何在地区或标记周围放置地图？

该用户从未签到：在这种情况下，我想缩小到这样的水平，这显示特定“区域”。该地区被称为“南非西开普省”。所以基本上这个map，但放大，所以红色区域在地图的边缘，你只能看到。
如果用户已经签入到一个或多个地方，我想放大，使用户只看到他在已经检查到的地方的特写图例如：

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

这是我如何创建地图：

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来仅显示相关信息呢？即只有包含地图标记的区域，或者如果没有地图标记，则只包含西开普省的区域？

UPDATE

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

来源

2016-06-11 coderama

google.maps.LatLngBounds是一个对象，其被设计成容纳矩形边界。它可以通过两种方式创建：

通过传递它的边界作为参数到constructior：var my_bounds = new google.maps.LatLngBounds({east: -34, north: 151, south: -34, west: 151});
或者创建空var my_bounds = new google.maps.LatLngBounds();这将创建一个没有坐标的边界，并且您将使用方法添加到它们中的任何坐标，将对它们进行放大。所以如果你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.To变焦“西开普省，南非”，创建这个区域，这是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);

来源

2016-06-11 11:25:22

可以使用fitBounds方法来设置视口以包含指定界限（documentation）

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

map.fitBounds(myBounds);

来源

2016-06-11 08:24:24 antonio

如何在地区或标记周围放置地图？

回答

相关问题