簡體   English   中英

使用循環添加標記時,Leaflet.js地圖疊加層停止工作

[英]Leafletjs map overlays stops working when markers are added using a loop

如果我手動輸入緯度和經度以及.addTo(layer) 顯示右上角的覆蓋菜單,我可以過濾標記。

但是,當我嘗試傳遞帶有緯度和經度的JSON標記列表並進行遍歷以創建標記,然后創建.addTo(layer) 覆蓋菜單消失,但標記正確生成。

Leaflet.js腳本(手動輸入經度和緯度): https ://jsfiddle.net/kdu2woLb/1/

var cities = new L.LayerGroup();
  L.marker([40.7864742, -73.9393257], {icon: citiesIcon}).bindPopup('Job Title: ').addTo(cities);
  L.marker([40.8561684, -73.89659800000001], {icon: citiesIcon}).bindPopup('Job Title: ').addTo(cities);

var jobs = new L.LayerGroup();
  L.marker([40.7127837, -74.0059413], {icon: jobIcon}).bindPopup('Job Title: ').addTo(jobs);
  L.marker([40.7348796, -73.86348939999999 ], {icon: jobIcon}).bindPopup('Job Title: ').addTo(jobs);

Leaflet.js腳本(使用循環生成標記): https ://jsfiddle.net/8qmk33kp/2/

  var cities = new L.LayerGroup();
  for ( var i=0; i < markers.length; ++i ) 
  {
     L.marker( [markers[i].latitude, markers[i].longitude],  {icon: jobIcon} )
        .bindPopup( markers[i].title+ '<br/>' + 'Address: ' + markers[i].address + '<br />' + 'Salary range: ' + '$' + markers[i].min_salary + ' - ' + '$' + markers[i].max_salary )
        .addTo(cities);
  }

  var jobs = new L.LayerGroup();
    L.marker([40.7127837, -74.0059413], {icon: jobIcon}).bindPopup('Job Title: ').addTo(jobs);
    L.marker([40.7348796, -73.86348939999999 ], {icon: jobIcon}).bindPopup('Job Title: ').addTo(jobs);

我不太明白為什么循環會中斷覆蓋。 當我瀏覽代碼時,似乎正在創建每個標記,然后將其添加到疊加層。 因此,應生成並傳遞給過濾器? 為什么標記會正確生成,但是覆蓋菜單消失了?

任何見識都會有所幫助。 謝謝!


更新 :為有效覆蓋和非有效覆蓋添加了jsfiddle鏈接。 JSON列表似乎出了問題,當我刪除除3-4個標記以外的所有內容時,覆蓋層再次起作用... https://jsfiddle.net/qm5vd6k4/1/

查看包括1592至1596的記錄:

//i = 1592
{
  "title": "PRINCIPAL ADMINISTRATIVE ASSOC",
  "latitude": null,
  "longitude": null
}
//i = 1593
{
  "title": "PUBLIC HEALTH ADVISER",
  "latitude": null,
  "longitude": null
}
//i = 1594
{
  "title": "COMMUNITY COORDINATOR",
  "latitude": null,
  "longitude": null
}
//i = 1595
{
  "title": "ADMINISTRATIVE PUBLIC HEALTH N",
  "latitude": null,
  "longitude": null
}
//i = 1596
{
  "title": "FAMILY PUB HEALTH NURSE (HMH)",
  "latitude": null,
  "longitude": null
}

更新的JSFiddle: https ://jsfiddle.net/8qmk33kp/3/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM