[解決済み] ジオロケーションを利用して都市名を取得する [重複]。
2022-04-26 05:18:21
質問
HTMLベースのジオロケーションを使って、ユーザーの緯度と経度を取得することに成功しました。
//Check if browser supports W3C Geolocation API
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
//Get latitude and longitude;
function successFunction(position) {
var lat = position.coords.latitude;
var long = position.coords.longitude;
}
都市名を表示したいのですが、逆ジオロケーションAPIを使うしかないようです。Googleのリバースジオロケーションのドキュメントを読みましたが、私のサイトで出力を得る方法がわかりません。
これをどう使って行けばいいのかわからない。
"http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&sensor=true"
を使用して、ページ上に都市名を表示します。
どうすれば実現できますか?
どのように解決するのですか?
Google APIを使ってそのようなことをするのでしょう。
動作させるには、google maps libraryをインクルードする必要があることに注意してください。Google geocoderは多くの住所コンポーネントを返すので、どれが都市を含むか、経験的に推測する必要があります。
行政区域レベル1" は、通常、あなたが探しているものですが、時には、あなたが探している都市をlocalityにすることができます。
いずれにせよ、googleのレスポンスタイプに関する詳細は、以下の通りです。 こちら そして こちら .
以下は、このトリックを実行するためのコードです。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Reverse Geocoding</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
}
//Get the latitude and the longitude;
function successFunction(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
codeLatLng(lat, lng)
}
function errorFunction(){
alert("Geocoder failed");
}
function initialize() {
geocoder = new google.maps.Geocoder();
}
function codeLatLng(lat, lng) {
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({'latLng': latlng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results)
if (results[1]) {
//formatted address
alert(results[0].formatted_address)
//find country name
for (var i=0; i<results[0].address_components.length; i++) {
for (var b=0;b<results[0].address_components[i].types.length;b++) {
//there are different types that might hold a city admin_area_lvl_1 usually does in come cases looking for sublocality type will be more appropriate
if (results[0].address_components[i].types[b] == "administrative_area_level_1") {
//this is the object you are looking for
city= results[0].address_components[i];
break;
}
}
}
//city data
alert(city.short_name + " " + city.long_name)
} else {
alert("No results found");
}
} else {
alert("Geocoder failed due to: " + status);
}
});
}
</script>
</head>
<body onload="initialize()">
</body>
</html>
関連
-
[解決済み】TypeScript-のAngular Frameworkエラー - "exportAsがngFormに設定されたディレクティブはありません"
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] JavaScriptでJSONをきれいに印刷する
-
[解決済み] JavaScriptで現在の日付を取得するには?
-
[解決済み] jQueryを使ってドロップダウンリスト(セレクトボックス)から選択されたテキストを取得する
-
[解決済み] 画面サイズ、現在のウェブページ、ブラウザウィンドウのサイズを取得する
-
[解決済み] JavaScriptでドロップダウンリストの選択値を取得する
-
[解決済み】オブジェクトの型の名前を取得する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptの関数この指摘の問題を説明
-
jsを使った簡単な照明スイッチのコード
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
jQueryのコピーオブジェクトの説明
-
Vueでルートネスティングを実装する例
-
[解決済み】Node.jsで "Cannot find module "エラーを解決するには?
-
[解決済み】JavaScriptでインラインIF文の書き方は?
-
[解決済み】React Uncaught Error: 対象コンテナが DOM 要素でない [重複]。
-
[解決済み】 Uncaught TypeError : undefined のプロパティ 'replace' を読み取れない In Grid
-
[解決済み] Google Maps: 緯度/経度を指定して国、州、地域、都市を取得する方法とは?