Mapbox या USC में सभी मार्करों को फिट करने के लिए ज़ूम इन करें

124

मैं कैसे में मानचित्र पर सभी मार्कर को देखने के लिए दृश्य सेट कर MapBox या पत्रक ? जैसे Google मैप्स API के साथ होता है bounds?

उदाहरण के लिए:

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

leaflet mapbox

— AHOYAHOY
स्रोत

264

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

map.fitBounds(group.getBounds());

अधिक जानकारी के लिए दस्तावेज़ देखें ।

— एल। सना
स्रोत

2

इस समाधान के साथ समस्या यह है कि यह कभी-कभी एक नॉथली मार्कर से कट सकता है, क्योंकि मार्कर अपने निर्देशांक द्वारा दिए गए सीमा के बादलों का विस्तार करता है।

— अनारोनबूमन

77

@ user317946 से: "map.fitBounds (markers.getBounds ()। पैड (0.5)), अब आइकन कट नहीं जाएंगे। :-)"

— lpapp

12

मुझे खुशी है कि पहिए को फिर से लगाने से पहले मैंने इसे गॉगल कर लिया। धन्यवाद

— Martynas

4

बस के मामले में यह किसी के लिए स्पष्ट नहीं है ... आप सबसे पत्रक वस्तुओं की सीमा प्राप्त कर सकते हैं। map.fitBounds (circle.getBounds ()); उदाहरण के लिए।

— रवेन्दर्स्की

8

markers.getBounds().pad(<percentage>)यदि आप किसी दिए गए प्रतिशत द्वारा सीमा का विस्तार करना चाहते हैं, तो आप उपयोग कर सकते हैं, लेकिन पिक्सल में पैडिंग सेट करने के लिए आप फ़िटिंग सीमा के लिए पैडिंग विकल्प भी पास कर सकते हैं। markers.getBounds(), {padding: L.point(20, 20)})

— एलेक्स गुरेरो

21

'उत्तर' मेरे लिए कुछ कारणों से काम नहीं आया। तो यहाँ है कि मैं क्या कर रहा है:

////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
स्रोत

ऐसा करने की कोशिश कर रहा है, लेकिन त्रुटि हो रही है: LngLatLikeतर्क को LngLat उदाहरण, ऑब्जेक्ट {lng: <lng>, lat: <lat>}, या [<lng>, <lat>] के एक सरणी के रूप में निर्दिष्ट किया जाना चाहिए। कोई उपाय?

— वापसी

18

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

— malhal
स्रोत

1

यह addTo (मैप) के बिना काम करता है: map.fitBounds (L.featureGroup (मार्कर)) .getBounds ()); क्या इससे कोई फर्क पड़ेगा?

— लुकास स्टेफेन

15

USC में लैटलैंगबाउंड्स भी हैं, जिसमें गूगल मैप्स की तरह ही एक विस्तार कार्य भी है।

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

तो आप बस का उपयोग कर सकते हैं:

var latlngbounds = new L.latLngBounds();

बाकी बिलकुल वैसा ही।

— hassassin
स्रोत

3

धन्यवाद! मेरे लिए समाधान, ऊपर दिए गए उत्तर के अनुसार, 'गेटबाउंड्स () एक फ़ंक्शन नहीं था। इसलिए मैंने आपके सुझाव के अनुसार अपना कोड बदल दिया। मेरे पास इसका जवाब है।

— इरफानकेलेमसन

6

यूएससी के लिए, मैं उपयोग कर रहा हूं

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

— Yvonne एनजी
स्रोत

यह एकमात्र समाधान था जो मुझे क्रोम में एक मार्कर के साथ काम करने के लिए मिल सकता था

— टिम स्टाइल्स

2

आप एक फ़ीचरग्रुप या सभी फ़ीचरग्रुप के अंदर सभी विशेषताओं का पता लगा सकते हैं, देखें कि यह कैसे काम करता है!

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

स्निपेट का विस्तार करें

— ईएस नोगुएरा
स्रोत

1

केवल दृश्यमान मार्करों में फिट होने के लिए, मेरे पास यह तरीका है।

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,
        });
    }
}

— रामी अल्लोह
स्रोत

-2

सबसे अच्छा तरीका अगले कोड का उपयोग करना है

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

map.fitBounds(group.getBounds());

— कैस टौन्सी
स्रोत

2

इसी तरह का जवाब है

— AHOYAHOY