【问题标题】:plugin leaflet does not search on the map by layer ( leaflet-fusesearch)插件传单不会在地图上逐层搜索(传单-fusesearch)
【发布时间】:2019-02-27 13:55:43
【问题描述】:

我想在“Muzei”层(字段“iconCaption”)上自定义搜索,但没有任何反应...请告诉我如何更正代码...

插件位于这个地址:https://github.com/naomap/leaflet-fusesearch

数据/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"
    }
  },
}
}]
}
// serach...
var searchCtrl = L.control.fuseSearch({
  position: 'topright',
  title: 'Chercher',
  placeholder: 'found objects',
  showInvisibleFeatures: false,
  showResultFct: function(feature, container) {
    props = feature.properties;
    var name = L.DomUtil.create('b', null, container);
    name.innerHTML = props.name;
    container.appendChild(L.DomUtil.create('br', null, container));
    container.appendChild(document.createTextNode(props.details));
  }
});
searchCtrl.addTo(map);

var streetsLayer = L.geoJson(Muzei.features, {
  onEachFeature: function(feature, layer) {
    feature.layer = layer;
  }
});
searchCtrl.indexFeatures(streetsLayer, ['iconCaption']);
streetsLayer.addTo(map);



// or serach version 2, as in instructions
//var searchCtrl = L.control.fuseSearch()

//searchCtrl.indexFeatures(streetsLayer, ['iconCaption']);

//L.geoJson(Muzei, {
//onEachFeature: function (feature, layer) {
//feature.layer = layer;
//}
//});
//searchCtrl.addTo(map);

【问题讨论】:

    标签: leaflet


    【解决方案1】:

    代码赚了,需要下载并安装fuse.js,但是又开始了另一个问题-对象在列表中,但是用鼠标单击它们没有实现。 代码如下所示。不幸的是,我不是程序员,并尝试在业务过程中处理问题......因此,我在功能等方面遇到了这样的困难。

    var searchCtrl = L.control.fuseSearch() searchCtrl.addTo(map);

    searchCtrl.indexFeatures(Muzei, ['iconCaption']);
    
    var spots = L.geoJson(Muzei, {
        onEachFeature: function (feature, layer) {
            feature.layer = layer;
        }
    });
    map.addLayer(spots)
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-09-30
      • 1970-01-01
      • 1970-01-01
      • 2019-05-13
      • 1970-01-01
      相关资源
      最近更新 更多