2015-09-30 10 views
7

Di seguito un esempio, si può vedere il plunker suo http://plnkr.co/edit/lJHyP3dhT3v8aHVdt3D3?p=previewZoom automaticamente la mappa per adattarsi a tutti i marcatori

Indipendentemente da qualsiasi valore di zoom è fornito mentre initializitng mappa, voglio per ingrandire la mappa automaticamente in modo che tutti i marcatori sono all'interno della vista. Ecco il mio codice

var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
     maxZoom: 18, 
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Points &copy 2012 LINZ' 
    }), 
    latlng = L.latLng(-37.82, 175.24); 

var map = L.map('map', {center: latlng, zoom: 10, layers: [tiles]}); 

var markers = L.markerClusterGroup(); 

for (var i = 0; i < addressPoints.length; i++) { 
    var a = addressPoints[i]; 
    var title = a[2]; 
    var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title }); 
    marker.bindPopup(title); 
    markers.addLayer(marker); 
} 

map.addLayer(markers); 

var group = new L.featureGroup(markers); 

map.fitBounds(group.getBounds()); 

risposta

10

È necessario

  • creare un array

  • spingere tutti i marcatori in serie

  • una volta che tutti i marcatori vengono aggiunti alla matrice, creare un featureGroup
  • aggiungi il tuo array di indicatori a featureGroup e quindi allo zoo m ai suoi limiti.

Di seguito si riporta il codice modificato

var markerArray = []; //create new markers array 

for (var i = 0; i < addressPoints.length; i++) { 
    var a = addressPoints[i]; 
    var title = a[2]; 
    var marker = L.marker(new L.LatLng(a[0], a[1]), { title: title }); 
    marker.bindPopup(title); 
    markers.addLayer(marker); 

    markerArray.push(marker); //add each markers to array 

    if(i==addressPoints.length-1){//this is the case when all the markers would be added to array 
     var group = L.featureGroup(markerArray); //add markers array to featureGroup 
     map.fitBounds(group.getBounds()); 
    } 
} 

Qui è la lavorazione plunk