Leaflet地图加载时自动适配所有标记最优视图的报错解决

错误根源很明确：你给L.featureGroup()传的是L.LatLng坐标对象，但featureGroup只能接收Leaflet的图层实例（比如Marker、Circle、CircleMarker这类），坐标本身不是图层，自然没有addEventParent方法，导致报错。

修正步骤：

• 把markers数组改成存储你创建的图层实例，而非坐标
• 循环结束后再统一处理视图适配，没必要在最后一次循环里做
• 补全你遗漏的circleMarker添加到地图的代码

修正后的代码：

var markers = [];

for (let i = 0; i < geoFences.length; i++) {
    var geoFenceLatLon = new L.LatLng(geoFences[i].geoFence_Lat, geoFences[i].geoFence_Lon);
    
    // 创建Circle图层并加入地图，同时存入markers数组
    var geoFenceCircle = L.circle(geoFenceLatLon, geoFences[i].geoFence_Radius).addTo(deviceLocation);
    markers.push(geoFenceCircle);

    // 创建CircleMarker图层并加入地图，存入数组（如果需要纳入视图范围的话）
    var circleMarker = L.circleMarker([geoFences[i].geoFence_Lat, geoFences[i].geoFence_Lon], { 
        radius: geoFences[i].geoFence_Radius 
    }).addTo(deviceLocation);
    markers.push(circleMarker);

    // 创建Marker图层并加入地图，存入数组
    var marker = L.marker(geoFenceLatLon, {icon: geoFenceMarker, pmIgnore: true}).addTo(deviceLocation);
    markers.push(marker);
}

// 循环结束后创建featureGroup并适配视图
var group = L.featureGroup(markers);
deviceLocation.fitBounds(group.getBounds());

// 添加底图图层（建议放在地图初始化后就加，避免图层顺序问题）
L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
    maxZoom: 18
}).addTo(deviceLocation);

额外优化建议：

• 底图图层建议放在地图初始化完成后就添加，避免覆盖其他图层
• 如果不需要把Circle或CircleMarker纳入视图范围，可以只把Marker存入markers数组，减少计算量
• 可以直接用L.latLng()代替new L.LatLng()，这是Leaflet的推荐写法

内容的提问来源于stack exchange，提问作者Donald