当使用循环添加标记时，Leafletjs地图覆盖停止工作

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

本文关键字：Leafletjs 地图 覆盖 停止工作 加标记 循环 添加      更新时间：2023-09-26

如果我手动放置经纬度和.addTo(layer)。显示右上方的叠加菜单，我可以过滤标记。

但是，当我尝试传递具有纬度和经度的标记的JSON列表并迭代创建标记，然后.addTo(layer)。叠加菜单消失，但标记生成正确。

Leafletjs脚本(手动输入长度和长度):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);

Leafletjs脚本(使用循环生成标记):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);

我真的不明白为什么循环打破了覆盖。当我查看代码时，它似乎正在创建每个标记，然后将其添加到覆盖。那么它应该被生成并传递给过滤器?为什么标记生成正确，但覆盖菜单消失?

任何见解都会有所帮助。谢谢!

UPDATE:添加工作覆盖和非工作覆盖的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/

相关文章：