当鼠标悬停在 div 项目上时如何在 map 中显示标记位置 - 如 AirBnb

Question

我在左侧 div 项目中有一个页面，如项目的图像、标题、其详细信息、地址 ex。 在右侧，我有一张 map（传单地图），显示了从所有这些左侧项目中获取的地址标记。 现在我想在鼠标 hover 到左侧信息及其地址时显示 map 上的标记位置。 很快您就可以在airbnb.com中看到实例

我将 React Leaflet 用于 map 和 React，如您所见。 但是数据还没有从数据库中获取，它是虚拟数据。 地址是用纬度和经度坐标定义的

自行车.js

import { BIKES, BikeTypes, BikeSize } from '../../data'
const Bikes = () => {
    return <div className="bikes-page">
        <div>
            <hr className="bike-bottom-line" />
            <BikesList items={BIKES} />
        </div>
        <div className="bikes-map">
            <MapContainer style={{ height: '50rem' }} coords={BIKES} mapZoom={9} />
        </div>
    </div>
}

export default Bikes

MapContainer.js （使用 react-leaflet 制作的组件）

const MapContainer = (props) => {
    const DEFAULT_LATITUDE = 40.500;
    const DEFUALT_LANGITUDE = 49.500;
    return (
        <Map style={props.mapStyle} center={[DEFAULT_LATITUDE, DEFUALT_LANGITUDE]} zoom={props.mapZoom || 7} >
            <TileLayer
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            />
            {
                props.coords ?
                    props.coords.map(mark => {
                        return <Marker
                            position={[mark.location.lat, mark.location.lng]}
                            icon={biker}
                            key={mark.id} >
                            <Popup className="popup">
                                <Link to={`/b/${mark.id}`} className="popup-container">
                                    <img src={mark.images[0]} alt={mark.title} />
                                    <div className="popup-container__title">
                                        <h3> {mark.title} </h3>
                                        {mark.size}" · {mark.price.first}azn/s
                                    </div>
                                </Link>
                            </Popup>
                        </Marker>
                    }) : null
            }

        </Map >
    )
}

export default MapContainer

BikesList.js （左侧 - 列表）

const BikesList = (props) => {
    if (props.items.length === 0) {
        return <h2>Elan tapılmadı</h2>
    }

    return (
        <ul className="bikes-list">
            {props.items.map((bike) => (
                <BikeItem
                    key={bike.id}
                    id={bike.id}
                    image={bike.images[0]}
                    title={bike.title}
                    city={bike.city}
                    size={bike.size}
                    price={bike.price.first}
                    creator={bike.creator}
                    maxLength={24}
                />
            ))}
        </ul>
    )
}

export default BikesList

Answer 1

我自己找到了解决方案。 这很容易:) 这是：

首先，在 Bikes.js 文件中，我创建了一个isHovered state 并默认为 null。 然后使用 id 制作 handleHoverMarker(id) function ，它将从特定悬停项目的id中获取。 在 function 中，我将 setIsHovered 的值更改为此发送的 id。 所以我用道具分享了isHovered和handleHoverMarker 。

自行车.js

const [isHovered, setIsHovered] = useState(null)
const handleHoverMarker = (id) => {
        setIsHovered(id)
}
<div>
   <BikesList handleHoverMarker={handleHoverMarker} items={filteredDataState} />
</div>
<div className="bikes-map">
   <MapContainer isHovered={isHovered} style={{ height: '50rem' }} coords={BIKES} mapZoom={9} />
</div>

其次，将 handleHoverMarker道具发送到代表列表中每个项目的 BikeItem 组件。

BikesList.js

<ul className="bikes-list">
            {props.items.map((bike) => (
                <BikeItem
                    key={bike.id}
                    id={bike.id}
                    image={bike.images[0]}
                    title={bike.title}
                    city={bike.city}
                    size={bike.size}
                    price={bike.price.first}
                    creator={bike.creator}
                    maxLength={24}
                    handleHoverMarker={props.handleHoverMarker}
                />
            ))}
</ul>

在BikeItem.js 中设置 mouseHover 事件并通过handleHoverMarker(id) function 传递 id。这样我们就知道哪个项目悬停了 id。

注意：我没有把所有的代码都写在 BikeItem.js 中，只取了必要的部分

BikeItem.js

<li onMouseEnter={()=> props.handleHoverMarker(props.id):null} onMouseLeave={()=>props.handleHoverMarker(null):null} key={props.id}>

所以在这里我们回到 MapContainer，它将显示悬停项目的位置

MapContainer.js

{props.coords ?
   props.coords.map(mark => {
                return <Marker
                position={[mark.location.lat, mark.location.lng]}
                icon={biker}
                opacity={props.isHovered === mark.id ? .7 :1}
                key={mark.id} >
                   <Popup className="popup">
                     <Link to={`/b/${mark.id}`} className="popup container">
                       <div className="popup-container__title">
                          <h3> {mark.title}</h3>
                       </div>
                     </Link>
                </Popup>
               </Marker>
 }) : null}

在这里，我使用从Bikes.js文件发送的 props.isHovered 有条件地更改了不透明度值。

注意：我无法更改标记的样式，因为我没有从 leaflet map 的文档中找到方法。所以逻辑是一样的，你也可以用谷歌地图来做。 祝你好运:)