Javascript 调整边界以缩放以包括所有标记

Javascript 调整边界以缩放以包括所有标记,javascript,leaflet,Javascript,Leaflet,传单地图的JavaScript在下面,靠近底部,您将看到我的fitBounds定义 问题是我不知道如何准确地使用它,或者在代码中把它放在哪里使它工作,即缩放以包括所有标记,而不是硬编码坐标 看来我没有试过什么能让它正常工作 VarMap=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.eyj1i

传单地图的JavaScript在下面,靠近底部,您将看到我的fitBounds定义

问题是我不知道如何准确地使用它,或者在代码中把它放在哪里使它工作,即缩放以包括所有标记,而不是硬编码坐标

看来我没有试过什么能让它正常工作

VarMap=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.eyj1ijoibwwwwym94iiwiysi6imnpejy4nxvycta2emycxbdhrqcmz3n3gifq.rjfig214ariislb6b5aw'{ maxZoom:18, 属性:“映射数据©;贡献者”+ ', ' + “图像”, id:“地图盒。街道” }.addTomap; 函数onLocationFounde{ var半径=e.精度/2; L.circlee.latlng,radius.addTomap; marker1=L.marker[39.199178,-94.643435].addTomap; marker1.BindPopup1050KC0,修改人:A39.199178,-94.643435EM29qe.openPopup; marker2=L.marker[39.2859182,-94.667236].addTomap; marker2.bindPopup2007KD0YEXKaren McmackinPlatte Co.,修改人:A39.2859182,-94.667236EM29pg98.openPopup; marker3=L.marker[39.233982,-94.666035].addTomap; marker3.bindPopup3048N0RLDavid CopelandClay Co.,MODist:A39.233982,-94.666035EM29ri.openPopup; marker4=L.marker[39.33353,-94.76145].addTomap; marker4.bindPopup4052W0JSHJohn HeavenerPlatte Co.,修改人:A39.33353,-94.76145EM29oi.openPopup; } 函数onLocationError{ 警报e.message; } 地图。在'locationfound',onLocationFound; 在'locationerror'上的映射,onLocationError; map.fitbunds[ [39.199178, -94.643435], [39.2859182, -94.667236], [39.233982, -94.666035], [39.33353, -94.76145], ]; 定位{ setView:对, 最大缩放:10, };
你的最后一次尝试就快到了。既然您已经在维护一个L.marker数组,我建议使用我将其设置为全局的L.featureGroup,并使用featureGroup上的getBounds设置地图的边界。你可以根据你对全球化的厌恶程度进行调整

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

如果需要设置的边界是常量,那么在初始化映射时,您可以在setView调用的位置设置它们一次。你可能只需要一个或另一个,而不是两个。@Peeebe,谢谢你这么做,但我不明白怎么做的语法。你能给我举个例子吗?我开始写答案,但后来注意到你对fitBounds有错误的想法-它需要一个只有两个元素的LatLngBounds-矩形的对角。我想你是想用它画一个不规则的形状,这是行不通的。@peeebee恐怕我还是不懂语法。好的。你能用英语解释一下你想达到什么目的吗?我看到你做了一些小改动,使标记成为全局标记,并将它们应用到map3.php中,但它仍然没有缩放以显示所有标记。你对我对全球人的厌恶程度的评论也引起了我的兴趣。我不确定这是什么意思。看起来问题出在下面的错误;传单.js:5未捕获错误:边界无效。在e.fitBounds.js:5在map1.php?NetID=888:183不要忘记Peeebee;我在理解语法方面进展不大。传单页面提供了您可以做的所有事情,但没有语法示例。用足够的代码制作一个JSFIDLE来演示这个问题,我将与您一起解决。