让Leafletmarkers搜索和罗嗦了别人(Make Leafletmarkers search

随着StackOverflow的社区的帮助下我建了一个小册子地图与blogdata和articledata标记。该blogdata代表的识别码与编辑部的geoloations和articledata从文章中写道：新闻编辑室的位置。因此，有每编辑部几篇文章，我连那些具有多义线（见下图）。

我现在想要做的是使该单张地图搜索，而不是为城市或国家，但对新闻编辑室ID。我想管理模糊所有其他标记和线条进行缩放要搜索的博客和它连接的文章。

这是我走到这一步：

    function myFunction() {

  var map = L.map('map').setView([51.101516, 10.313446], 6);
  // improve experience on mobile
  if (map.tap) map.tap.disable();
  L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}', {
    attribution: 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ',
    maxZoom: 16
}).addTo(map);
  map._layersMinZoom=5;  

var newsroomsById = {};

for(i=0; i<newsrooms.length; i++) {
    newsroomsById[newsrooms[i].ID] = newsrooms[i];
}

for(i=0; i<articles.length; i++) {
    // retrieve newsroom
    var newsroom = newsroomsById[articles[i].ID];
    // draw your polyline
    var latlngs = [
      [articles[i].lat, articles[i].long],
      [newsroom.lat, newsroom.long]
    ];

    var polyline = L.polyline(latlngs, {
      color: 'grey',
      weight: 2,
      opacity: 0.5,
      smoothFactor: 1,
    }).addTo(map);

    var room_marker = L.circleMarker([newsroom.lat, newsroom.long], {
          radius: 3,
          color: '#29D3A0',
          fillColor: '#29D3A0',
          fillOpacity: 1,
        }).addTo(map);

    room_marker.bindPopup("<strong style='color: #84b819'>Newsroom </strong>" + newsroom.ID + "<br>").openPopup();
    var popup = L.popup();

    var art_marker = L.circleMarker([articles[i].lat, articles[i].long], {
          radius: 2,
          color: '#000',
          fillColor: '#000',
          fillOpacity: 1,
        }).addTo(map);
}
}

这是在地图的样子（黑色条，绿色的是编辑部/博客）

编辑：为了使地图搜索使用单张插件L.Search.Control

这是很难回答这个问题的搜索部分。我认为你必须描述一个用例。

然而，一旦你有你想要突出编辑部的ID，你可以改变你的折线和circleMarkers使用的不透明度的SetOption

然而，你的代码需要一些调整：你需要保持你的标记的数组，并保持在标记的新闻编辑室的ID。

另一件事：你不应该建立在文章循环编辑部标记; 它创造尽可能多的编辑部标记为您的文章数量。

这是一个命题（选择通过单击编辑部标记制造）：

var selectedNewsroom = 0;

var newsroomsById = {};


// create newsroom markers
var newsroomMarkers = [];

for(i=0; i<newsrooms.length; i++) {
    newsroomsById[newsrooms[i].ID] = newsrooms[i];

    var room_marker = L.circleMarker([newsrooms[i].lat, newsrooms[i].long], {
        radius: 20,
        color: '#000',
        opacity: .4,
        fillOpacity: .4,
      }).addTo(map);

   //room_marker.bindPopup("<strong style='color: #84b819'>Newsroom </strong>" + newsrooms[i].ID + "<br>");

    room_marker.ID = newsrooms[i].ID;  // associate marker with newsroom

    room_marker.on('click', function(e) {
        console.log('clicked on ' + e.target.ID);
        changeSelection(e.target.ID);
    });

    newsroomMarkers.push(room_marker);  // keep marker reference for later
}


// create article markers and connections to newsrooms
var articleMarkers = [];

for(i=0; i<articles.length; i++) {
    // retrieve newsroom
    var newsroom = newsroomsById[articles[i].ID];
    // draw your polyline
    var latlngs = [
      [articles[i].lat, articles[i].long],
      [newsroom.lat, newsroom.long]
    ];

    var polyline = L.polyline(latlngs, {
      color: '#000',
      weight: 1,
      opacity: .4,
      smoothFactor: 1,
    }).addTo(map);

    var art_marker = L.circleMarker([articles[i].lat, articles[i].long], {
          radius: 2,
          color: '#000',
          fillColor: '#000',
          opacity: .4,
          fillOpacity: .4,
        }).addTo(map);

    art_marker.connection = polyline; // associate polyline with marker
    art_marker.newsroomID = newsroom.ID; 

    articleMarkers.push(art_marker); // keep marker reference for later
}


// highlight or blur newsrooms base on which is selected
function changeSelection(newsroomID) {
    // deselect everything
    for(i=0; i<articleMarkers.length; i++) {
        articleMarkers[i].setStyle({ opacity: .4, fillOpacity: .4 });
        articleMarkers[i].connection.setStyle({ opacity: .4 }); 
    }
    for(i=0; i<newsroomMarkers.length; i++) {
        newsroomMarkers[i].setStyle({ opacity: .4, fillOpacity: .4 });  
    }

    if(selectedNewsroom == 0 || selectedNewsroom != newsroomID) {
        selectedNewsroom = newsroomID;

        for(i=0; i<articleMarkers.length; i++) {
            if(articleMarkers[i].newsroomID == newsroomID) {
                articleMarkers[i].setStyle({ opacity: 1, fillOpacity: 1 });
                articleMarkers[i].connection.setStyle({ opacity: 1 });
            }
        }
        for(i=0; i<newsroomMarkers.length; i++) {
            if(newsroomMarkers[i].ID == newsroomID) {
                newsroomMarkers[i].setStyle({ opacity: 1, fillOpacity: 1 });                    
            }
        }           
    }
    else {
        selectedNewsroom = 0;
    }
}

和工作例子。