谷歌地图反应标记和列表

Question

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

Answer 1

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

<List handleMarkers={this.function}/>

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

Answer 2

我猜你的意思是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>
);
}
}

这是一个演示供您参考