import React, { Component } from "react";
import { Marker, InfoWindow } from "react-google-maps";
import { labeledIcon } from "./Icons";
let closeInfoWindowFn;
class MapMarker extends Component {
state = {
infoWindowOpen: false
};
closeInfoWindow = () => {
console.log("closeInfoWindow");
this.setState({ infoWindowOpen: false });
};
openInfoWindow = () => {
console.log("openInfoWindow");
const isOpen = this.state.infoWindowOpen;
if (!isOpen) this.setState({ infoWindowOpen: true });
if (
(closeInfoWindowFn && closeInfoWindowFn !== this.closeInfoWindow) ||
isOpen
)
closeInfoWindowFn();
closeInfoWindowFn = this.closeInfoWindow;
};
render() {
const props = this.props;
return this.state.infoWindowOpen && props.infoWindowLabel;
}
}
export default MapMarker;
为了确保一次在带有多个标记的google地图上一次打开一个infoWindow
,我定义了一个变量closeInfoWindowFn
,它指向的closeInfoWindow
方法先前打开的InfoWindow
。
当单击另一个标记时,将在openInfoWindow
中调用该函数。
它有效,但是它是反模式吗?