Google Map API v3 - ustaw ograniczenia i centrum

Question

Niedawno przeszedłem na Google Maps API V3. Pracuję nad prostym przykładem, który kreśli znaczniki z tablicy, ale nie wiem, jak wyśrodkować i powiększyć automatycznie w odniesieniu do znaczników.

Przeszukałem sieć wysoką i niską, w tym własną dokumentację Google, ale nie znalazłem jednoznacznej odpowiedzi. Wiem, że mógłbym po prostu wziąć średnią z współrzędnych, ale jak ustawić zoom?

function initialize() { 
    var myOptions = { 
    zoom: 10, 
    center: new google.maps.LatLng(-33.9, 151.2), 


    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 

    setMarkers(map, beaches); 
} 


var beaches = [ 
    ['Bondi Beach', -33.890542, 151.274856, 4], 
    ['Coogee Beach', -33.423036, 151.259052, 5], 
    ['Cronulla Beach', -34.028249, 121.157507, 3], 
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2], 
    ['Maroubra Beach', -33.450198, 151.259302, 1] 
]; 

function setMarkers(map, locations) { 

    var image = new google.maps.MarkerImage('images/beachflag.png', 
     new google.maps.Size(20, 32), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 32)); 
    var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png', 

     new google.maps.Size(37, 32), 
     new google.maps.Point(0,0), 
     new google.maps.Point(0, 32)); 


     var lat = map.getCenter().lat(); 
     var lng = map.getCenter().lng();  


    var shape = { 
     coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
     type: 'poly' 
    }; 
    for (var i = 0; i < locations.length; i++) { 
    var beach = locations[i]; 
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     shadow: shadow, 
     icon: image, 
     shape: shape, 
     title: beach[0], 
     zIndex: beach[3] 
    }); 
    } 
} 

Answer 1

Got wszystko sortowane - patrz ostatnie kilka linijek kodu - (bounds.extend(myLatLng); map.fitBounds(bounds);)

function initialize() { 
    var myOptions = { 
    zoom: 10, 
    center: new google.maps.LatLng(0, 0), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(
    document.getElementById("map_canvas"), 
    myOptions); 
    setMarkers(map, beaches); 
} 

var beaches = [ 
    ['Bondi Beach', -33.890542, 151.274856, 4], 
    ['Coogee Beach', -33.923036, 161.259052, 5], 
    ['Cronulla Beach', -36.028249, 153.157507, 3], 
    ['Manly Beach', -31.80010128657071, 151.38747820854187, 2], 
    ['Maroubra Beach', -33.950198, 151.159302, 1] 
]; 

function setMarkers(map, locations) { 
    var image = new google.maps.MarkerImage('images/beachflag.png', 
    new google.maps.Size(20, 32), 
    new google.maps.Point(0,0), 
    new google.maps.Point(0, 32)); 
    var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png', 
    new google.maps.Size(37, 32), 
    new google.maps.Point(0,0), 
    new google.maps.Point(0, 32)); 
    var shape = { 
    coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
    type: 'poly' 
    }; 
    var bounds = new google.maps.LatLngBounds(); 
    for (var i = 0; i < locations.length; i++) { 
    var beach = locations[i]; 
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     shadow: shadow, 
     icon: image, 
     shape: shape, 
     title: beach[0], 
     zIndex: beach[3] 
    }); 
    bounds.extend(myLatLng); 
    } 
    map.fitBounds(bounds); 
} 

Answer 2

Tak, po prostu zadeklarować swój nowy obiekt granic.

var bounds = new google.maps.LatLngBounds(); 

Następnie dla każdego markera, przedłużyć swój obiekt bounds:

bounds.extend(myLatLng); 
map.fitBounds(bounds); 

API: google.maps.LatLngBounds

Answer 3

użycie poniżej jednego,

map.setCenter (bounds.getCenter(), map .getBoundsZoomLevel (bounds));

Answer 4

Metoda setCenter() nadal ma zastosowanie w najnowszej wersji interfejsu API Map dla Flash, w której funkcja fitBounds() nie istnieje.

Answer 5

Moja propozycja dla Google Maps API v3 będzie (nie sądzę, że można zrobić więcej na luzie):

gmap : { 
    fitBounds: function(bounds, mapId) 
    { 
     //incoming: bounds - bounds object/array; mapid - map id if it was initialized in global variable before "var maps = [];" 
     if (bounds==null) return false; 
     maps[mapId].fitBounds(bounds); 
    } 
} 

W rezultacie u będzie pasować do wszystkich punktów w granicach w oknie mapy.

Przykład działa idealnie i u swobodnie można ją sprawdzić tutaj www.zemelapis.lt

Answer 6

Odpowiedzi są idealne dla dostosowania granic na mapie, markery, ale jeśli chcesz poszerzyć granice Mapy Google dla kształtach, takich jak wielokąty i okręgi, można użyć następujące kody:

Dla Kół

bounds.union(circle.getBounds()); 

Dla wielokątów

polygon.getPaths().forEach(function(path, index) 
{ 
    var points = path.getArray(); 
    for(var p in points) bounds.extend(points[p]); 
}); 

Dla prostokąty

bounds.union(overlay.getBounds()); 

Dla polilinie

var path = polyline.getPath(); 

var slat, blat = path.getAt(0).lat(); 
var slng, blng = path.getAt(0).lng(); 

for(var i = 1; i < path.getLength(); i++) 
{ 
    var e = path.getAt(i); 
    slat = ((slat < e.lat()) ? slat : e.lat()); 
    blat = ((blat > e.lat()) ? blat : e.lat()); 
    slng = ((slng < e.lng()) ? slng : e.lng()); 
    blng = ((blng > e.lng()) ? blng : e.lng()); 
} 

bounds.extend(new google.maps.LatLng(slat, slng)); 
bounds.extend(new google.maps.LatLng(blat, blng));