如何突出显示传单地图上的标记与表格行上的数据匹配？答案

【问题标题】：How to highlight marker on leaflet map with data match on table row?如何突出显示传单地图上的标记与表格行上的数据匹配？
【发布时间】：2019-11-19 22:59:55
【问题描述】：

我有一些数据，例如地名、纬度经度，这些数据显示在表格中，当我单击任何行时，它会获取地名并根据此在传单地图上显示突出显示的标记。但是当我单击另一行时，它也在地图上突出显示标记，但前一个仍然突出显示。我想突出显示新的而不是以前的。

当我单击表格上的行并创建标记时，我调用了一个函数。

rowClick:function(e, row){
   var cells = row.getCells();
   var rid   = cells[0].getData().id;
   var Latt  = cells[1].getData().Latitude;
   var Lang  = cells[2].getData().Longitude;

   alert("cell clicked - (" + Latt + ", " + Lang + ") " +rid);
   var marker = new L.marker([Latt, Lang]).addTo(mymap);
   marker.valueOf()._icon.style.backgroundColor = 'red';
   marker.bindPopup('' + rid).openPopup();
});

【问题讨论】：

标签： javascript jquery leaflet tabulator

【解决方案1】：

在您的情况下，您不想使用 bindPopup，因为正如您所注意到的，它重用了一个弹出窗口。

使用您自己的弹出窗口...

map.closePopup(myPopup); // close previous

myPopup =  L.popup(...);        
myPopup.setContent(...);
myPopup.setLatLng(...);
myPopup.openOn(map);

当您拥有地图之外的地点列表时，您可能需要添加一些事件侦听器：例如如果您在单击列表中的某个项目后单击标记会发生什么？

您还需要保持标记和表格项目之间的关系。

这里有一个完整的示例：http://franceimage.github.io/map（单击左侧工具栏中的第三个图标时会显示该表格）

【讨论】：