reactjs - 谷歌地图反应标记和列表

Question

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

标签： reactjsgoogle-mapsgoogle-maps-markers

Answer 1

我猜你的意思是google-maps-react图书馆，对吧​​？假设您有一个组件来选择地址：

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>
    );
  }
}

这是一个演示供您参考