it-swarm.com.de

Zoomen Sie auf alle Markierungen in Mapbox oder Leaflet

Wie kann ich die Ansicht so einstellen, dass alle Markierungen auf der Karte in Mapbox oder Leaflet angezeigt werden? Wie Google Maps API mit bounds?

Z.B:

var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < latlng.length; i++) {
  latlngbounds.extend(latlng[i]);
}
map.fitBounds(latlngbounds);
81
AHOYAHOY
var group = new L.featureGroup([marker1, marker2, marker3]);

map.fitBounds(group.getBounds());

Siehe die Dokumentation für weitere Informationen.

202
L. Sanna

Die "Antwort" hat aus einigen Gründen nicht funktioniert. Also hier ist was ich am Ende getan habe:

////var group = new L.featureGroup(markerArray);//getting 'getBounds() not a function error.
////map.fitBounds(group.getBounds());
var bounds = L.latLngBounds(markerArray);
map.fitBounds(bounds);//works!
16
IrfanClemson
var markerArray = [];
markerArray.Push(L.marker([51.505, -0.09]));
...
var group = L.featureGroup(markerArray).addTo(map);
map.fitBounds(group.getBounds());
15
malhal

Leaflet hat auch LatLngBounds, die wie Google Maps auch eine Erweiterungsfunktion haben.

http://leafletjs.com/reference.html#latlngbounds

Sie können also einfach Folgendes verwenden:

var latlngbounds = new L.latLngBounds();

Der Rest ist genau das Gleiche.

13
hassassin

Für Flugblatt verwende ich

    map.setView(markersLayer.getBounds().getCenter());
4
Yvonne Ng

Sie können auch alle Funktionen in einer FeatureGroup oder in allen FeatureGroups finden.

//Group1
m1=L.marker([7.11, -70.11]);
m2=L.marker([7.33, -70.33]);
m3=L.marker([7.55, -70.55]);
fg1=L.featureGroup([m1,m2,m3]);

//Group2
m4=L.marker([3.11, -75.11]);
m5=L.marker([3.33, -75.33]);
m6=L.marker([3.55, -75.55]);
fg2=L.featureGroup([m4,m5,m6]);

//BaseMap
baseLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var map = L.map('map', {
  center: [3, -70],
  zoom: 4,
  layers: [baseLayer, fg1, fg2]
});

//locate group 1
function LocateOne() {
    LocateAllFeatures(map, fg1);
}

function LocateAll() {
    LocateAllFeatures(map, [fg1,fg2]);
}

//Locate the features
function LocateAllFeatures(iobMap, iobFeatureGroup) {
		if(Array.isArray(iobFeatureGroup)){			
			var obBounds = L.latLngBounds();
			for (var i = 0; i < iobFeatureGroup.length; i++) {
				obBounds.extend(iobFeatureGroup[i].getBounds());
			}
			iobMap.fitBounds(obBounds);			
		} else {
			iobMap.fitBounds(iobFeatureGroup.getBounds());
		}
}
.mymap{
  height: 300px;
  width: 100%;
}
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<link href="https://unpkg.com/[email protected]/dist/leaflet.css" rel="stylesheet"/>

<div id="map" class="mymap"></div>
<button onclick="LocateOne()">locate group 1</button>
<button onclick="LocateAll()">locate All</button>

0
Es Noguera

der beste Weg ist, den nächsten Code zu verwenden

var group = new L.featureGroup([marker1, marker2, marker3]);

map.fitBounds(group.getBounds());

Viel Glück

0
Kais Tounsi