如何基于特定值筛选JSON对象？Leaflet地图技术实践问询

你的核心逻辑（通过occasion和vegan组合匹配对应图标）是完全正确的，只是几个代码细节没处理到位，下面给你修正和优化后的完整方案：

1. 先理清几个关键问题 #

（1）无需额外转换数组 #

myObj本身就是JSON解析后的数组，每个元素是餐厅对象，直接通过myObj[i].属性名就能访问对应值，比如：

// 获取第i个餐厅的场景
const occasion = myObj[i].occasion;
// 获取第i个餐厅的素食状态（注意JSON里是数字0/1，不是字符串）
const isVegan = myObj[i].vegan === 1;

（2）不要在循环里重复创建图标 #

每次循环都创建新的L.icon实例会浪费性能，应该提前定义好所有12种图标，循环里直接根据条件选择即可。

（3）坐标需要解析成数字 #

JSON里的coordinates是字符串，要分割成纬度和经度的数字，才能传给Leaflet的marker。

2. 完整代码示例 #

步骤1：提前定义所有图标 #

// 按场景+素食状态分类定义图标，覆盖所有12种情况
const restaurantIcons = {
  breakfast: {
    vegan: L.icon({ iconUrl: 'icons/breakfasticon_vegan.png', iconSize: [20, 20] }),
    nonVegan: L.icon({ iconUrl: 'icons/breakfasticon.png', iconSize: [20, 20] })
  },
  Cafes: {
    vegan: L.icon({ iconUrl: 'icons/cafesicon_vegan.png', iconSize: [20, 20] }),
    nonVegan: L.icon({ iconUrl: 'icons/cafesicon.png', iconSize: [20, 20] })
  },
  "Save money": {
    vegan: L.icon({ iconUrl: 'icons/savemoneyicon_vegan.png', iconSize: [20, 20] }),
    nonVegan: L.icon({ iconUrl: 'icons/savemoneyicon.png', iconSize: [20, 20] })
  },
  // 补充剩下3种场景的图标定义...
};

步骤2：初始化地图并遍历数据添加标记 #

// 初始化Leaflet地图（根据你的数据调整中心点和缩放级别）
const map = L.map('map').setView([50.95, 6.95], 13);
// 添加基础地图图层（用OpenStreetMap示例）
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// 遍历餐厅数据（这里用fetch异步读取JSON，比同步XMLHttpRequest更友好）
fetch('data.json')
  .then(response => response.json())
  .then(restaurants => {
    restaurants.forEach(restaurant => {
      // 获取当前餐厅的场景和素食状态
      const occasion = restaurant.occasion;
      const isVegan = restaurant.vegan === 1;

      // 匹配对应的图标，处理未知场景的容错
      let selectedIcon;
      if (restaurantIcons[occasion]) {
        selectedIcon = isVegan ? restaurantIcons[occasion].vegan : restaurantIcons[occasion].nonVegan;
      } else {
        selectedIcon = L.icon({ iconUrl: 'icons/default.png', iconSize: [20, 20] });
        console.warn(`未配置场景${occasion}的图标，使用默认图标`);
      }

      // 解析坐标：分割字符串并转成数字（Leaflet要求[纬度, 经度]顺序）
      const [lat, lng] = restaurant.coordinates.split(', ').map(Number);

      // 添加标记到地图，绑定弹窗显示餐厅信息
      L.marker([lat, lng], { icon: selectedIcon })
        .addTo(map)
        .bindPopup(`
          <strong>${restaurant.name}</strong><br>
          场景: ${occasion}<br>
          预算: ${restaurant.budget}<br>
          素食选项: ${isVegan ? '是' : '否'}
        `);
    });
  })
  .catch(error => console.error('读取餐厅数据失败:', error));

3. 替换你原来的同步JSON读取逻辑 #

原来的同步XMLHttpRequest会阻塞页面渲染，建议用上面的fetch异步方式，如果你坚持用同步方法，也可以保留，但要确保myObj是正确的数组后再执行遍历逻辑。

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