Zoomen Sie, um alle Markierungen in Mapbox oder Leaflet anzupassen

124

Wie stelle ich die Ansicht so ein, dass alle Markierungen auf der Karte in Mapbox oder Leaflet angezeigt werden ? Wie macht 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);

leaflet mapbox

— AHOYAHOY
quelle

263

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

map.fitBounds(group.getBounds());

Weitere Informationen finden Sie in der Dokumentation .

— L. Sanna
quelle

2

Das Problem bei dieser Lösung besteht darin, dass sie manchmal einen nördlichen Marker abschneiden kann, da sich der Marker über die durch seine Koordinaten vorgegebenen Grenzen hinaus erstreckt.

— Aaronbauman

77

von @ user317946: "map.fitBounds (marker.getBounds (). pad (0.5)); jetzt werden die Symbole nicht abgeschnitten. :-)"

— lpapp

12

Ich bin froh, dass ich das gegoogelt habe, bevor ich das Rad neu erfunden habe. Danke

— Martynas

4

Nur für den Fall, dass es für niemanden offensichtlich ist ... Sie können Grenzen für die meisten Flugblattobjekte erhalten. map.fitBounds (circle.getBounds ()); beispielsweise.

— Ravendarksky

8

Sie können verwenden, markers.getBounds().pad(<percentage>)wenn Sie Grenzen um einen bestimmten Prozentsatz erweitern möchten, aber Sie können die Auffülloption auch an fitBounds übergeben, um die Auffüllung in Pixel festzulegen. markers.getBounds(), {padding: L.point(20, 20)})

— Alex Guerrero

21

Die 'Antwort' hat aus einigen Gründen nicht funktioniert. Folgendes habe ich also getan:

////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!

— IrfanClemson
quelle

Der Versuch, dies zu tun, aber das Fehler: LngLatLikeArgument zu erhalten, muss als LngLat-Instanz, als Objekt {lng: <lng>, lat: <lat>} oder als Array von [<lng>, <lat>] angegeben werden. Irgendeine Idee?

— Rückkehr

18

var markerArray = [];
markerArray.push(L.marker([51.505, -0.09]));
...
var group = L.featureGroup(markerArray).addTo(map);
map.fitBounds(group.getBounds());

— malhal
quelle

1

Es funktioniert ohne addTo (map): map.fitBounds (L.featureGroup (markerArray) .getBounds ()); Wird dies einen Unterschied machen?

— Lucas Steffen

15

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

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

Sie können also einfach Folgendes verwenden:

var latlngbounds = new L.latLngBounds();

Der Rest ist genau das gleiche.

— Hassassin
quelle

3

Danke dir! Für mich war die Lösung gemäß der obigen Antwort, 'getBounds () zurückzugeben, ist keine Funktion. Also habe ich meinen Code gemäß Ihrem Vorschlag geändert. Ich habe es in meiner eigenen Antwort.

— IrfanClemson

6

Für die Broschüre verwende ich

    map.setView(markersLayer.getBounds().getCenter());

— Yvonne Ng
quelle

Dies war die einzige Lösung, die ich mit einem einzelnen Marker in Chrome arbeiten konnte

— Tim Styles

2

Sie können auch alle Funktionen in einer FeatureGroup oder allen FeatureGroups finden. Sehen Sie, wie es funktioniert!

//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/leaflet@1.3.1/dist/leaflet.js"></script>
<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet"/>

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

Erweitern Sie das Snippet

— Es Noguera
quelle

1

Um nur auf die sichtbaren Markierungen zu passen, habe ich diese Methode.

fitMapBounds() {
    // Get all visible Markers
    const visibleMarkers = [];
    this.map.eachLayer(function (layer) {
        if (layer instanceof L.Marker) {
            visibleMarkers.push(layer);
        }
    });

    // Ensure there's at least one visible Marker
    if (visibleMarkers.length > 0) {

        // Create bounds from first Marker then extend it with the rest
        const markersBounds = L.latLngBounds([visibleMarkers[0].getLatLng()]);
        visibleMarkers.forEach((marker) => {
            markersBounds.extend(marker.getLatLng());
        });

        // Fit the map with the visible markers bounds
        this.map.flyToBounds(markersBounds, {
            padding: L.point(36, 36), animate: true,
        });
    }
}

— Rami Alloush
quelle

-2

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

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

map.fitBounds(group.getBounds());

— Kais Tounsi
quelle

2

Es gibt eine ähnliche Antwort

— AHOYAHOY