blocks|key|3017524|text|var+group+=+new+L.featureGroup([marker1,+marker2,+marker3]);

map.fitBounds(group.getBounds());|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|3017525|有关详细信息，请参阅the+documentation。|unstyled|offset|length|3017526|entityMap|0|LINK|mutability|MUTABLE|url|https://leafletjs.com/reference-1.6.0.html#map-fitbounds^0|0|A|H|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

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

map.fitBounds(group.getBounds());
</code></pre>

<p>See <a href="https://leafletjs.com/reference-1.6.0.html#map-fitbounds" rel="noreferrer">the documentation</a> for more info.</p>


blocks|key|2805264|text|由于某些原因，“答案”对我来说不起作用。所以这就是我最终要做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2805265|////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!|code-block|syntax|javascript|2805266|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The 'Answer' didn't work for me some reasons. So here is what I ended up doing:</p>

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


blocks|key|187280|text|var+markerArray+=+[];
markerArray.push(L.marker([51.505,+-0.09]));
...
var+group+=+L.featureGroup(markerArray).addTo(map);
map.fitBounds(group.getBounds());|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|187281|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

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


blocks|key|2805283|text|对于单张，我使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2805284|++++map.setView(markersLayer.getBounds().getCenter());|code-block|syntax|javascript|2805285|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>For Leaflet, I'm using</p>

<pre><code>    map.setView(markersLayer.getBounds().getCenter());
</code></pre>


blocks|key|2805415|text|迟来的是，Mapbox没有答案，尽管Mapbox有更多的功能，如应用填充，动画和最大缩放。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2805416|const+coordinates+=+[<coordiantes>...]

//+Create+a+'LngLatBounds'+with+the+first+coordinate.
const+bounds+=+new+mapboxgl.LngLatBounds(
++coordinates[0],
++coordinates[0]
);
+
//+Extend+the+'LngLatBounds'+to+include+every+coordinate+in+the+bounds+result.
for+(const+coord+of+coordinates)+{
++bounds.extend(coord);
}

//+Note+there+are+other+options+such+as+easeing+animation+and+maxZoom
map.fitBounds(bounds,+{
++padding:+20
});|code-block|syntax|javascript|2805417|Demo|offset|length|2805418|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.mapbox.com/mapbox-gl-js/example/zoomto-linestring/^0|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<p>Belatedly, there are no answers for Mapbox, although Mapbox has more functionality such as applying padding, animation, and max zoom.</p>
<pre><code>
const coordinates = [&lt;coordiantes&gt;...]

// Create a 'LngLatBounds' with the first coordinate.
const bounds = new mapboxgl.LngLatBounds(
  coordinates[0],
  coordinates[0]
);
 
// Extend the 'LngLatBounds' to include every coordinate in the bounds result.
for (const coord of coordinates) {
  bounds.extend(coord);
}

// Note there are other options such as easeing animation and maxZoom
map.fitBounds(bounds, {
  padding: 20
});

</code></pre>
<p><a href="https://docs.mapbox.com/mapbox-gl-js/example/zoomto-linestring/" rel="nofollow noreferrer">Demo</a></p>


blocks|key|2805316|text|您还可以定位FeatureGroup或所有featureGroups中的所有功能，看看它是如何工作的！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2805317|​|2805318|//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%2B%2B)+{
				obBounds.extend(iobFeatureGroup[i].getBounds());
			}
			iobMap.fitBounds(obBounds);			
		}+else+{
			iobMap.fitBounds(iobFeatureGroup.getBounds());
		}
}|code-block|syntax|javascript|2805319|.mymap{
++height:+300px;
++width:+100%25;
}|2805320|<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>|2805321|2805322|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>You also can locate all features inside a FeatureGroup or all the featureGroups,
see how it works!</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><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 &lt; iobFeatureGroup.length; i++) {
				obBounds.extend(iobFeatureGroup[i].getBounds());
			}
			iobMap.fitBounds(obBounds);			
		} else {
			iobMap.fitBounds(iobFeatureGroup.getBounds());
		}
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.mymap{
  height: 300px;
  width: 100%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"&gt;&lt;/script&gt;
&lt;link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet"/&gt;

&lt;div id="map" class="mymap"&gt;&lt;/div&gt;
&lt;button onclick="LocateOne()"&gt;locate group 1&lt;/button&gt;
&lt;button onclick="LocateAll()"&gt;locate All&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|185311|text|为了只适合可见的标记，我使用了这个方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|185312|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,
++++++++});
++++}
}|code-block|syntax|javascript|185313|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>To fit to the visible markers only, I've this method.</p>

<pre><code>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 &gt; 0) {

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

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


blocks|key|3017643|text|您有一个L.Marker数组：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3017644|let+markers+=+[marker1,+marker2,+marker3]

let+latlngs+=+markers.map(marker+=>+marker.getLatLng())

let+latlngBounds+=+L.latLngBounds(latlngs)

map.fitBounds(latlngBounds)
//+OR+with+a+smooth+animation
//+map.flyToBounds(latlngBounds)|code-block|syntax|javascript|3017645|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You have an array of L.Marker:</p>
<pre><code>let markers = [marker1, marker2, marker3]

let latlngs = markers.map(marker =&gt; marker.getLatLng())

let latlngBounds = L.latLngBounds(latlngs)

map.fitBounds(latlngBounds)
// OR with a smooth animation
// map.flyToBounds(latlngBounds)
</code></pre>


blocks|key|2805349|text|最好的方法是使用下面的代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2805350|var+group+=+new+L.featureGroup([marker1,+marker2,+marker3]);

map.fitBounds(group.getBounds());|code-block|syntax|javascript|2805351|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The best way is to use the next code</p>

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

map.fitBounds(group.getBounds());
</code></pre>


<p>How do I set view to see all markers on map in <strong>Mapbox</strong> or <strong>Leaflet</strong>? Like Google Maps API does with <code>bounds</code>?</p>

<p>E.g:</p>

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


Zoom to fit all markers in Mapbox or 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.fitBou

问缩放以适合Mapbox或Leaflet中的所有标记
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问缩放以适合Mapbox或Leaflet中的所有标记EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问缩放以适合Mapbox或Leaflet中的所有标记
EN