JavaScript中Leaflet地图添加多个标记有没有更简洁的编码方式？

优化方案 #

你可以把重复的样式参数抽成公共配置，再把所有标记的坐标、自定义内容统一存入数组，遍历生成即可，后续仅需修改数组内容就能完成标记的增删改，不用重复编写冗余代码。

方案1：所有标记弹窗内容、样式完全一致的情况 #

// 仅需修改这个数组里的坐标即可批量调整标记
const markerCoords = [
  [20, 20],
  [30, 30],
  // 剩余4个坐标直接追加到数组即可
]

// 公共样式，仅需定义一次
const commonCircleStyle = {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5,
  radius: 100
}

// 批量生成标记
markerCoords.forEach(coord => {
  L.circle(coord, commonCircleStyle).addTo(map).bindPopup('House')
})

方案2：不同标记弹窗内容不同的情况 #

如果需要每个标记对应不同的弹窗内容，可以把数组项改成对象存储对应配置：

const markerList = [
  { coord: [20, 20], popup: '房屋A' },
  { coord: [30, 30], popup: '房屋B' },
  // 其他标记配置直接追加即可
]

const commonCircleStyle = {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5,
  radius: 100
}

markerList.forEach(item => {
  L.circle(item.coord, commonCircleStyle).addTo(map).bindPopup(item.popup)
})

内容的提问来源于stack exchange，提问作者whatsupmyname