Leaflet地图中Search Control与Legend无法同时显示的问题

核心错误 #

你代码里的这一行是问题关键：

map.addControl( controlSearch, legend );

Leaflet的map.addControl()方法一次只能接收一个控件参数，你同时传了两个控件，而且调用这行代码时legend还没被定义（图例的初始化代码在这行之后），这种错误调用会导致控件添加逻辑异常，最终只能显示一个控件。

修复步骤 #

1. 删除上述错误的map.addControl调用
2. 分别添加两个控件：
   • 给搜索控件单独添加：

     controlSearch.addTo(map);
     

   • 保留你原有的图例添加代码：

     legend.addTo(map);
     

额外优化提示 #

你的getColor函数里存在重复的条件判断（比如d > 1.5出现了两次），这会导致部分颜色规则无法生效，建议修正为：

function getColor(d) {
    return d > 2 ? '#800026' :
           d > 1.5 ? '#BD0026' :
           d > 1.2 ? '#E31A1C' :
           d > 1.1 ? '#FC4E2A' :
           d > 1.0 ? '#FD8D3C' :
           d > 0.9 ? '#FEB24C' :
           d > 0.8 ? '#FED976' :
                      '#FFEDA0';
}

修复后两个控件就能同时正常显示了，Leaflet Search插件和原生Legend控件本身是完全兼容的，只是你的调用方式有误。

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