Leaflet+jQuery地图无法显示圆圈：TypeError: t.addLayer is not a function

错误原因 #

你通过new mapClass()创建的map_announce是自定义类的实例，并非Leaflet原生的L.Map对象。Leaflet的L.circle()的addTo()方法要求接收原生Map实例，而自定义的mapClass未暴露addLayer方法，因此触发报错。图标能正常显示，是因为mapClass内部已封装了标记的添加逻辑，但未支持自定义图层的直接添加。

解决方案 #

方案1：调用mapClass内部的原生Map实例 #

你的mapClass内部必然创建了Leaflet原生Map对象，通常会存储在类似this.map的属性中。修改圆圈添加代码：

var customCircle_announce = L.circle([post_data.lat, post_data.lng], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
}).addTo(map_announce.map); // 替换为map_announce的原生map属性

方案2：给mapClass添加自定义图层添加方法 #

若有权限修改mapClass，可在类中新增处理图层添加的方法：

class mapClass {
    // 已有代码...
    addLayer(layer) {
        this.map.addLayer(layer);
    }
}

之后在业务代码中调用该方法：

map_announce.addLayer(customCircle_announce);

额外检查项 #

• 确认post_data.lat和post_data.lng是有效的数值类型，避免因坐标无效引发隐性问题。
• 确保map_announce实例创建成功，未出现null或undefined的情况。

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