【问题标题】：react-geocode - get address from lat/lng with referrer restricted API?react-geocode - 从 lat/lng 获取地址与引用限制 API？
【发布时间】：2019-12-26 23:59:19
【问题描述】：

我正在尝试使用react-geocode 从他们的纬度/经度坐标中获取用户的地址，但不幸的是我收到了错误API keys with referrer restrictions cannot be used with this API. 是否有可能让react-geocode 使用不同的 API，它确实允许推荐人限制？否则我将如何去做，因为我无法删除我的 API 密钥的引用者限制。有没有办法使用我已经用来显示我的地图的 Google Maps API 来反转地理编码纬度/经度坐标？

import Geocode from "react-geocode";

Geocode.setApiKey("AIzaSyDsb7F-VyBJn7r4LilYH_lRHBpPfgyUga8");
Geocode.enableDebug();

Geocode.fromLatLng("48.8583701", "2.2922926").then(
  response => {
    const address = response.results[0].formatted_address;
    console.log(address);
  },
  error => {
    console.error(error);
  }
);

CodeSandbox

【问题讨论】：

使用开源地图。例如，您可以使用react-leaflet 和leaflet-control-geocoder 代替谷歌地图
这是stackoverflow.com/questions/42167695/…的副本

标签： reactjs google-geocoder

【解决方案1】：

如果您想切换到 Google 地图，他们的（反向）地理编码非常简单。显然你想获得一个 Google Maps API Key (get it here) 来写一个 GET 请求：

 https://maps.googleapis.com/maps/api/geocode/json?latlng=40.714224,-73.961452&key=YOUR_API_KEY

解析结果应该很容易。 :)

来源：

【讨论】：

【解决方案2】：

这意味着 Google 已阻止来自受引用者限制的 API 密钥的访问，而且 Google 不太可能拥有具有不同 API 限制的相同 API 的两个版本，因此您不能将 Geocoding API 与您的受限密钥一起使用。但是您可以创建其他应用了其他限制的 API 密钥，即 IP 限制。

【讨论】：

【解决方案3】：

您是否考虑过使用网络服务器的反向代理功能？对于 nginx，您可以使用命令 proxy_set_header 将其设置为与您的 google geo api 中配置的受限网站相同。

但是您必须将 GOOGLE_API 更改为您自己的网络服务器 here in react-geocode。

【讨论】：

【解决方案4】：

由于您对 API 密钥设置了引荐来源网址限制，因此它将仅限于在浏览器上使用 Web 服务 API（包括地理编码 API）执行。即使在请求标头中手动设置引用者，它也对我不起作用。您可以在此页面上找到其他 Web 服务 API：https://developers.google.com/maps/web-services/

重要提示：如果您使用任何具有引用限制的 API 密钥的 Web 服务 API，您的请求将失败并显示错误消息：“与此 API 一起使用时，API 密钥不能有引用限制。”您应该切换到使用服务器限制。

您需要创建一个单独的密钥以在服务器端使用。您可以通过使用 IP 地址而不是浏览器引用来限制访问，将您的限制从 浏览器限制 更改为 服务器限制。

或者，您可以继续使用浏览器密钥和地理编码客户端 (JavaScript)，然后将结果返回到后端。

【讨论】：

【解决方案5】：

您必须添加Geocoding API 到您的谷歌地图库，然后您可以为您的 API 密钥添加 API 限制。

【讨论】：