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);
}
);
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
結果の解析は簡単です。 :)
出典:
APIキーにリファラー制限を設定したため、Geocoding APIを含むWebサービスAPIを使用するブラウザーでの実行に制限されます。リクエストヘッダーでリファラーを手動で設定しても、私にはうまくいきませんでした。このページで他のWebサービスAPIを見つけることができます: https://developers.google.com/maps/web-services/
重要:リファラー制限があるAPIキーでWebサービスAPIのいずれかを使用している場合、リクエストは失敗し、「このAPIで使用する場合、APIキーはリファラー制限を持つことができません。」というエラーメッセージが表示されます。サーバー制限の使用に切り替える必要があります。
サーバー側で使用する別のキーを作成する必要があります。制限をブラウザー制限からサーバー制限に変更できます。ブラウザの参照元ではなく、IPアドレスを使用してアクセスを制限します。
または、ブラウザキーを使用してクライアント側(JavaScript)をジオコーディングし、結果をバックエンドに返すこともできます。
これは、Googleが参照元制限のあるAPIキーからのアクセスをブロックしていることを意味します。GoogleがAPI制限の異なる同じAPIの2つのバージョンを持っている可能性は非常に低いため、制限されたキーでGeocoding APIを使用することはできません。ただし、他の制限(IP制限など)が適用された他のAPIキーを作成できます。
Webサーバーのリバースプロキシ機能の使用を検討しましたか? nginxの場合、proxy_set_headerコマンドを使用して、Google geo apiで構成された制限付きWebサイトに同じように設定できます。
ただし、GOOGLE_APIを独自のウェブサーバーに変更する必要があります ここではreact-geocode 。
これは必要なコードベースだと思います。
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 を参照してください