Листовка React Как сделать все маркеры с определенными c значками, но активным с другим значком

Question

Итак, я пытаюсь иметь активный маркер, отличный от остального неактивного маркера.

В общем, я хочу что-то вроде этого.

To display all of the icon I am using the following.

that is displayed inside the map

{parkdata.features.map(park =>(
          {this.selected(park);

            

The selected function that was intended to be used to change the active icon. But it does not seem to be doing anything

 selected(park){
    return(
    
    )
  }

UPDATE: This is what I have now.

введите описание изображения здесь

Итак, когда я нажимаю на один из маркеров, я хочу изменить его на другой значок. На данный момент он просто ничего не делает.

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 свойство для компонента Marker ожидает значение of L.Icon type
• selectedIndex состояние используется для отслеживания выбранного маркера (индекса)

Вот демонстрация для справки