单击 P 标签时显示信息窗口

问题描述

所以我的项目是使用物联网的车队管理。我们使用各种物联网技术来跟踪车辆并使用反应应用程序来显示进度，我想先为它打下基础，但我快到了。在下面共享的快照中，您可以看到我已经映射了示例 json 数据并在左侧显示了一个 p 标签。正如你所看到的，如果我点击标记，信息窗口会弹出，就像这样，当我点击左边各自的 P 标签时，我需要弹出相应的信息窗口。 Corresponding P TAG example、The Infowindow when I click on the marker

这是点击标记时弹出信息窗口的代码

function Map() {
    const [selectedVehicle,setselectedVehicle] = useState(null);

   return (
<GoogleMap 
defaultZoom = {12} 
defaultCenter = {{lat :13.082680,lng: 80.270721}} 
defaultOptions={{styles : MapStyles}}>

{vehicleLocations.Values.map((vehicle) => (
  <Marker key={vehicle.seperate_key} 
  position ={{
  lat: vehicle.Destination_Latitude,lng: vehicle.Destination_Longitude
  }} 

  onClick = {() => {
    setselectedVehicle(vehicle)
  }}

  icon = {{
    url : '/truck.png',scaledSize : new window.google.maps.Size(40,40) 
  }}

  />
  
  
))}

{selectedVehicle && (

  <InfoWindow  position ={{
  lat: selectedVehicle.Destination_Latitude,lng: selectedVehicle.Destination_Longitude
  }}
  onCloseClick={() =>{
    setselectedVehicle(null)
  }}>
  <div className='popup'>
  <h4>{selectedVehicle.Device_Name}</h4>
  {selectedVehicle.Timestamp}
  </div>
  </InfoWindow>

  )}


</GoogleMap>

如何在p标签的onClick函数中获取对应数据的相同infowindow

<div classname='details float-child'>
  <h1>Live Status </h1>
  {vehicleLocations.Values.map((vehicle) => (
    <div className="info-block">





  {/* if i click on this p tag. i want the marker on map to show for the corresponding one */}


    <p 
    
    className="info" 
    onClick={{}}
    style={{}} 
    key={vehicle.seperate_key}>
    
    ID = {vehicle.seperate_key},{vehicle.location_name}</p>
    

    </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）