如何在Leaflet地图中使用Bootstrap Icons并添加标记阴影？

Leaflet不会自动为你这种自定义的SVG标记添加阴影，得自己动手实现，这里给你几个实用方案：

• SVG内置滤镜方案：直接在你的气球SVG代码里添加阴影滤镜定义，比如用<filter id="markerShadow"><feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="#333" flood-opacity="0.5"/></filter>，然后给SVG元素加上filter="url(#markerShadow)"，这样整个标记（包括上面的Bootstrap图标）能统一带上阴影，效果更协调。
• CSS阴影方案：给包裹SVG和图标的容器加box-shadow: 2px 2px 4px rgba(0,0,0,0.3);，不过要注意容器的尺寸得刚好贴合标记大小，不然阴影范围会不对。
• 模拟原生阴影：参考Leaflet默认标记的阴影逻辑，用一个额外的SVG或div元素做阴影层，放在标记的下方，通过调整位置偏移、透明度和模糊度来模拟原生阴影效果，这种方式更贴近Leaflet原生标记的视觉体验。

另外提一句，你手动调图标top/left的问题可以优化下：把气球SVG和Bootstrap图标放进同一个容器，设置display: flex; align-items: center; justify-content: center;，这样图标能自动居中，不用挨个手动调整定位参数，适配起来更高效。

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