javascript - fitBounds 缩放以包含所有标记

Question

我的 Leaflet map JavaScript 如下，在底部附近您将看到我的 fitBounds() 定义。

问题是我不明白如何准确使用它，或者将它放在代码中的何处以使其工作(即缩放以包含所有标记，而不是对坐标进行硬编码)。

似乎我尝试的任何方法都无法使其正常工作。

var map = L.map('map').setView([39.202903, -94.602907], 20);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
  maxZoom: 18,
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
    '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
  id: 'mapbox.streets'
}).addTo(map);

function onLocationFound(e) {
  var radius = e.accuracy / 2;

  L.circle(e.latlng, radius).addTo(map);

  marker1 = L.marker([39.199178, -94.643435]).addTo(map);
  marker1.bindPopup("1<br><b>#050</b><br>KC0YT<br>Charlotte Hoverder<br>Platte Co., MODist:A<br>39.199178, -94.643435<br>EM29qe").openPopup();

  marker2 = L.marker([39.2859182, -94.667236]).addTo(map);
  marker2.bindPopup("2<br><b>#007</b><br>KD0YEX<br>Karen Mcmackin<br>Platte  Co., MODist:A<br>39.2859182, -94.667236<br>EM29pg98").openPopup();

  marker3 = L.marker([39.233982, -94.666035]).addTo(map);
  marker3.bindPopup("3<br><b>#048</b><br>N0RL<br>David Copeland<br>Clay  Co., MODist:A<br>39.233982, -94.666035<br>EM29ri").openPopup();

  marker4 = L.marker([39.33353, -94.76145]).addTo(map);
  marker4.bindPopup("4<br><b>#052</b><br>W0JSH<br>John Heavener<br>Platte  Co., MODist:A<br>39.33353, -94.76145<br>EM29oi").openPopup();
}

function onLocationError(e) {
  alert(e.message);
}

map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);

map.fitBounds([
  [39.199178, -94.643435],
  [39.2859182, -94.667236],
  [39.233982, -94.666035],
  [39.33353, -94.76145],
]);

map.locate({
  setView: true,
  maxZoom: 10,
});

Answer 1

所以你的最后一次尝试就快完成了。由于您已经维护了一个 L.marker 数组，我建议从中创建一个 L.featureGroup (我将其设为全局)，并使用 getBounds() featureGroup 上的 来设置 map 的边界。您可以根据您对全局变量的厌恶程度进行调整。

var map = null;
var zoomLevel = 20;
var markers = [];

// starting point for the map and a zoom level of 20
var map = L.map('map').setView([39.202903, -94.602907], zoomLevel);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: zoomLevel,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(map);

function netStationLocations(e) {

    // This is the markers array
    // var markers = []; 
      var N0SAX = L.marker([39.3762884,-93.496261],{title:"marker_1"}).addTo(map).bindPopup("1<br><b>#233</b><br>N0SAX<br>Jack Vantrump<br>Carroll  Co., MO Dist: A<br>39.3762884, -93.496261<br>EM39GJ").openPopup();
        markers.push(N0SAX);

      var KF0ED = L.marker([39.7898224,-93.558050],{title:"marker_2"}).addTo(map).bindPopup("2<br><b>#245</b><br>KF0ED<br>Glenn O connor<br>        Livingston   Co., MO Dist: H<br>39.7898224, -93.558050<br>EM39FS").openPopup();
        markers.push(KF0ED);

      var KD0ZMG = L.marker([39.010151,-94.579769],{title:"marker_3"}).addTo(map).bindPopup("3<br><b>#264</b><br>KD0ZMG<br>      THEARL      Speck<br>Livingston  Co., MO Dist: H<br>39.010151, -94.579769<br>EM29RA").openPopup();
        markers.push(KD0ZMG);

      var KC0NOX = L.marker([39.8132645,-93.558613],{title:"marker_4"}).addTo(map).bindPopup("4<br><b>#387</b><br>KC0NOX<br>Joe Dietrick<br>Livingston  Co., MO Dist: H<br>39.8132645, -93.558613<br>EM39FT").openPopup();
        markers.push(KC0NOX);

      var AA0JA = L.marker([39.593217,-93.788696],{title:"marker_5"}).addTo(map).bindPopup("5<br><b>#389</b><br>AA0JA<br>Bill Whitlock<br>Caldwell  Co., MO Dist: H<br>39.593217, -93.788696<br>EM39co").openPopup();
        markers.push(AA0JA);

      var AC0OK = L.marker([40.1697444,-93.093104],{title:"marker_6"}).addTo(map).bindPopup("6<br><b>#414</b><br>AC0OK<br>Sam Cook<br>Sullivan  Co., MO Dist: B<br>40.1697444, -93.093104<br>EN30KE").openPopup();
        markers.push(AC0OK);

      var KG6TUB = L.marker([39.7973405,-93.551737],{title:"marker_7"}).addTo(map).bindPopup("7<br><b>#610</b><br>KG6TUB<br>Doris Hoch<br>Livingston  Co., MO Dist: H<br>39.7973405, -93.551737<br>EM39FT").openPopup();
        markers.push(KG6TUB);

      var NCMO = L.marker([40.0706749,-93.611323],{title:"marker_9"}).addTo(map).bindPopup("9<br><b>#614</b><br>NCMO<br>Glendale (KB0RPJ) Briggs<br>Grundy  Co., MO Dist: <br>40.0706749, -93.611323<br>EN30EB").openPopup();
        markers.push(NCMO);

      var AC0TQ = L.marker([39.7973405,-93.551737],{title:"marker_10"}).addTo(map).bindPopup("10<br><b>#616</b><br>AC0TQ<br>Ken Hoch<br>Livingston  Co., MO Dist: H<br>39.7973405, -93.551737<br>EM39FT").openPopup();
        markers.push(AC0TQ);

      var KE0MGD = L.marker([39.8157137,-94.020960],{title:"marker_11"}).addTo(map).bindPopup("11<br><b>#621</b><br>KE0MGD<br>Carl Russell<br>Daviess  Co., MO Dist: H<br>39.8157137, -94.020960<br>EM29XT").openPopup();
        markers.push(KE0MGD);

      var KE0ELB = L.marker([40.2363229,-93.153805],{title:"marker_12"}).addTo(map).bindPopup("12<br><b>#623</b><br>KE0ELB<br>Kris Good<br>Sullivan  Co., MO Dist: B<br>40.2363229, -93.153805<br>EN30KF").openPopup();
        markers.push(KE0ELB);

      var W0WHH = L.marker([40.1931446,-93.667155],{title:"marker_13"}).addTo(map).bindPopup("13<br><b>#624</b><br>W0WHH<br>Bill Hein<br>Grundy  Co., MO Dist: H<br>40.1931446, -93.667155<br>EN30DE").openPopup();
        markers.push(W0WHH);

      var AD0YN = L.marker([39.659816,-93.398354],{title:"marker_14"}).addTo(map).bindPopup("14<br><b>#644</b><br>AD0YN<br>Charles STIRLING<br>Livingston  Co., MO Dist: H<br>39.659816, -93.398354<br>EM39HP").openPopup();
        markers.push(AD0YN);

      var KE0RTA = L.marker([40.0722144,-93.578824],{title:"marker_15"}).addTo(map).bindPopup("15<br><b>#673</b><br>KE0RTA<br>Vic Markell<br>Grundy  Co., MO Dist: H<br>40.0722144, -93.578824<br>EN30FB").openPopup();
        markers.push(KE0RTA);

    // Set up to show markers popup
    function markerFunction(id){
        for (var i in markers){
            var markerID = markers[i].options.title;
            if (markerID == id){
                markers[i].openPopup();
            };
        } // end of for loop
    } // end markerFunction 

    // JQuery call to display the popup from the marker list
    $("a").click(function(){
        markerFunction($(this)[0].id);
    });

} // End of the netStationLocations function

// In case some errors pop up
function onLocationError(e) {
    alert(e.message);
}


map.on('locationfound', netStationLocations);
map.on('locationerror', onLocationError);

map.locate({setView: true, maxZoom: 12 });

var fg = L.featureGroup(markers);
map.fitBounds(fg.getBounds());