谷歌地图反应标记和列表答案

【问题标题】：Google Maps React Markers and List谷歌地图反应标记和列表
【发布时间】：2019-03-20 11:39:00
【问题描述】：

我想知道是否有人使用 google-maps-react 库来创建标记和列表项。我有一个渲染地图、标记和信息窗口的地图组件。我还有另一个组件，其中包含代表每个标记值的所有位置列表 (li)。有什么方法可以让我点击列表项，并触发相应的 Marker 的点击事件。

【问题讨论】：

标签： reactjs google-maps google-maps-markers

【解决方案1】：

如果 List 保存了 Markers 的信息，则在尝试从 Child 与 Parent 进行通信时，您需要提升状态。因此，理想情况下，标记位置以及要调用的函数（在您的情况下为 Map）位于父级中。然后你从你的列表项中调用它，通过 props 将函数传递给 List 组件，如下所示：

<List handleMarkers={this.function}/>

通过 this.props.handleMarkers 访问 child 中的函数。

【讨论】：

【解决方案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供您参考

【讨论】：