Tüm işaretçileri Mapbox veya Leaflet'e sığdırmak için yakınlaştırın

124

Nasıl haritadaki tüm işaretleri görmek için görünümünü ayarlamak do Mapbox veya broşürü ? Google Maps API'nin yaptığı gibi bounds?

Örneğin:

var latlngbounds = new google.maps.LatLngBounds();
for (var i = 0; i < latlng.length; i++) {
  latlngbounds.extend(latlng[i]);
}
map.fitBounds(latlngbounds);

leaflet mapbox

— AHOYAHOY
kaynak

264

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

map.fitBounds(group.getBounds());

Daha fazla bilgi için belgelere bakın .

— L. Sanna
kaynak

2

Bu çözümle ilgili sorun, işaretçi koordinatları tarafından verilen sınırların ötesine uzandığı için bazen kuzeydeki bir işaretçiyi kesebilmesidir.

— aaronbauman

77

@ user317946'dan: "map.fitBounds (markers.getBounds (). pad (0.5)); artık simgeler kesilmeyecek. :-)"

— lpapp

12

Tekerleği yeniden icat etmeden önce bunu Google'da araştırdığım için memnunum. Teşekkürler

— martynas

4

Herkes için açık olmaması durumunda ... Çoğu broşür nesnesinin sınırlarını elde edebilirsiniz. map.fitBounds (circle.getBounds ()); Örneğin.

— Ravendarksky

8

markers.getBounds().pad(<percentage>)Sınırları belirli bir yüzde oranında genişletmek istiyorsanız kullanabilirsiniz , ancak dolguyu piksel cinsinden ayarlamak için dolgu seçeneğini fitBounds'a da geçirebilirsiniz. markers.getBounds(), {padding: L.point(20, 20)})

— Alex Guerrero

21

'Cevap' benim için bazı nedenlerden işe yaramadı. İşte sonunda yaptığım şey:

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

Bunu yapmaya çalışıyorum ama Hata: LngLatLikealınıyor bağımsız değişkeni bir LngLat örneği, bir nesne {lng: <lng>, lat: <lat>} veya bir [<lng>, <lat>] dizisi olarak belirtilmelidir. Herhangi bir fikir?

— returnvoid

18

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

— malhal
kaynak

1

AddTo (map) olmadan çalışır: map.fitBounds (L.featureGroup (markerArray) .getBounds ()); bu herhangi bir fark yaratacak mı?

— Lucas Steffen

15

Leaflet ayrıca, tıpkı google maps gibi bir genişletme işlevi olan LatLngBounds'a da sahiptir.

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

Yani şunları kullanabilirsiniz:

var latlngbounds = new L.latLngBounds();

Gerisi tamamen aynı.

— hassassin
kaynak

3

Teşekkür ederim! Benim için çözüm, yukarıdaki Cevap başına, 'getBounds () bir işlev değil döndürüyordu. Bu yüzden önerinize göre kodumu değiştirdim. Kendi Cevabımda var.

— IrfanClemson

6

Leaflet için kullanıyorum

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

— Yvonne Ng
kaynak

Chrome'da tek bir işaretleyiciyle çalışabileceğim tek çözüm buydu

— Tim Styles

2

Bir FeatureGroup veya tüm featureGroups içindeki tüm unsurları da bulabilir, nasıl çalıştığını görebilirsiniz!

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

Snippet'i genişlet

— Es Noguera
kaynak

1

Yalnızca görünür işaretleyicilere sığdırmak için bu yöntemi uyguladım.

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
kaynak

-2

En iyi yol, sonraki kodu kullanmaktır

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

map.fitBounds(group.getBounds());

— Kais Tounsi
kaynak

2

benzer bir cevap var

— AHOYAHOY