web-dev-qa-db-ja.com

react-geocode-リファラー制限APIを使用してlat / lngからアドレスを取得しますか？

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

reactjsgoogle-geocoder
2
user13286

Googleマップに切り替えたい場合、その（逆の）ジオコーディングは非常に簡単です。明らかに、GETリクエストを書き込むためにGoogle Maps APIキー（ get it here ）を取得する必要があります。

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

結果の解析は簡単です。 :)

出典：

  1. https://developers.google.com/maps/documentation/geocoding/intro#ReverseGeocoding
  2. https://developers.google.com/maps/documentation/geocoding/intro#reverse-example
1
konrad_pe

APIキーにリファラー制限を設定したため、Geocoding APIを含むWebサービスAPIを使用するブラウザーでの実行に制限されます。リクエストヘッダーでリファラーを手動で設定しても、私にはうまくいきませんでした。このページで他のWebサービスAPIを見つけることができます： https://developers.google.com/maps/web-services/

重要：リファラー制限があるAPIキーでWebサービスAPIのいずれかを使用している場合、リクエストは失敗し、「このAPIで使用する場合、APIキーはリファラー制限を持つことができません。」というエラーメッセージが表示されます。サーバー制限の使用に切り替える必要があります。

サーバー側で使用する別のキーを作成する必要があります。制限をブラウザー制限からサーバー制限に変更できます。ブラウザの参照元ではなく、IPアドレスを使用してアクセスを制限します。

または、ブラウザキーを使用してクライアント側（JavaScript）をジオコーディングし、結果をバックエンドに返すこともできます。

0
Abhishek Garg

これは、Googleが参照元制限のあるAPIキーからのアクセスをブロックしていることを意味します。GoogleがAPI制限の異なる同じAPIの2つのバージョンを持っている可能性は非常に低いため、制限されたキーでGeocoding APIを使用することはできません。ただし、他の制限（IP制限など）が適用された他のAPIキーを作成できます。

0
Basix

Webサーバーのリバースプロキシ機能の使用を検討しましたか？ nginxの場合、proxy_set_headerコマンドを使用して、Google geo apiで構成された制限付きWebサイトに同じように設定できます。

ただし、GOOGLE_APIを独自のウェブサーバーに変更する必要があります ここではreact-geocode 。

0
wang eason

これは必要なコードベースだと思います。

import Geocode from "react-geocode";

// set Google Maps Geocoding API for purposes of quota management. Its optional but recommended.
Geocode.setApiKey("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");

Geocode.setLanguage("en");

// A Geocoding request with region=es (Spain) will return the Spanish city.
Geocode.setRegion("es");

// Enable or disable logs. Its optional.
Geocode.enableDebug();

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

// Get latidude & longitude from address.
Geocode.fromAddress("Eiffel Tower").then(
  response => {
    const { lat, lng } = response.results[0].geometry.location;
    console.log(lat, lng);
  },
  error => {
    console.error(error);
  }
);

Geocoding API Request Format を適用する必要があります。

それ以外の場合は main docs を参照してください

0
champion-runner