Как увеличить карту Google в процентах от маркеров

Question

Довольно просто увеличить границы карты Google до всех маркеров.

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

Что я хотел бы сделать, так это динамически увеличить границы карты Google до процента от маркеров.

Например, если есть карта с несколькими удаленными маркерами, я бы хотел увеличить границы до 70% маркеров.

Я мог бы сделать это программно, просматривая всемаркеры, идентифицирующие 70%, которые являются самыми близкими друг к другу и устанавливающие границы вокруг них.(Если я пойду по этому пути, я выложу код вверх.)

Но мне было интересно, есть ли существующая функциональность, которая допускает такое поведение.

Answer 1

Я использовал следующий подход - рабочий пример на: 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
}

Answer 2

Как я уже упоминал в своем комментарии - почему бы не взять границы своих маркеров, а затем уменьшить их на 30%.

Вы можете использовать функции getNorthEast () и getSouthWest () для объекта bounds и уменьшить ихкоординаты на требуемое количество, затем заново создайте новый объект границ.с результатом.

Это то, что я сделал, чтобы увеличить его на 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.LatLng Ограничения документации здесь:

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