web-dev-qa-db-de.com

Google MAP API v3: Zentrierte und vergrößerte Anzeige der angezeigten Marken

Ich verwende den folgenden Code, um Markierungen auf meiner Karte zu setzen:

  var latLngs = []
  $.each(locations.markers, function(i, m){
   var myLatLng = new google.maps.LatLng(m.latitude, m.longitude);
   latLngs[i] = myLatLng                                          
   var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    shadow: shadow,
    icon: image,
    shape: shape,
    title: m.city,
    zIndex: i
   });
  }) 

Die Markierungen werden auf meiner Karte angezeigt. Jetzt möchte ich die Karte auf diese Markierungen zentrieren und zoomen. Wie kann ich das erreichen? Ich habe es versucht:

map.fitBounds(getBoundsForLatLngs(latLngs));

Das console.log von latLngs gibt aus:

 [(46.793182, 7.146903) { b=46.793182,  more...}, (46.8077779, 7.1709386) { b=46.8077779,  more...}]

Aber es scheint nicht zu funktionieren und ich bekomme keine Fehlermeldung in der Konsole. Was mache ich falsch?

55
meo

Ich habe auch dieses Update gefunden, dass Zooms auf alle Marker passen

LatLngList: ein Array von Instanzen von latLng , zum Beispiel:

// "map" is an instance of GMap3

var LatLngList = [
                     new google.maps.LatLng (52.537,-2.061), 
                     new google.maps.LatLng (52.564,-2.017)
                 ],
    latlngbounds = new google.maps.LatLngBounds();

LatLngList.forEach(function(latLng){
   latlngbounds.extend(latLng);
});

// or with ES6:
// for( var latLng of LatLngList)
//    latlngbounds.extend(latLng);

map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds); 
126
vsync

Wenn Sie einen funktionaleren Stil bevorzugen:

// map - instance of google Map v3
// markers - array of Markers
var bounds = markers.reduce(function(bounds, marker) {
    return bounds.extend(marker.getPosition());
}, new google.maps.LatLngBounds());

map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
17
Paweł Rychlik

Probieren Sie diese Funktion aus .... es funktioniert ...

$(function() {
        var myOptions = {
            zoom: 10,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
        var latlng_pos=[];
        var j=0;
         $(".property_item").each(function(){
            latlng_pos[j]=new google.maps.LatLng($(this).find(".latitude").val(),$(this).find(".longitude").val());
            j++;
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng($(this).find(".latitude").val(),$(this).find(".longitude").val()),
                // position: new google.maps.LatLng(-35.397, 150.640),
                map: map
            });
        }
        );
        // map: an instance of google.maps.Map object
        // latlng: an array of google.maps.LatLng objects
        var latlngbounds = new google.maps.LatLngBounds( );
        for ( var i = 0; i < latlng_pos.length; i++ ) {
            latlngbounds.extend( latlng_pos[ i ] );
        }
        map.fitBounds( latlngbounds );



    });
2
Somnath Muluk

für Mitte und Auto-Zoom auf Display-Markierungen 

// map: an instance of google.maps.Map object

// latlng_points_array: an array of google.maps.LatLng objects

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

    for ( var i = 0; i < latlng_points_array.length; i++ ) {
        latlngbounds.extend( latlng_points_array[i] );
    }

map.fitBounds( latlngbounds );
0
user7357635