Можно ли дать каждому маркеру в буклете по реакции индивидуальное имя класса? - PullRequest
Новая
       48

Можно ли дать каждому маркеру в буклете по реакции индивидуальное имя класса?

0 голосов
/ 23 марта 2020

Я использую ответную листовку и r c -таблицы и при выборе другой строки в таблице хочу отобразить соответствующий маркер. Я хочу нарисовать линию от строки до определенного маркера при наведении курсора с помощьюact-lineto, который принимает в качестве точек только classNames (ну, тоже координаты, но это мне не подходит), поэтому мне нужен отдельный класс маркер, класс, который может определить маркер на карте.

Как мне этого добиться?

Кажется, нет атрибута className для каждого маркера, только для группы маркеров ...

1 Ответ

0 голосов
/ 23 марта 2020

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

return (
    <LeafMap center={[deviceCoordinatesLat, deviceCoordinatesLong]} zoom={14} style={{height: "90vh"}}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                   attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
        />


        {props.devices.map(device => (

            <Marker
                className={device.serial}
                key={device.id}
                position={[degreesToCoord(device.coordinates)[0], degreesToCoord(device.coordinates)[1]]}
                icon={hoveredItem.id === device.id ?


                    markerBigBlue :
                    new L.Icon({
                        iconUrl: require('../little-blue-dot.png'),
                        iconSize: new L.Point(15, 15),
                        className: "little-blue-dot-" + device.id
                    })
                }
            >
                {hoveredItem.id === device.id ?
                    <LineTo
                        *from={"leaflet-marker-icon little-blue-dot-" + device.id + " leaflet-zoom-animated leaflet-interactive"}*
                        to={"invisible-blue-dot-" + device.id}
                        borderWidth={1}
                        zIndex={100}
                        borderColor="#0C86B8"
                    />
                    : <div></div>}
                <Popup>
                    <span>{device.model} {device.serial}</span>
                </Popup>}
            </Marker>
        ))}
    </LeafMap>
)
...