[JS:実習:Getting the Weather(1)]
11077 ワード
📍 Javascriptを勉強している間に、学習ノートに整理したものを運んできました.ユーザの位置座標情報(緯度、経度)を読み出し、ローカルストレージに保存または要求する.
地理的位置は、2つの関数を持つオブジェクト(オブジェクト)です. getCurrentPosition(成功関数、失敗関数) getCurrentPosition()には2つの要件があります. 座標のインポートに成功したときの関数 の処理
関数は、入力座標が失敗した場合の処理を処理するために使用される.
watchPosition( )
Step 2. ユーザの位置座標情報に基づいて座標を設定する
(3)のcoordsObjectオブジェクトを作成する場合、変数の名前がcoordsObjectオブジェクト(オブジェクト)のキー値の名前と同じである場合、
Step 3. ユーザーの場所から入力した座標をローカルストレージに保存
navigator API
地理的位置は、2つの関数を持つオブジェクト(オブジェクト)です.
関数
navigator.geolocation.getCurrentPosition()
navigator.geolocation.watchPosition()
Step 1. ユーザの位置座標情報の読み込み(読み込み)const COORDS = 'coords';
/* getCurrentPosition( , )에서 좌표를 가져오는데 성공했을 때를 처리하는 함수 */
function handleGeoSucces(position) {
console.log(position);
}
/* getCurrentPosition( , )에서 좌표를 가져오는데 실패했을 때를 처리하는 함수 */
function handleGeoError(){
console.log("can't accese geo location");
}
/* 좌표를 요청하는 함수 */
function askForCoords() {
/* 위치 정보를 읽게 하는 navigator API 사용하기 */
navigator.geolocation.getCurrentPosition (handleGeoSucces, handleGeoError);
}
function loadCoords() {
const loadedCords = localStorage.getItem(COORDS);
// 만약 loadedCord 가 null 이면
if(loadedCords === null) {
// askForCoords() 함수를 호출한다.
askForCoords();
} else {
// getWeather() 함수를 호출한다.
}
}
function init() {![](https://media.vlpt.us/images/ichbinmin2/post/ccc13971-0fa3-480b-9cd9-db448f3b9dba/image.png)
loadCoords();
}
init();
運転画面 user位置のウィンドウが表示されます.位置権限が許可されていると言えば、の位置権限を切断(拒否)すると、Step 2. ユーザの位置座標情報に基づいて座標を設定する
/ * getCurrentPosition( , )에서 좌표를 가져오는데 성공했을 때를 처리하는 함수 */
function handleGeoSucces(position) {
// (1) position coords의 latitude(위도)를 설정
const latitude = position.coords.latitude;
// (2) position coords의 longitude(경도)를 설정
const longitude = position.coords.longitude;
// (3) 객체(object) 코드를 작성하자
const coordsObj = {
latitude : latitude,
longitude : longitude
};
}
Tip.(3)のcoordsObjectオブジェクトを作成する場合、変数の名前がcoordsObjectオブジェクト(オブジェクト)のキー値の名前と同じである場合、
const coordsObj = {
latitude,
longitude
};
書くこともできます.Step 3. ユーザーの場所から入力した座標をローカルストレージに保存
/* handleGeoSucces(position) 함수에서 가져온 좌표를 저장하는 함수 */
function saveCoods(coordsObj){
localStorage.setItem(COORDS, JSON.stringify(coordsObj));
/* localStorage.setItem로 저장하되, stringify를 이용해서 string으로 변환하는 JSON 인자를 실행 한다.*/
}
/ * getCurrentPosition( , )에서 좌표를 가져오는데 성공했을 때를 처리하는 함수 */
function handleGeoSucces(position) {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
const coordsObj = {
latitude,
longitude
};
// 가져온 좌표를 저장하는 함수 실행
saveCoods(coordsObj);
}
運転結果(受入座標)Reference
この問題について([JS:実習:Getting the Weather(1)]), 我々は、より多くの情報をここで見つけました https://velog.io/@ichbinmin2/JS-실습-Getting-the-Weather-1テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol