缩放到适合所有标记在 Mapbox 或传单

小开

最佳答案

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


map.fitBounds(group.getBounds());

有关更多信息，请参见文件。

小开

传单还有 LatLngBound，甚至还有一个扩展功能，就像谷歌地图一样。

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

所以你可以简单地使用:

var latlngbounds = new L.latLngBounds();

剩下的也是没错。

小开

“答案”对我来说不起作用有些原因，所以我最终做了以下事情:

////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());

小开

为了传单，我在吸毒

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

小开

您还可以定位 FeatureGroup 或所有 Feature Group 中的所有特性, 看看它是怎么工作的！

//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());

小开

为了适应只有可见的标记，我有这个方法。

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

小开

你有一个 L 标记的数组:

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)

小开

虽然 Mapbox 有更多的功能，比如填充、动画和最大变焦，但是我没有看到任何使用 Mapbox 的答案。


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

演示

小开

//Create a point Layer (in this case a GeoJSON source)
let pointLayer = L.geoJSON(pointSource, {
pointToLayerL pointToLayer,
onEachFeature: onEachFeature
});
//Add the newly created layer to the mapObject
pointLayer.addTo(mapObject);


//Set a padding variable for the space around the bounds
let paddingCoef = (0.5);


//Call the fit bounds to adjust to the padded extent of points.
mapObject.fitBounds(pointLayer.getBounds().pad(paddingCoef));

小开

在 MapBox 中你可以使用 fitBound 方法。

你可以使用文件，地图箱