Question

我想知道是否有人使用google-maps-react库创建标记和列表项。我有一个正在渲染“地图”，“标记和信息窗口”的地图组件。我还有另一个组件，它具有代表每个标记值的所有位置列表（li）。有什么办法可以单击列表项，并触发适当的标记的单击事件。

Answer 1

如果列表包含标记的信息，则在尝试从子级到父级进行通信时，您需要提升状态。因此，理想情况下，Markers头寸以及调用函数（在您的情况下为Map）都位于父级中。然后从列表项中调用它，将函数通过道具传递给List组件，如下所示：

<List handleMarkers={this.function}/>

通过this.props.handleMarkers访问子项中的功能。

Answer 2

我猜你是说google-maps-react library，对吧？假设您有一个选择地址的组件：

const CityList = props => {
  return (
    <div>
      <ul>
        {props.items.map((item, index) => {
          return (
            <li key={index} onClick={e => props.onClick(e, item)}>
              {item.title}
            </li>
          );
        })}
      </ul>
    </div>
  );
};

然后，您可以引入所选值作为状态，并在单击地址列表项后更新该状态。更新状态将触发Map组件的重新呈现：

class App extends Component {
  state = {
    selectedItem: { lat: 0, lng: 0 }
  };

  showInfo(e, selectedItem) {
    this.setState({ selectedItem: selectedItem });
  }

  render() {
    return (
      <div>
        <CityList items={data} onClick={this.showInfo.bind(this)} />
        <MapContainer
          center={{ lat: -24.9923319, lng: 135.2252427 }}
          zoom={4}
          data={data}
          selectedItem={this.state.selectedItem}
        />
      </div>
    );
  }
}

Here is a demo供参考

Google Maps反应标记和列表

2 个答案: