我试着在Map的标记上添加InfoWindows(使用google-maps-react),但是不起作用,我不明白为什么。
const InfoPage = ({data}) => {
const [selectedElement, setSelectedElement] = useState(null)
return (
<div className="mapcontainer">
<Map
google={google}
initialCenter={
{
lat: 48.856614,
lng: 2.3522219
}
}
zoom={12}>
{data.map((element, index) => {
return (
<Marker
title={element.fields.nom}
position={{
lat : element.fields.geo_point_2d[0],
lng: element.fields.geo_point_2d[1]}}
onClick={()=>{setSelectedElement(element)}}
/>
)})}
{selectedElement ? (
<InfoWindow
position={{
lat : selectedElement.fields.geo_point_2d[0],
lng: selectedElement.fields.geo_point_2d[1]}}
onCloseClick={()=>{setSelectedElement(null)}}
>
<div>
<h1>info</h1>
</div>
</InfoWindow>) : null }
</Map>
</div>
);
}
1条答案
按热度按时间eqqqjvef1#
由于您将单击标记以显示InfoWindow,因此您可以使用InfoWindow的
marker
参数而不是position
参数。您还需要使用InfoWindow的visible
参数并将其设置为true以显示它。您可以检查此simple code是如何完成的(我只是使用json文件中的数据)。代码片段如下: