Question

我正在构建一个React应用程序并尝试使用Google Places API在我的应用中填充丢失的地点数据（商家名称，说明，照片等）

我尝试过使用fetch（）以及axios库而没有运气。继续看到此错误

Failed to load https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4&key=XXXXXXX: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

感谢您提前提供任何帮助。

Answer 1

使用此库存有很多令人困惑的信息，特别是使用React项目。这是我终于能够开始工作的解决方案。

<强>的index.html

<Head>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXX&libraries=places"
async defer></script>
</Head>
<Body>
  <div id="map"></div>
</Body>

反应组件

componentDidMount() {

const googleMap = new window.google.maps.Map(document.getElementById('map'),{center: { lat: -33.867, lng: 151.206 },zoom: 15});

基本上我必须发现的技巧是使用window对象来访问我的google变量。现在你有了一个谷歌地图，你可以轻松地挂钩到其他谷歌API服务。希望这有助于其他人。

试图使用Google API遇到问题

1 个答案: