如何点击复选框动态添加Mapbox标记？

你可以通过React状态管理来实现动态添加标记，具体操作如下：

1. 用状态管理标记集合
   把原本静态的标记数据放到React状态数组中，后续通过修改状态就能动态更新标记列表。

2. 编写点击事件处理函数
   在generateNewMarker函数里，更新状态数组，加入新的标记坐标（你可以设置固定坐标，也可以随机生成，按需调整）。

3. 遍历状态数组渲染标记
   替换原来的静态<Marker>组件，通过map遍历状态数组，动态生成所有标记。

完整代码示例：

import { useState } from 'react';
// 假设已导入Map、Marker组件及pin图片资源

function MapWithDynamicMarkers() {
  // 初始化状态，包含原有两个静态标记
  const [markers, setMarkers] = useState([
    { lng: lng, lat: lat },
    { lng: lng2, lat: lat2 }
  ]);

  const generateNewMarker = () => {
    // 示例：添加一个固定坐标的新标记，可替换为随机坐标或自定义逻辑
    const newMarker = { lng: 116.4074, lat: 39.9042 };
    setMarkers(prevMarkers => [...prevMarkers, newMarker]);
  };

  return (
    <>
      <input type="checkbox" onClick={generateNewMarker} />
      <Map>
        {markers.map((marker, index) => (
          <Marker 
            key={index} 
            longitude={marker.lng} 
            latitude={marker.lat} 
            anchor="bottom"
          >
            <img className='w-6' src={pin} />
          </Marker>
        ))}
      </Map>
    </>
  );
}

export default MapWithDynamicMarkers;

补充说明 #

• 给每个<Marker>添加key属性，保证React列表渲染的性能与正确性
• 如果需要根据复选框的勾选状态切换标记的添加/移除，可以在generateNewMarker中通过event.target.checked判断状态，比如勾选时添加、取消时移除最后一个标记，逻辑可按需调整

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