由于某种原因,当我单击单个标记时,所有信息窗口都会显示。我希望当我单击一个标记时会出现一个信息窗口。
有人可以解释为什么所有标记中的所有信息窗口都会显示吗?因此,当我关闭它时,InfoWindow 也会关闭。
当我单击目标标记时,预期行为是 InfoWindow 打开。
class VenuesMap extends Component {
constructor(props) {
super(props);
this.state = {
isOpen: false,
};
}
handleToggleOpen = () => {
this.setState({
isOpen: true,
});
};
handleToggleClose = () => {
this.setState({
isOpen: false,
});
};
render() {
const venues = this.props.venues;
let markers;
let userMarkers = (
<Marker
position={{
lat: Number(latCurrentLocation),
lng: Number(lngCurrentLocation),
}}
/>
);
if (venues !== null) {
markers = venues.map((location, i) => {
const lat = location.venue.location.lat;
const lng = location.venue.location.lng;
const index = i + 1;
return (
<Marker
key={i}
position={{ lat: lat, lng: lng }}
label={index.toString()}
onClick={() => this.handleToggleOpen()}
>
{this.state.isOpen && (
<InfoWindow onCloseClick={() => this.handleToggleClose()}>
<span>Something</span>
</InfoWindow>
)}
</Marker>
);
});
}
const MapWithAMarker = withGoogleMap(props => (
<GoogleMap
defaultZoom={this.state.zoom}
defaultCenter={{
lat: Number(latCurrentLocation) || 40.7128,
lng: Number(lngCurrentLocation) || -74.006,
}}
>
{markers}
{userMarkers}
</GoogleMap>
));
const googleMap = (
<MapWithAMarker
containerElement={
<div style={{ height: this.props.containerElement }} />
}
mapElement={<div style={{ height: this.props.mapElement }} />}
/>
);
return <div>{googleMap}</div>;
}
}
您需要的是每个信息窗口都有一个单独的 isOpen 状态,否则所有窗口都会打开,如果isOpen
是真的。
选项 1:您可以制作一个组件<MarkerWithInfoWindow>
,在里面你可以维护它自己的isOpen
状态。不过,这仍然允许通过逐一单击来同时打开多个。
选项2:
如果您想保持结构相同(这样您可以在另一个打开时关闭一个),您可以存储一个openInfoWindowMarkerId
在状态下,像这样
this.state = {
openInfoWindowMarkerId: ''
}
那么你可以做类似的事情
handleToggleOpen = (markerId) => {
this.setState({
openInfoWindowMarkerId: markerId
});
}
你可以这样称呼它
<Marker
key={i}
position={{ lat: lat, lng: lng}}
label={index.toString()}
onClick={() => this.handleToggleOpen(i)} // marker ID is the key here.
>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)