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

我试图从谷歌API返回一个商业细节、地址、电话号码和网站的对象。我使用PlacesAPI只是为了遇到cors问题，因为它是一个服务器端API。建议使用Places library，但我找不到可返回我所需内容的参考/示例

故事将会是

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

---

谢谢：）

这是我制作的一个示例，它以React本地方式加载地图Javascript，以便您可以查看Google地图的文档（即Place Autocomplete+Place Details）：

import React，{Component}来自“React”；
从“react dom”导入{render}；
var映射；
类映射扩展组件{
建造师（道具）{
超级（道具）；
此.state={
输入：“”
};
this.handleInputChange=this.handleInputChange.bind（this）；
}
onScriptLoad（）{
map=newwindow.google.maps.map(
document.getElementById（this.props.id），
这个。道具。选项
);
this.placeAutocomplete（）；
}
componentDidMount（）{
如果（！window.google）{
var s=document.createElement（“脚本”）；
s、 type=“text/javascript”；
s、 src=`https://maps.google.com/maps/api/js?key=YOUR_API_KEY&libraries=places`;
var x=document.getElementsByTagName（“脚本”）[0]；
x、 parentNode.insertBefore（s，x）；
//下面是重要的。
//在google.maps加载完成之前，我们无法访问它
s、 addEventListener（“加载”，e=>{
这是一个.onScriptLoad（）；
});
}否则{
这是一个.onScriptLoad（）；
}
}
handleInputChange（事件）{
const target=event.target；
const value=target.type==“checkbox”？target.checked:target.value；
const name=target.name；
这是我的国家({
[名称]：值
});
}
placeAutocomplete（）{
var autocomplete=new google.maps.places.autocomplete（输入）；
////将贴图的边界（视口）属性绑定到自动完成对象，
////以便自动完成请求使用
////请求中的边界选项。
自动完成。绑定到（“边界”，映射）；
//设置用户选择地点时返回的数据字段。
自动完成设置字段([
“地址单元组件”，
“几何学”，
“格式化的电话号码”，
“姓名”，
“网站”
]);
autocomplete.addListener（“place\u changed”，function（））{
var place=autocomplete.getPlace（）；
如果（！place.geometry）{
//用户输入了未建议的地点的名称，然后
//按Enter键，或Place Details请求失败。
window.alert（“没有可供输入的详细信息：“+place.name+””）；
返回；
}
//如果该地点有几何图形，则将其显示在地图上。
var marker=new google.maps.marker({
位置：place.geometry.location，
地图：地图
});
地图。设置中心（地点。几何。位置）；
map.setZoom（12）；
//添加一个信息窗口
var含量=
“姓名：”+
地名+
“
纬度：”+
place.geometry.location.lat（）+
“
经度：+
place.geometry.location.lng（）+
“
电话号码：+
地点、电话号码；
var infoWindow=new google.maps.infoWindow({
内容：内容
});
//单击以显示“信息”窗口时，向标记添加listner
marker.addListener（“单击”，e=>{
信息窗口。打开（地图、标记）；
});
});
}
render（）{
返回(
自动完成搜索：
);
}
}
导出默认地图；

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;