Падагнаць па памеры ўсе маркеры ў MapBox або ўлётка

Як наладзіць выгляд, каб убачыць усё маркеры на карце ў <�моцны> MapBox або <�моцны> ўлётка ? Як Google Maps API робіць з межы ?

напрыклад:

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

11 адказы

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

 map.fitBounds(group.getBounds());

Глядзіце тут для атрымання дадатковай інфармацыі.

176
дададзена
Вы можаце выкарыстоўваць markers.getBounds (). Пэд (<�працэнт>) , калі вы хочаце пашырыць межы на пэўны працэнт, але вы можаце таксама перадаць параметр водступу ў fitBounds для таго, каб усталяваць водступы ў пікселях , <�Код> markers.getBounds (), {абіўка: L.point (20, 20)})
дададзена аўтар Alex Guerrero, крыніца
вельмі карысна +1
дададзена аўтар Javascript Coder, крыніца
ад @ user317946: "map.fitBounds (. markers.getBounds() пляцоўкі (0,5)), цяпер абразкі звычай адрэзаць :-)"
дададзена аўтар lpapp, крыніца
Я рады, што я Googled гэта раней вынаходзіць кола. дзякуй
дададзена аўтар martynas, крыніца
Праблема з гэтым рашэннем з'яўляецца тое, што ён часам можа адрэзаць паўночны маркер, так як маркер праходзіць beyonds мяжы, дадзеныя яе каардынаты.
дададзена аўтар aaronbauman, крыніца
Толькі ў выпадку, калі гэта не відавочна для тых, хто ... Вы можаце атрымаць мяжы большасці аб'ектаў ўлёткі. map.fitBounds (circle.getBounds ()); напрыклад.
дададзена аўтар Ravendarksky, крыніца

«Адказ» не працуе для мяне некалькі прычын. Дык вось што я ў канчатковым выніку робіць:

////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!
15
дададзена

Буклет таксама мае LatLngBounds, што нават мае функцыю пашырэння, гэтак жа, як Google Maps.

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

Такім чынам, вы маглі б проста выкарыстоўваць:

var latlngbounds = new L.latLngBounds();

Астатняе <�я> дакладна </я> тое ж самае.

12
дададзена
дзякуй за спасылку спасылку
дададзена аўтар Andy B, крыніца
Дзякуй! Для мяне рашэнне, у адказ вышэй, вяртаўся «GetBounds() не з'яўляецца функцыяй. Таму я змяніў код на вашу прапанову. У мяне ёсць гэта ў маім ўласным адказе.
дададзена аўтар IrfanClemson, крыніца

Буклет таксама мае LatLngBounds, што нават мае функцыю пашырэння, гэтак жа, як Google Maps.

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

Такім чынам, вы маглі б проста выкарыстоўваць:

var latlngbounds = new L.latLngBounds();

Астатняе <�я> дакладна </я> тое ж самае.

12
дададзена
дзякуй за спасылку спасылку
дададзена аўтар Andy B, крыніца
Дзякуй! Для мяне рашэнне, у адказ вышэй, вяртаўся «GetBounds() не з'яўляецца функцыяй. Таму я змяніў код на вашу прапанову. У мяне ёсць гэта ў маім ўласным адказе.
дададзена аўтар IrfanClemson, крыніца
var markerArray = [];
markerArray.push(L.marker([51.505, -0.09]));
...
var group = L.featureGroup(markerArray).addTo(map);
map.fitBounds(group.getBounds());
12
дададзена
Ён працуе без AddTo (Карта): map.fitBounds (L.featureGroup (markerArray) .getBounds ()); ці будзе гэта зрабіць розніцу?
дададзена аўтар Lucas Steffen, крыніца
var markerArray = [];
markerArray.push(L.marker([51.505, -0.09]));
...
var group = L.featureGroup(markerArray).addTo(map);
map.fitBounds(group.getBounds());
12
дададзена
Ён працуе без AddTo (Карта): map.fitBounds (L.featureGroup (markerArray) .getBounds ()); ці будзе гэта зрабіць розніцу?
дададзена аўтар Lucas Steffen, крыніца

Для ўлётка, я выкарыстоўваю

    map.setView(markersLayer.getBounds().getCenter());
3
дададзена

Для ўлётка, я выкарыстоўваю

    map.setView(markersLayer.getBounds().getCenter());
3
дададзена

Для ўлётка, я выкарыстоўваю

    map.setView(markersLayer.getBounds().getCenter());
3
дададзена

Вы таксама можаце знайсці ўсе функцыі ўнутры FeatureGroup ці ўсё featureGroups, паглядзець, як гэта працуе!

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

//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>
</div> </div>
0
дададзена

Вы таксама можаце знайсці ўсе функцыі ўнутры FeatureGroup ці ўсё featureGroups, паглядзець, як гэта працуе!

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

//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>
</div> </div>
0
дададзена