Leaflet-fuseSearch插件Muzei图层iconCaption字段搜索失效问题修正

我帮你排查了代码里的几个关键问题，现在把修复后的完整代码和问题说明整理如下：

问题分析 #

• GeoJSON语法错误：你的Muzei.js末尾多了两个冗余的}，这会导致整个GeoJSON数据无法被正确解析，搜索功能根本拿不到可检索的数据源。
• 搜索结果显示函数属性不匹配：你在showResultFct里使用了props.name和props.details，但你的GeoJSON特征属性里只有iconCaption（对应名称）和description（对应详情），属性名不匹配会导致搜索结果显示异常。
• 图层创建的小瑕疵：虽然用Muzei.features也能创建图层，但直接传入完整的Muzei FeatureCollection对象更符合Leaflet GeoJSON图层的规范用法。

修复后的完整代码 #

修正后的data/Muzei.js #

var Muzei = { 
  "type": "FeatureCollection", 
  "metadata": { 
    "name": "Музеи и галереи ", 
    "creator": "Yandex Map Constructor" 
  }, 
  "features": [
    { 
      "type": "Feature", 
      "id": 0, 
      "geometry": { "type": "Point", "coordinates": [104.66424966564485, 51.99642708991676] }, 
      "properties": { 
        "description": "Адрес: Тальцы, 47-й км Байкальского тракта\nКонтакты: тел.: 7 950 145‑40-75, 7 3952 24‑32-51\ne-mail: talci@irk.ru, talzimark@mail.ru\nсайт: http://www.talci.ru", 
        "iconCaption": "Архитектурно-этнографический музей «Тальцы»", 
        "marker-color": "#1e98ff" 
      } 
    }, 
    { 
      "type": "Feature", 
      "id": 1, 
      "geometry": { "type": "Point", "coordinates": [104.28481982936044, 52.235150415839485] }, 
      "properties": { 
        "description": "Адрес: Иркутск, ул. Академическая, д. 1\nКонтакты: тел.: 73952453146;\ne-mail: bm@isc.irc.ru; \nсайт: http://www.bm.isc.irk.ru", 
        "iconCaption": "Байкальский музей Иркутского научного центра", 
        "marker-color": "#1e98ff" 
      } 
    }, 
    { 
      "type": "Feature", 
      "id": 2, 
      "geometry": { "type": "Point", "coordinates": [104.28314107738336, 52.288654185599434] }, 
      "properties": { 
        "description": "Адрес: Иркутск, ул. Сухэ-Батора, д. 5\nКонтакты: тел.: 73952241855; \ne-mail: irkinsect@yandex.ru;\nсайт: http://biosoil.isu.ru", 
        "iconCaption": "Восточно-Сибирский музей микробиологии ИГУ", 
        "marker-color": "#1e98ff" 
      } 
    }, 
    { 
      "type": "Feature", 
      "id": 3, 
      "geometry": { "type": "Point", "coordinates": [104.28242998112661, 52.28897985492063] }, 
      "properties": { 
        "description": "Адрес: Иркутск, ул. Сухэ-Батора, д. 5\nКонтакты: тел.: 73952241855; \ne-mail: irkinsect@yandex.ru;\nсайт: http://biosoil.isu.ru", 
        "iconCaption": "Восточно-Сибирский музей почвоведения им. И.В.Николаева ИГУ", 
        "marker-color": "#1e98ff" 
      } 
    }, 
    { 
      "type": "Feature", 
      "id": 4, 
      "geometry": { "type": "Point", "coordinates": [104.28149027976227, 52.29116663064888] }, 
      "properties": { 
        "description": "Адрес: Иркутск, ул. Сухэ-Батора, д. 2\nКонтакты: тел.: 73952345041; \ne-mail: krek@museum.irkutsk.ru", 
        "iconCaption": "Выставочный зал «Спасская церковь»", 
        "marker-color": "#1e98ff" 
      } 
    }, 
    { 
      "type": "Feature", 
      "id": 5, 
      "geometry": { "type": "Point", "coordinates": [104.28411953372908, 52.281967955879544] }, 
      "properties": { 
        "description": "Адрес: Иркутск, ул. Карла Маркса, д. 13\nКонтакты: 7 3952 20‑03-68, 7 3952 33‑62-30\nсайт: museum-irkutsk.com\n", 
        "iconCaption": "Выставочный отдел «Музейная студия» Иркутского областного краеведческого музея", 
        "marker-color": "#1e98ff" 
      } 
    }
  ] 
};

修正后的搜索代码 #

// 初始化搜索控件，匹配你的GeoJSON属性调整显示函数
var searchCtrl = L.control.fuseSearch({ 
  position: 'topright', 
  title: 'Поиск музеев', 
  placeholder: 'Введите название музея...', 
  showInvisibleFeatures: false, 
  showResultFct: function(feature, container) { 
    var props = feature.properties; 
    // 使用实际存在的iconCaption作为标题
    var name = L.DomUtil.create('b', null, container); 
    name.innerHTML = props.iconCaption; 
    container.appendChild(L.DomUtil.create('br', null, container)); 
    // 使用实际存在的description作为详情
    container.appendChild(document.createTextNode(props.description)); 
  } 
});

searchCtrl.addTo(map);

// 创建GeoJSON图层，确保每个feature关联到对应的layer
var muzeiLayer = L.geoJson(Muzei, { 
  onEachFeature: function(feature, layer) { 
    feature.layer = layer; 
  } 
});

// 针对iconCaption字段建立搜索索引
searchCtrl.indexFeatures(muzeiLayer, ['iconCaption']);

// 将图层添加到地图
muzeiLayer.addTo(map);

关键修改说明 #

1. 修复了GeoJSON的语法错误，移除了末尾冗余的}，确保数据能被Leaflet正确解析。
2. 调整了showResultFct函数，使用GeoJSON中实际存在的iconCaption和description属性来显示搜索结果，避免了属性不存在导致的显示问题。
3. 规范了GeoJSON图层的创建方式，直接传入完整的FeatureCollection对象，并给图层起了更清晰的名称muzeiLayer。
4. 调整了搜索控件的标题和占位符文字，使其更贴合俄语场景的使用。

内容的提问来源于stack exchange，提问作者Михаил