Leaflet地图搜索无结果且报错this._retrieveData is not a function求助

问题描述 #

我正在使用Leaflet地图，想要添加Leaflet的搜索框工具。以下是创建带弹窗内容标记的代码：

for (let i = 0; i < data.length; i++) {
        var name = data[i][0];
        var space = " loc.";
        var lat = data[i][1];
        var lon = data[i][2];
        if (data[i][4] == 1) {
            var Icon = new L.Icon({
                iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-gold.png",
                shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
                iconSize: [25, 41],
                iconAnchor: [12, 41],
                popupAnchor: [1, -34],
                shadowSize: [41, 41]
            });
        }
        else if (data[i][4] == 2) {
            var Icon = new L.Icon({
                iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-grey.png",
                shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
                iconSize: [25, 41],
                iconAnchor: [12, 41],
                popupAnchor: [1, -34],
                shadowSize: [41, 41]
            });
        }
        else {
            var Icon = new L.Icon({
                iconUrl: "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-orange.png",
                shadowUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png",
                iconSize: [25, 41],
                iconAnchor: [12, 41],
                popupAnchor: [1, -34],
                shadowSize: [41, 41]
            });
        }
        var popup = name.bold() + space;
        var marker = L.marker([lat, lon], { icon: Icon }).addTo(map);
        marker.bindPopup(popup);

    }

添加搜索框后：

map.addControl(new L.Control.Search({ layer: popup }));

出现错误且搜索无结果：

Uncaught TypeError: this._retrieveData is not a function
_fillRecordsCache leaflet-search.js:735
timerKeypress leaflet-search.js:691
setTimeout handler*_handleKeypress leaflet-search.js:690
o DomEvent.js:108

疑问：是否遗漏了什么？是否调用了错误的图层，或者是否无法直接搜索弹窗内容？

问题原因 #

1. 图层参数错误：你将字符串类型的popup变量传给了L.Control.Search的layer选项，但该选项要求传入Leaflet图层组（如L.LayerGroup），而非单个弹窗内容。
2. 无搜索目标属性：Leaflet Search控件默认搜索图层内标记的指定属性（如title），你仅绑定了弹窗内容，控件无法识别该内容作为搜索依据。

解决方案 #

步骤1：创建图层组管理所有标记 #

先创建一个图层组，将所有标记统一添加到该组中，而非直接添加到地图：

// 提前创建图层组并添加到地图
var markerLayer = L.layerGroup().addTo(map);

for (let i = 0; i < data.length; i++) {
    // 原有图标、坐标等代码保持不变
    
    var popup = name.bold() + space;
    var marker = L.marker([lat, lon], { icon: Icon });
    // 给标记添加用于搜索的属性，这里用name作为搜索字段
    marker.title = name;
    marker.bindPopup(popup);
    // 将标记添加到图层组
    marker.addTo(markerLayer);
}

步骤2：正确初始化Search控件 #

将图层组传入layer选项，并指定搜索的属性字段：

map.addControl(new L.Control.Search({
    layer: markerLayer,
    propertyName: 'title', // 指定搜索标记的title属性
    zoom: 15 // 搜索到结果后地图缩放级别，可选配置
}));

补充说明 #

• 若想直接搜索弹窗内容，可将弹窗文本赋值给标记的自定义属性（如marker.popupContent = popup），再将propertyName设为该属性名即可。
• 确保Leaflet Search控件版本与Leaflet主版本兼容，避免版本不匹配引发的异常。

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