Javascript 创建传单标记并通过循环对象列表将其存储在变量中

我正在制作一张单张地图，上面有各种企业的标记。 我通过在对象列表中循环创建标记，没有问题

但是，我希望能够使用我网站上的侧栏（传单地图之外）平移到这些标记中的每一个。我可以通过将每个单独的标记创建为变量来实现这一点，但我的列表太大，无法手动实现

我的业务列表如下所示：

   businesses = [{
       'name': 'Business name 1',
       'location': 'address',
       'id': 'businessid',
       'website': 'http://website',
       'coords':[0,0]
   },]

我通过以下操作创建了标记：

businesses.forEach(element => 
    L.marker([element.coords[0],element.coords[1]]).addTo(mymap)
   .bindPopup("<strong>"+element.name+"</strong>"));

businesss.forEach（元素=>
L.marker（[element.coords[0]，element.coords[1]]）.addTo（mymap）
.bindpoop（“”+元素.name+””）；

---

但我认为，如果将上述标记声明为变量，则只能在html侧栏中链接到它们。如何重新创建上面的代码，但将每个循环实例设置为变量？这可能吗？

我认为将映射元素添加到数组是一个好主意，您可以查看此链接，我认为当您检查线程并阅读多个意见时，它将解释更多内容

您只需要创建一个数组来存储每个标记的引用。让我们将此数组称为标记。然后，您的代码如下所示：

let markers = [];

businesses.forEach((element, i) => 
   markers[i] = L.marker([element.coords[0],element.coords[1]]).addTo(mymap)
   .bindPopup("<strong>"+element.name+"</strong>"));

---

您需要在标记和您身边的html元素之间创建一个引用。您可以使用

\u传单\u id

进行此操作，因为它是地图上唯一的id

我创建了一个可以传递图层的函数，读取标记的

\u传单\u id

，并将其作为自定义属性

数据标记

存储在html元素中

然后我添加了一个click侦听器

在click listener中，我读取了单击的html元素属性上的标记id

在地图上找到标记并平移到它

函数createSidebarElement（层）{
//第一步
var elm=“Marker:“+layer.getLatLng（）.toString（）+”；
//创建临时div以从字符串创建元素
var temp=document.createElement（'div'）；
temp.innerHTML=elm.trim（）；
var htmlElm=temp.firstChild
//步骤2
L.DomEvent.on（htmlem，'click'，zoomToMarker）；
附加（htmlem）；
}
功能缩放标记器（e）{
//步骤3
var clickedElm=e.target；
var-markerId=clickedElm.getAttribute（'data-marker'）；
//步骤4
var marker=fg.getLayer（markerId）；
map.panTo（marker.getLatLng（））；
}

默认演示：

您的用例演示：

panToMarker(i) {
    map.panTo(markers[i].getLatLng());
}

function createSidebarElement(layer){
    //Step 1
    var elm = "<div class='sidebar-elm' data-marker='"+layer._leaflet_id+"'>Marker: "+layer.getLatLng().toString()+"</div>";
  
  // create a temp div to create element from string
  var temp = document.createElement('div');
  temp.innerHTML = elm.trim();
  var htmlElm = temp.firstChild
  
  //Step 2
  L.DomEvent.on(htmlElm,'click',zoomToMarker);
  sidebar.append(htmlElm);
}

function zoomToMarker(e){
  //Step 3
  var clickedElm = e.target;
  var markerId = clickedElm.getAttribute('data-marker');
  
  //Step 4
  var marker = fg.getLayer(markerId);
  map.panTo(marker.getLatLng());
}