Javascript 使传单标记可搜索，并模糊其他标记

在StackOverflow社区的帮助下，我建立了一个带有blogdata和articledata标记的传单地图。blogdata表示新闻编辑室的ID和地理位置，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 © Esri — 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);
}
}

函数myFunction（）{
var map=L.map（'map'）.setView（[51.101516,10.313446]，6）；
//改善手机体验
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}'{
属性：'Tiles©；Esri&mdash；Esri，DeLorme，NAVTEQ'，
最大缩放：16
}).addTo（地图）；
地图。_layers最小缩放=5；
var newsroomsbyd={}；
对于（i=0；i来说，很难回答问题的搜索部分。我认为您必须描述一个用于此的用例

但是，一旦有了要突出显示的新闻编辑室的ID，就可以使用更改多段线和圆圈标记的不透明度

但是，您的代码需要一些调整：您需要保留一个标记数组，并在标记中保留新闻编辑室的ID

另一件事：您不应该在文章循环中创建新闻编辑室标记；它创建的新闻编辑室标记与您的文章数量相同

以下是一个建议（通过点击编辑室标记进行选择）：

var selectedNewsroom=0；
var newsroomsbyd={}；
//创建编辑室标记
var newsroomMarkers=[]；
对于（i=0；i你太棒了！非常感谢！如果我找到搜索栏的部分，我会把它贴在这里！
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;
    }
}