Mapbox 또는 Leaflet의 모든 마커에 맞게 확대

Mapbox 또는 Leaflet의 모든 마커에 맞게 확대

---

Mapbox 또는 Leaflet 에서지도의 모든 마커를 보려면보기를 어떻게 설정 합니까? Google Maps API와 마찬가지로 bounds?

예 :

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

---

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

map.fitBounds(group.getBounds());

자세한 내용 은 문서 를 참조하십시오.

---

'답변'이 어떤 이유로 작동하지 않았습니다. 그래서 여기에 내가 한 일이 있습니다.

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

---

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

---

Leaflet에는 Google지도와 마찬가지로 확장 기능도있는 LatLngBounds도 있습니다.

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

따라서 다음을 간단히 사용할 수 있습니다.

var latlngbounds = new L.latLngBounds();

나머지는 똑같 습니다.

---

Leaflet의 경우

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

---

또한 FeatureGroup 또는 모든 featureGroups 내에서 모든 기능을 찾을 수 있으며 작동 방식을 확인할 수 있습니다!

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

---

가장 좋은 방법은 다음 코드를 사용하는 것입니다.

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

map.fitBounds(group.getBounds());

참고URL : https://stackoverflow.com/questions/16845614/zoom-to-fit-all-markers-in-mapbox-or-leaflet