현재 위치 해발 확보(JavaScript)
10901 단어 apiHTML,CSS국토지리원JSONJavaScript
눈높이를 알 수 있는 앱도 있지만 오리지널 앱을 만들 수 있다
높은 수치를 얻어야 하기 때문에 조사했습니다.
Geolocation API를 통해 현재 위치 가져오기
Geolocation API는 JavaScript의 API입니다.
위치 정보, IP 주소, WiFi 등의 정보에서 현재 위치를 가져옵니다.
function test() {
navigator.geolocation.getCurrentPosition(test2);
}
getCurrentPosition()에서 데이터를 성공적으로 가져올 때 매개변수 test2()를 실행합니다.function test2(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
}
테스트 2 () 에서 위도가 가벼운 용기를 준비하여 테스트 () 에서 얻은 데이터를 넣습니다.위도 경도만 얻으면 이것으로 끝냅니다.
국토지리원 API 사용
국토지리원의 API에 위도가 가볍게 전달되면 해발이 회복된다.
반환된 값은 JSON입니다.
국토지리원 API의 URL
http://cyberjapandata2.gsi.go.jp/general/dem/scripts/getelevation.php?lon={軽度}&lat={緯度}&outtype=JSON
위도: 36.103543 경도: 140.08531례반환된 값
반환된 JSON 데이터
{"elevation":25.3,"hsrc":"5m\uff08\u30ec\u30fc\u30b6\uff09"}
가져온 JSON 데이터 지우기 var jsonAltitude = JSON.parse(text);
console.log(jsonAltitude.elevation);
분석 데이터를 팝업으로 표시//ポップアップ表示
alert("現在地の標高は" + jsonAltitude.elevation + "mです。" + "(" + "緯度:" + stringLat + "、経度:" + stringLon + ")")
브라우저의 실행 결과적당히 〃 형성하다.
해발 가져오기 버튼을 클릭합니다.
다 됐습니다.
모든 코드
fetchAltitude.js
//GeolocationAPが利用できるか確認
if (navigator.geolocation) {
test()
} else {
alert("現在地を取得できませんでした。")
}
function test() {
navigator.geolocation.getCurrentPosition(test2);
}
function test2(position) {
//まず現在地の緯度経度を取得する
var lat = position.coords.latitude;
var lon = position.coords.longitude;
//国土地理院API用に有効桁数を合わせる。
var adjustiveLat = lat + "00";
var adjustiveLon = lon + "0";
//文字列に変換
var stringLat = String(adjustiveLat);
var stringLon = String(adjustiveLon);
//国土地理院APIに現在地の緯度経度を渡して、標高を取得する
const url = 'http://cyberjapandata2.gsi.go.jp/general/dem/scripts/getelevation.php?lon=' + stringLon + '&lat=' + stringLat + '&outtype=JSON';
console.log(url);
fetch(url).then(function(response) {
return response.text();
}).then(function(text) {
console.log(text);
//取得したjsonをパース
var jsonAltitude = JSON.parse(text);
console.log("標高:" + jsonAltitude.elevation + "m");
//ポップアップ表示
alert("現在地の標高は" + jsonAltitude.elevation + "mです。" + "(" + "緯度:" + stringLat + "、経度:" + stringLon + ")")
});
}
Reference
이 문제에 관하여(현재 위치 해발 확보(JavaScript)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/PearlEarringMinion/items/f4e27f00b61262d22630텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)