映射到React中的函数

Question

我对反应相对较新，我正在尝试将位置列表映射到谷歌地图API。我不知道如何将每个参数传递给谷歌API的函数。任何帮助都会很棒。提前谢谢。

export class Mapping extends React.Component {
state = {
zoom: 1,
}
render() {
Geocode.fromAddress("Eiffel Tower").then(
response => {
const { lat, lng } = response.results[0].geometry.location;
console.log(lat, lng);
},
error => {
console.error(error);
}
);
return (
<div>
<Map className="Map" center={[47, -29]} zoom={this.state.zoom}>
<TileLayer
attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer/tile/{z}/{y}/{x}"
/>
{this.fromAddress}
{data.features.map((loc, i) => 
<Marker key={i} position={[
loc.geometry.coordinates[0],
loc.geometry.coordinates[1]
]}/>
)}
</Map>
</div>
)
}
} 
export default Mapping;

Answer 1

考虑将Geocode.fromAddress调用放入componentDidMount方法中，这样，一旦位置被解析并保存到state中，组件就会被重新渲染。

以下是一个示例，演示如何显示由Geocode.fromAddress方法确定位置的标记：

class App extends Component {
state = {
position: null
};
componentDidMount() {
Geocode.fromAddress("Eiffel Tower").then(
response => {
this.setState({position : response.results[0].geometry.location})
},
error => {
console.error(error);
}
);
}
render() {
return (
<Map center={[48.8583736, 2.2922926]} zoom={17}>
<TileLayer
attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>
{this.state.position && <Marker position={this.state.position} />}
</Map>
);
}
}