如何将重复相似的Leaflet标记代码合并为单函数+JSON对象实现

核心术语解释 #

• 数据驱动开发：将重复逻辑与数据分离，用结构化数据（如JSON）控制内容生成，避免硬编码重复代码，提升可维护性。
• JSON：JavaScript原生支持的轻量级数据格式，用键值对存储结构化信息，适合批量管理同类数据（比如城市信息）。
• 数组遍历：通过forEach等方法循环处理数组中的每一项，批量执行相同操作，替代重复的单例代码。
• Leaflet Marker/DivIcon：Leaflet地图库中，Marker用于创建地图点位，DivIcon支持自定义HTML结构的图标样式。

实现步骤与代码示例 #

1. 定义结构化城市数据 #

把所有城市的核心信息整理成JSON数组，后续所有逻辑都基于这份数据生成：

const citiesData = [
  {
    name: "valkeakoski",
    displayName: "Valkeakoski",
    coords: [61.2712, 24.0333]
  },
  {
    name: "rovaniemi",
    displayName: "Rovaniemi",
    coords: [66.4979, 25.7199]
  },
  {
    name: "oulu",
    displayName: "Oulu",
    coords: [65.0127, 25.4714]
  }
  // 新增城市只需在这里添加对应数据项即可
];

2. 编写批量创建标记的函数 #

用一个函数封装所有重复逻辑，遍历数据数组生成标记并添加到图层：

function createCityMarkers(citiesLayer) {
  citiesData.forEach(city => {
    // 创建自定义图标
    const cityIcon = new L.divIcon({
      html: `<i class="fa fa-dot-circle-o"></i>${city.displayName}`,
      iconSize: [20, 20],
      className: 'myicon city'
    });

    // 创建标记并绑定点击事件
    const cityMarker = new L.marker(city.coords, {
      icon: cityIcon,
      title: city.displayName,
      name: city.name
    }).on('click', function() {
      cityInfo(this);
    });

    // 将标记添加到目标图层
    citiesLayer.addLayer(cityMarker);
  });
}

// 调用函数，传入你的cities图层实例
createCityMarkers(cities);

3. 扩展：从外部JSON文件加载数据 #

如果城市数据较多或需要动态更新，可以把数据单独存为cities.json文件，通过fetch加载：

// 加载外部JSON数据
fetch('cities.json')
  .then(res => res.json())
  .then(citiesData => {
    // 复用遍历逻辑
    citiesData.forEach(city => {
      const cityIcon = new L.divIcon({
        html: `<i class="fa fa-dot-circle-o"></i>${city.displayName}`,
        iconSize: [20, 20],
        className: 'myicon city'
      });

      const cityMarker = new L.marker(city.coords, {
        icon: cityIcon,
        title: city.displayName,
        name: city.name
      }).on('click', () => cityInfo(this));

      cities.addLayer(cityMarker);
    });
  });

优势说明 #

• 消除冗余代码：无需为每个城市重复编写标记创建、事件绑定、图层添加的逻辑。
• 易维护：新增/修改城市只需调整JSON数据，无需修改核心逻辑代码。
• 结构清晰：数据与业务逻辑分离，代码可读性大幅提升。

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