google-maps-react onClick onMarkerClick 来自兄弟组件的子组件

Question

我想单击名为 <RenderTable/> 的 </Main> 子组件并激活 <MapContainer /> 中使用的 onMarkerClick 方法，这会显示 <InfoWindow/>。也许我需要在 app.js 中创建一个单一的真实来源，并可能传入 key 或 json 值以匹配标记？

app.js 组件文件的一部分是这样的：

function App() {
  return (
    <div className="App">
      <Main />
      <MyTaxiMain />
      <MapContainer />
    </div>
  );
}

export default App;

这里是 map.js 控制 <MapContainer /> 的部分：

 return (
      <div className="map-class">
        <Map
          google={this.props.google}
          style={style}
          initialCenter={{
            lat: 53.5511,
            lng: 9.9937
          }}
          zoom={13}
        >
          {Car2go.placemarks.map((content, index) => {
            return (
              <Marker
                title={(index + 1).toString()}
                name={content.name}
                interior={content.interior}
                exterior={content.exterior}
                type="car2go"
                position={{
                  lat: content.coordinates[1],
                  lng: content.coordinates[0]
                }}
                onClick={this.onMarkerClick}
                icon={{
                  url: require("../images/car2go-pin.svg"),
                  anchor: new google.maps.Point(5, 58)
                }}
                key={index}
              />
            );
          })}

我正在使用 Car2go json 文件渲染地图的长度和纬度。

Answer 1

将App组件转换为class组件，并创建状态对象并绑定class方法。

class App extends React.Component {
  constructor(props) {
    super(props); // needed because we're using state and also, binding a method.
    this.state = { isMainClicked: false };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // do whatever needs to be done.
    // change the value of "isMainClicked" to true
    this.setState({ isMainClicked: true });
  }

  render() {
    return (
      <div className="App">
        <Main handleClick={this.handleClick} />
        <MyTaxiMain />
        <MapContainer isMainClicked={this.state.isMainClicked} />
      </div>
    );
  }
}

在内部，将 handleClick 属性传递给，然后在旨在激活 onMarkerClick.

的方法内部调用 handleClick()

然后，在内部，当 isMainClicked 为 true 时调用 onMarkerClick。

应该可以了。

google-maps-react onClick onMarkerClick 来自兄弟组件的子组件

google-maps-react onClick onMarkerClick from sibling component's child

javascript

google-maps

google-maps-markers

reactjs

google-maps-react