从 JSON return 从 Google 地图中提取 formatted_address API
Extract formatted_address from JSON return from Google Maps API
我正在使用 google 地图 API 进行反向地理编码,但我无法提取 formatted_address
componentWillMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
},
(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: true, timeout: 20000 },
);
axios.get('https://maps.googleapis.com/maps/api/geocode/json?address='+ this.state.latitude +','+ this.state.longitude +'&key=__API_KEY__')
.then(results => {
this.setState({
place: results[0].formated_address
})
.catch((error) => {
this.setState({ error: error.message })
});
});
}
我该怎么做?
- 首先你需要在
getCurrentPosition
完成后调用 api
- 确保您的 api 密钥正确并且可以访问地理编码 api
- 从 response.data.results[0].formatted_address 访问第一个地址请注意,我将结果更改为 response 因为它是更具描述性的名称还请注意 formatted_address with double t
- 最终 catch 是在 then 之后调用的,而不是在 setState 之后调用的
完整的工作示例
componentWillMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
}, () => this.getGeocode()); // call the api after getCurrentPosition is finished
},
(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: true, timeout: 20000 },
);
}
getGeocode() {
axios.get('https://maps.googleapis.com/maps/api/geocode/json?address='+ this.state.latitude +','+ this.state.longitude +'&key=__API_KEY__') // be sure your api key is correct and has access to the geocode api
.then(response => {
console.log(response);
this.setState({
place: response.data.results[0].formatted_address // access from response.data.results[0].formatted_address
})
}).catch((error) => { // catch is called after then
this.setState({ error: error.message })
});
}
我正在使用 google 地图 API 进行反向地理编码,但我无法提取 formatted_address
componentWillMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
},
(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: true, timeout: 20000 },
);
axios.get('https://maps.googleapis.com/maps/api/geocode/json?address='+ this.state.latitude +','+ this.state.longitude +'&key=__API_KEY__')
.then(results => {
this.setState({
place: results[0].formated_address
})
.catch((error) => {
this.setState({ error: error.message })
});
});
}
我该怎么做?
- 首先你需要在
getCurrentPosition
完成后调用 api - 确保您的 api 密钥正确并且可以访问地理编码 api
- 从 response.data.results[0].formatted_address 访问第一个地址请注意,我将结果更改为 response 因为它是更具描述性的名称还请注意 formatted_address with double t
- 最终 catch 是在 then 之后调用的,而不是在 setState 之后调用的
完整的工作示例
componentWillMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
}, () => this.getGeocode()); // call the api after getCurrentPosition is finished
},
(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: true, timeout: 20000 },
);
}
getGeocode() {
axios.get('https://maps.googleapis.com/maps/api/geocode/json?address='+ this.state.latitude +','+ this.state.longitude +'&key=__API_KEY__') // be sure your api key is correct and has access to the geocode api
.then(response => {
console.log(response);
this.setState({
place: response.data.results[0].formatted_address // access from response.data.results[0].formatted_address
})
}).catch((error) => { // catch is called after then
this.setState({ error: error.message })
});
}