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

loading...


76

如何在 MapboxLeaflet 中设置视图以查看 Map 上的所有标记?像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);
6回答

  • 14
    var group = new L.featureGroup([marker1, marker2, marker3]);
    
     map.fitBounds(group.getBounds());
    

    有关详细信息,请参阅here .


  • 0

    “答案”对我来说不起作用 . 所以这就是我最终做的事情:

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

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

  • 3

    Leaflet也有LatLngBounds甚至具有扩展功能,就像谷歌 Map 一样 .

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

    所以你可以简单地使用:

    var latlngbounds = new L.latLngBounds();
    

    其余的完全相同 .


  • 15

    对于Leaflet,我正在使用

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

  • 188

    您还可以找到FeatureGroup或所有featureGroup中的所有功能,看看它是如何工作的!

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

loading...

评论

暂时没有评论!