在 Javascript 中编写此点击事件/函数是否有更简单（更短）的符号？

Question

我正在制作 Leaflet 地图，地图上有 37 个标记。有没有更短的方法来编写下面的代码，或者我是否必须像下面使用前 2 个标记那样编写 37 次点击事件？

const marker1 = L.marker([45.899491, 16.844165],{icon:leafletIcon}).addTo(bjelovar);
const marker2 = L.marker([45.896034, 16.845399],{icon:leafletIcon}).addTo(bjelovar);

marker1.on('click',function(){

    const content1 = '<div class="modal-text">Ulica je nosila naziv po Josipu Blivajsu do početka 1930-tih godina kada postaje Ulica Frana Supila. Vodi od središnjeg Trga Eugena Kvaternika do Šetališta dr. Ivše Lebovića odnosno Dječjeg odjela knjižnice. Neke od najznačajnijih građevina svakako su njezine uglovnice: nekadašnje svratište Zvijezda te kuća Ivana Ružića uz trg, zgrada Prve hrvatske štedionice, zgrada Kraljevskog poštanskog i brzojavnog ureda te gostiona J. Svobode na kraju ulice.</div> <img class="modal-img" src="./images/full/Blivajsova/01 Blivajsova ulica (oko 1900).jpg"> <img class="modal-img" src="./images/full/Blivajsova/02 Blivajsova ulica (oko 1902).jpg"> <img class="modal-img" src="./images/full/Blivajsova/03 Blivajsova ulica (oko 1907).jpg">';
    
    L.control.window(bjelovar,{
        title: 'Blivajsova ulica'
    })
        .content(content1)
        .show()
});

marker2.on('click',function(){

    const content2 = '<div class="modal-text">Prethodno ulica Teodora Georgijevića, dobila je ime Tomaša Masaryka početkom 1930-tih godina. Formirana je širenjem grada u jugoistočnom pravcu, uvjetovanim dolaskom željeznice. Zamišljena je kao reprezentativan pojas historicističkih i secesijskih stambenih vila s kovanim ogradama i zelenilom prema ulici.</div> <img class="modal-img" src="./images/full/Cetvrt/01 Četvrt vila (oko 1909).jpg"> <img class="modal-img" src="./images/full/Cetvrt/02 Četvrt vila (oko 1912).jpg"> <img class="modal-img" src="./images/full/Cetvrt/03 Četvrt vila (oko 1914).jpg">';
    
    L.control.window(bjelovar,{
        title: 'Četvrt vila'
    })
        .content(content2)
        .show()
});

Answer 1

您可以将标记添加到特征组，然后读出标记并在循环中添加侦听器。

const group = L.featureGroup().addTo(bjelovar);
const marker1 = L.marker([45.899491, 16.844165],{icon:leafletIcon}).addTo(group);
const marker2 = L.marker([45.896034, 16.845399],{icon:leafletIcon}).addTo(group);

group.eachLayer((layer)=>{
  layer.on('click',function(){
    const content1 = '<div class="modal-text">Ulica je nosila naziv po Josipu Blivajsu do početka 1930-tih godina kada postaje Ulica Frana Supila. Vodi od središnjeg Trga Eugena Kvaternika do Šetališta dr. Ivše Lebovića odnosno Dječjeg odjela knjižnice. Neke od najznačajnijih građevina svakako su njezine uglovnice: nekadašnje svratište Zvijezda te kuća Ivana Ružića uz trg, zgrada Prve hrvatske štedionice, zgrada Kraljevskog poštanskog i brzojavnog ureda te gostiona J. Svobode na kraju ulice.</div> <img class="modal-img" src="./images/full/Blivajsova/01 Blivajsova ulica (oko 1900).jpg"> <img class="modal-img" src="./images/full/Blivajsova/02 Blivajsova ulica (oko 1902).jpg"> <img class="modal-img" src="./images/full/Blivajsova/03 Blivajsova ulica (oko 1907).jpg">';  
    L.control.window(bjelovar,{
        title: 'Blivajsova ulica'
    })
    .content(content1)
    .show()
  });

});

Answer 2

我的建议是将每个标记的所有数据存储在一个对象中，然后循环遍历它。像这样：

// Each marker identified by its title
const markerData = {
  'Blivajsova ulica': {
    content: '<div class="modal-text">Ulica je ...',
    coords: [45.899491, 16.844165]
  },
  'Četvrt vila' : {
    content: '<div class="modal-text">Prethodno ulica T...',
    coords: [45.896034, 16.845399]
  }
  
  // Add all the data
}

for (const [title, data] of Object.entries(markerData)) {

  const marker = L.marker(data.coords,{icon:leafletIcon}).addTo(bjelovar);

  marker1.on('click',function(){

    L.control.window(bjelovar, { title })
      .content(data.content)
      .show()
  });
}

Answer 3

当我们需要摆脱重复的动作时，我们将它们功能化掉（示例代码）：

[
  {lat: 45.899491, lon: 16.844165, title: 'Blivajsova ulica', text: '...'},
  {lat: 45.896034, lon: 16.844399, title: 'Četvrt vila', text: '...'},
]
.forEach(({lat, lon, title, text}) => {
   L.marker([lat, lon], {icon:leafletIcon}).addTo(bjelovar)
   .on('click',
      () => L.control.window(bjelovar, {title}).content(text).show()
   )
})

在 Javascript 中编写此点击事件/函数是否有更简单（更短）的符号？

Is there a simpler (shorter) notation for writing this click event / function(s) in Javascript?

javascript

leaflet

onclicklistener