Javascript 如何在将鼠标移到div项目（如AirBnb）上时在地图中显示标记位置

我在左侧的div项目中有一个页面，如项目的图像、标题、详细信息、地址等。在右侧，我有一个地图（传单地图），显示从所有这些左侧项目中提取的地址标记。现在，我想在鼠标悬停在地图左侧时显示标记位置及其地址信息。很快，您可以在中看到实时示例

我正在使用React传单制作地图，并按照您看到的进行反应。但数据尚未从数据库中获取，它是虚拟数据。地址由lat和lng坐标定义

Bikes.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

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>

<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>

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

{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}

从“../../data”导入{BIKES，BikeTypes，BikeSize}
常数=（）=>{
返回

}
导出默认自行车

MapContainer.js（使用react传单制作的组件）

const-MapContainer=（道具）=>{
常量默认纬度=40.500；
常数偏差=49.500；
返回(
{
道具，coords？
props.coords.map（标记=>{
返回
{mark.title}
{mark.size}“·{mark.price.first}azn/s
})：null
}
)
}
导出默认映射容器

BikesList.js（左侧-列表）

const BikesList=（道具）=>{
if（props.items.length==0）{
返回Elan tapılmadı
}
返回(

{props.items.map（（bike）=>(
))}

)
}
导出默认BikesList

我自己找到了一个解决方案。很简单：）这是：

首先在Bikes.js文件中，我创建了一个isHovered状态，并将其作为默认值设置为null具有id的函数，该函数将从特定悬停项目的id获取它。在函数中，我将setIsHovered的值更改为此发送id。因此，我使用道具共享了isHovered和handleHoverMarker

Bikes.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

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>

<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>

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

{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}

const[isHovered，setIsHovered]=useState（null）
const handleHoverMarker=（id）=>{
SETISHOVERD（id）
}

第二个，handleHoverMarker道具发送到代表列表中每个项目的BikeItem组件

BikesList.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

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>

<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>

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

{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}

{props.items.map（（bike）=>(
))}

在BikeItem.js中设置mouseHover事件，并使用handleHoverMarker（id）函数传递id。这样我们就可以知道哪个项目的id悬停

注意：我没有在BikeItem中编写所有代码。js只做了必要的部分

BikeItem.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

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>

<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>

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

{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}

props.handleHoverMarker（props.id）：null}onMouseLeave={（）=>props.handleHoverMarker（null）：null}key={props.id}>

现在我们回到MapContainer，它将显示悬停项的位置

MapContainer.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

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>

<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>

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

{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}

{props.coords？
props.coords.map（标记=>{
返回
{mark.title}
})：null}

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

注意：我无法改变marker的风格，因为我没有从传单地图的文档中找到方法。所以逻辑是一样的，你也可以用谷歌地图来做。祝你好运：）