如何统计对象属性值、生成动态按钮并绑定事件及地图标记问题求助

Hey there! Let's break down your two questions and walk through practical solutions for each one, based on the data and details you shared.

I’ll assume you want to count occurrences of a specific property (like status from your data) and generate buttons that trigger actions when clicked. Here’s a step-by-step implementation using JavaScript:

Step 1: Count property values #

First, we’ll iterate through your data to tally up how many times each status (or any other property) appears:

// Your sample data
const apiResponse = { 
  "page": 2, 
  "data": [ 
    { "id": 4, "first_name": "Eve", "last_name": "Holt", "lat":"25.6599899", "lng":"45.3664646", "status":"0" }, 
    { "id": 5, "first_name": "Charles", "last_name": "Morris", "lat":"25.99899", "lng":"45.4646", "status":"1" }, 
    // Add more data entries here
  ] 
};

// Tally status counts
const statusCounter = {};
apiResponse.data.forEach(item => {
  const status = item.status;
  statusCounter[status] = (statusCounter[status] || 0) + 1;
});

Step 2: Generate dynamic buttons & bind click events #

Next, we’ll create buttons for each status value, add them to your page, and attach click handlers for your desired logic (like filtering map markers):

// Get the container where buttons will live (add this div to your HTML: <div id="button-container"></div>)
const buttonContainer = document.getElementById('button-container');

// Create buttons for each status
Object.entries(statusCounter).forEach(([status, count]) => {
  const btn = document.createElement('button');
  btn.textContent = `状态${status}：${count}条数据`;
  btn.style.margin = '0 8px 8px 0'; // Add some spacing

  // Bind click event (customize this logic to fit your needs)
  btn.addEventListener('click', () => {
    console.log(`点击了状态${status}的按钮，对应${count}条数据`);
    // Example: Filter map markers to show only this status
    // markers.forEach(marker => {
    //   marker._icon.style.display = marker.status === status ? 'block' : 'none';
    // });
  });

  buttonContainer.appendChild(btn);
});

Since you already have markers showing up correctly, here are common, useful features to implement next, tailored to your data structure:

1. 按状态区分Marker样式 #

用不同颜色或图标标记不同status的marker，让用户一眼就能区分：

// Example using Leaflet.js (可根据你使用的地图库调整)
const markers = [];

apiResponse.data.forEach(item => {
  // 根据状态设置marker颜色
  const markerColor = item.status === '0' ? '#3498db' : '#e74c3c'; // 状态0用蓝色，状态1用红色
  
  const customIcon = L.divIcon({
    className: 'status-marker',
    html: `<div style="width: 14px; height:14px; border-radius:50%; background:${markerColor}; border:2px solid white;"></div>`
  });

  const marker = L.marker([item.lat, item.lng], { icon: customIcon }).addTo(map);
  marker.status = item.status; // 把状态存在marker上，方便后续操作
  markers.push(marker);
});

2. Marker点击弹窗展示详情 #

点击marker时弹出信息窗口，展示用户的姓名、ID等详情：

apiResponse.data.forEach(item => {
  const marker = L.marker([item.lat, item.lng]).addTo(map);
  // 绑定包含用户信息的弹窗
  marker.bindPopup(`
    <div style="padding: 8px;">
      <h4>${item.first_name} ${item.last_name}</h4>
      <p>ID: ${item.id}</p>
      <p>状态: ${item.status === '0' ? '未激活' : '已激活'}</p>
    </div>
  `);
});

3. 分页加载更多数据 #

你的数据里包含page字段，说明是分页接口，可以做一个“加载更多”按钮，点击请求下一页数据并添加marker：

let currentPage = 2; // 从当前的第2页开始
const loadMoreBtn = document.getElementById('load-more-btn');

loadMoreBtn.addEventListener('click', async () => {
  currentPage++;
  try {
    const response = await fetch(`你的接口地址?page=${currentPage}`);
    const newData = await response.json();
    
    // 把新数据的marker添加到地图上
    newData.data.forEach(item => {
      L.marker([item.lat, item.lng]).addTo(map).bindPopup(`<h4>${item.first_name}</h4>`);
    });
  } catch (err) {
    console.error('加载更多数据失败:', err);
    loadMoreBtn.disabled = true;
    loadMoreBtn.textContent = '没有更多数据了';
  }
});

4. 按状态筛选Marker #

结合问题1的按钮，实现点击按钮只显示对应状态的marker：

// 在问题1的按钮点击事件中添加筛选逻辑
btn.addEventListener('click', () => {
  markers.forEach(marker => {
    if (marker.status === status) {
      map.addLayer(marker); // 显示marker
    } else {
      map.removeLayer(marker); // 隐藏marker
    }
  });
});

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