[英]How to get a Google Place ID (placeId) from a Google Maps URL
[英]Get Place Details Using PlaceID
我已经设法使用 google.maps.places.AutocompleteService() 获取谷歌地点预测列表,当我在控制台中打印一个预测时,我得到 output 如下所示:
现在通过使用 place_id,我已经使用服务 google.map.places.PlacesService.getDetails 获取了放置的详细信息
predictionSelected = (prediction) => {
let placeDetails= this.googlePlaces.getDetails(
{ placeId: prediction.place_id },
function (results, status) {
console.log(results);
return results;
}
);
console.log(placeDetails); // results undefined
}
现在的问题是我无法在 getDetails 中使用 this.state 所以我试图返回结果。 由于 getDetails 是异步的,因此我无法正确返回结果。
无论如何在 getDetails 中使用 this.state 还是等到响应到来并在异步响应后执行以下操作?
这是我所有的 class
import React from "react";
/* global google */
export default class AddressPredictionsClass extends React.Component {
constructor(props) {
super(props);
this.componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
postal_code: 'short_name'
};
this.state = {
street_number: '',
route: '',
locality: '',
administrative_area_level_1: '',
postal_code: '',
is_disabled: true,
is_search_disabled: false,
predictions: [],
suggestions: [],
text: '',
setIndex: -1
};
/** preserve initial state */
this.baseState = this.state;
this.autocompleteService = React.createRef();
this.googlePlaces = '';
this.onKeyDown = this.onKeyDown.bind(this);
}
onKeyDown = (e) => {
/** some code **/
}
componentDidMount() {
if (!this.autocompleteService.current) {
this.autocompleteService.current = new google.maps.places.AutocompleteService();
}
let map = new google.maps.Map(document.createElement('div'));
this.googlePlaces = new google.maps.places.PlacesService(map);
}
getPlacePredictions = (input) => {
if (input === null) {
console.log('null input');
return false;
}
var request = {
input: input,
componentRestrictions: { country: 'au' },
types: ["geocode"]
}
this.autocompleteService.current.getPlacePredictions(
request,
predictions => {
if (predictions === null) {
this.setState(
{ predictions: [] }
)
} else {
this.setState(
{ predictions: predictions.map(prediction => prediction) }
)
}
}
);
}
predictionSelected = (prediction) => {
let placeDetails=this.googlePlaces.getDetails(
{ placeId: prediction.place_id },
function (results, status) {
return results;
}
);
console.log(placeDetails);
}
changeStateValue(type, val) {
/** some code **/
}
}
onChange = (e) => {
/** some code **/
}
renderSuggestions() {
/** some code **/
}
render() {
return (
<div>
<table id="address">
<tbody>
<tr>
<td className="">Street address</td>
<td className="">
<input onChange={event => this.getPlacePredictions(event.target.value)} className=""/>
{this.renderSuggestions()}
</td>
</tr>
</tbody>
</table>
</div>
);
}
}
您仍然可以使用this.state
来做到这一点。 查看下面的代码:
import React from "react";
import "./styles.css";
/* global google */
export default class App extends React.Component {
constructor(props) {
super(props);
this.componentForm = {
street_number: "short_name",
route: "long_name",
locality: "long_name",
administrative_area_level_1: "short_name",
postal_code: "short_name"
};
this.state = {
street_number: "",
route: "",
locality: "",
administrative_area_level_1: "",
postal_code: "",
is_disabled: true,
is_search_disabled: false,
predictions: [],
suggestions: [],
text: "",
setIndex: -1
};
/** preserve initial state */
this.baseState = this.state;
this.autocompleteService = React.createRef();
this.googlePlaces = "";
this.onKeyDown = this.onKeyDown.bind(this);
}
onKeyDown = e => {
/** some code **/
};
componentDidMount() {
if (!this.autocompleteService.current) {
this.autocompleteService.current = new google.maps.places.AutocompleteService();
}
let map = new google.maps.Map(document.createElement("div"));
this.googlePlaces = new google.maps.places.PlacesService(map);
}
getPlacePredictions = input => {
if (input === null) {
console.log("null input");
return false;
}
var request = {
input: input,
componentRestrictions: { country: "au" },
types: ["geocode"]
};
this.autocompleteService.current.getPlacePredictions(
request,
predictions => {
if (predictions === null) {
this.setState({ predictions: [] });
} else {
this.setState({
predictions: predictions.map(prediction => prediction)
});
this.predictionSelected(this.state.predictions);
}
}
);
};
predictionSelected = predictions => {
const places = [];
for (let prediction of predictions) {
this.googlePlaces.getDetails({ placeId: prediction.place_id }, function (
place,
status
) {
places.push(place);
});
}
this.setState({
...this.state,
places: places
});
};
renderSuggestions = () => {
console.log(
"predictions",
this.state.predictions.map(prediction => prediction)
);
if (this.state.places && this.state.places.length) {
console.log("places", this.state.places.map(place => place));
}
};
render() {
return (
<div>
<table id="address">
<tbody>
<tr>
<td className="">Street address</td>
<td className="">
<input
onChange={event =>
this.getPlacePredictions(event.target.value)
}
className=""
/>
{this.renderSuggestions()}
</td>
</tr>
</tbody>
</table>
</div>
);
}
}
这是一个有效的代码框。 确保首先在 index.html 中添加您的 API 键。
希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.