React 传单如何让所有标记都带有特定图标，但使用不同图标激活的标记

Question

所以我正在尝试使用与其他非活动标记不同的活动标记。

所以基本上我想要这样的东西。

为了显示我正在使用的所有图标。

显示在地图里面

{parkdata.features.map(park =>(
          <Marker key = {park.properties.PARK_ID} position={[
            park.geometry.coordinates[1], 
            park.geometry.coordinates[0]
           
          ]}
          onClick={()=>{this.selected(park);

用于更改活动图标的所选功能。但它似乎没有做任何事情

 selected(park){
    return(
    <Marker key = {park.properties.PARK_ID} position={[
      park.geometry.coordinates[1], 
      park.geometry.coordinates[0]
     
    ]}
    icon= {active}
    />
    )
  }

更新：这就是我现在拥有的。

因此，当我单击其中一个标记时，我想更改为不同的图标。现在，它什么也没做。

Answer 1

以下示例演示了如何创建标记并在单击标记时更新图标属性：

function createIcon(url) {
  return new L.Icon({
    iconUrl: url,
  });
}

function MapExample(props) {
  const [selectedIndex, setSelectedIndex] = useState(-1);

  function handleClick(e) {
    setSelectedIndex(e.target.options.index) //get index via custom marker property
  }

  function getMarkerIcon(index) {
    if(index === selectedIndex)
          return createIcon("/bigcity_red.png");
    return createIcon("/bigcity_green.png");
  }

  return (
    <Map center={props.center} zoom={props.zoom}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      {props.data.map((item, index) => (
        <Marker
          key={index}
          index={index}
          position={item.position}
          icon={getMarkerIcon(index)}
          onclick={handleClick}
        />
      ))}
    </Map>
  );
}

备注：

icon 属性 for Marker component expects the value of L.Icon type
selectedIndex 状态用于跟踪选定的标记（索引）

Here is a demo供大家参考

React 传单如何让所有标记都带有特定图标，但使用不同图标激活的标记

React leaflet How to have all markers with a specific icons but the one active with a different icon

dictionary

marker

leaflet

reactjs

react-leaflet