如何将谷歌地图缩放到一定比例的标记

Question

将谷歌地图缩放到所有标记是相当简单的。

var position = new google.maps.LatLng(lat, lng);
bounds.extend(position);
map.fitBounds(bounds);

我想做的是将谷歌地图边界动态缩放到标记的百分比。

例如，如果有一个包含许多外围标记的地图，我想将边界缩放到标记的 70%。

我可以通过编程方式遍历所有标记，识别彼此最接近的 70% 并设置它们周围的边界。(如果我沿着这条路走下去，我会发布代码(。

但我想知道是否有现有的功能允许这种行为。

Answer 1

正如我在评论中提到的 - 为什么不采用标记的边界，然后将其减少 30%。

您可以在边界对象上使用 getNorthEast(( 和 getSouthWest(( 函数，并将这些坐标减少所需的量，然后重新创建一个新的边界对象。

这就是我所做的将其增加 10%。 您可以做类似的事情将其减少 30%;

var increasePercentage = 1.10;  //10%
var pointSouthWest = markerBounds.getSouthWest();
var latAdjustment = (pointNorthEast.lat() - pointSouthWest.lat()) * (increasePercentage - 1);
var lngAdjustment = (pointNorthEast.lng() - pointSouthWest.lng()) * (increasePercentage - 1);
var newPointNorthEast = new google.maps.LatLng(pointNorthEast.lat() + latAdjustment, pointNorthEast.lng() + lngAdjustment);
var newPointSouthWest = new google.maps.LatLng(pointSouthWest.lat() - latAdjustment, pointSouthWest.lng() - lngAdjustment);
bounds = new google.maps.LatLngBounds();
bounds.extend(newPointNorthEast);
bounds.extend(newPointSouthWest);
map.fitBounds(bounds);

google.maps.LatLngBounds文档在这里：

https://developers.google.com/maps/documentation/javascript/reference/3/coordinates#LatLngBounds

Answer 2

我使用了以下方法 - 工作示例： https://jsfiddle.net/BaronGrivet/dm4Lhzg6/26/

var map;
var markers = [];
var bounds = [];
var centreLat = 37.422000;
var centreLng = -122.084057;
$(document).ready(initMap());
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: centreLat,
lng: centreLng
},
zoom: 1,
disableDefaultUI: true
});
for (i = 0; i < 100; i++) { 
var lat = getRandomInRange(-45, 45, 3);
var lng = getRandomInRange(-180, 180, 3);
var position = new google.maps.LatLng(lat, lng);
markers[i] = new google.maps.Marker({
position: position,
map: map,
icon: 'http://maps.google.com/mapfiles/ms/icons/red-dot.png'
});
markers[i].distance = distanceBetween(lat, lng, centreLat, centreLng);    
}
}
function zoomMapToMarkers(percent) {
var bounds = new google.maps.LatLngBounds();
var numberOfMarkers = parseInt(markers.length * (percent / 100));
markers.sort(compareDistance);
markers.forEach(function(marker) {
if (numberOfMarkers > 0) {
bounds.extend(marker.position);
marker.setIcon( 'http://maps.google.com/mapfiles/ms/icons/green-dot.png');
numberOfMarkers--;
} else {
marker.setIcon( 'http://maps.google.com/mapfiles/ms/icons/red-dot.png');
}
});
map.fitBounds(bounds);
}
function distanceBetween(lat1, lng1, lat2, lng2) {
var lat = lat1 - lat2;
var lng = lng1 - lng2;
return Math.sqrt(lat * lat + lng * lng);
}
function compareDistance(a, b) {
if (a.distance < b.distance)
return -1;
if (a.distance > b.distance)
return 1;
return 0;
}

//From https://stackoverflow.com/a/6878845/348485
function getRandomInRange(from, to, fixed) {
return (Math.random() * (to - from) + from).toFixed(fixed) * 1;
// .toFixed() returns string, so ' * 1' is a trick to convert to number
}