在React应用程序中从Google Places Library返回业务联系信息

Question

我正在尝试从Google API返回一个包含业务详细信息、地址电话号码和网站的对象。我曾经使用过API的地方，但却遇到了cors问题，因为它是一个服务器端API。建议使用Places库，但我找不到能返回我想要的内容的参考/示例。

故事将是

• 用户输入查询字符串
• 应用程序基于文本搜索查询返回单个/业务联系人信息列表
• 以便它们可以显示在目录样式列表中

谢谢：(

Answer 1

这是我制作的一个示例，它在React中本地加载地图Javascript，以便您可以遵循谷歌地图的文档(即Place Autocomplete+Place Details(：

https://stackblitz.com/edit/react-place-autocomplete-64427213

import React, { Component } from "react";
import { render } from "react-dom";
var map;
class Map extends Component {
constructor(props) {
super(props);
this.state = {
input: ""
};
this.handleInputChange = this.handleInputChange.bind(this);
}
onScriptLoad() {
map = new window.google.maps.Map(
document.getElementById(this.props.id),
this.props.options
);
this.placeAutocomplete();
}
componentDidMount() {
if (!window.google) {
var s = document.createElement("script");
s.type = "text/javascript";
s.src = `https://maps.google.com/maps/api/js?key=YOUR_API_KEY&libraries=places`;
var x = document.getElementsByTagName("script")[0];
x.parentNode.insertBefore(s, x);
// Below is important.
//We cannot access google.maps until it's finished loading
s.addEventListener("load", e => {
this.onScriptLoad();
});
} else {
this.onScriptLoad();
}
}
handleInputChange(event) {
const target = event.target;
const value = target.type === "checkbox" ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
});
}
placeAutocomplete() {
var autocomplete = new google.maps.places.Autocomplete(input);
// // Bind the map's bounds (viewport) property to the autocomplete object,
// // so that the autocomplete requests use the current map bounds for the
// // bounds option in the request.
autocomplete.bindTo("bounds", map);
// Set the data fields to return when the user selects a place.
autocomplete.setFields([
"address_components",
"geometry",
"formatted_phone_number",
"name",
"website"
]);
autocomplete.addListener("place_changed", function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
// User entered the name of a Place that was not suggested and
// pressed the Enter key, or the Place Details request failed.
window.alert("No details available for input: '" + place.name + "'");
return;
}
// If the place has a geometry, then present it on a map.
var marker = new google.maps.Marker({
position: place.geometry.location,
map: map
});
map.setCenter(place.geometry.location);
map.setZoom(12); 
//add an info window
var content =
"name: " +
place.name +
"<br />Latitude: " +
place.geometry.location.lat() +
"<br />Longitude: " +
place.geometry.location.lng() +
"<br />Phone No: " +
place.formatted_phone_number;
var infoWindow = new google.maps.InfoWindow({
content: content
});
//add a listner to the marker when clicked to show the info Window
marker.addListener("click", e => {
infoWindow.open(map, marker);
});
});
}
render() {
return (
<div>
<div>
<h3>Autocomplete search:</h3>
<input id="input" type="text" placeholder="Enter a location" />
</div>
<div className="map" id={this.props.id} />
</div>
);
}
}
export default Map;