[JS:実習:Getting the Weather(1)]

11077 ワード

📍 Javascriptを勉強している間に、学習ノートに整理したものを運んできました.
  • ユーザの位置座標情報(緯度、経度)を読み出し、ローカルストレージに保存または要求する.
  • navigator API



    地理的位置は、2つの関数を持つオブジェクト(オブジェクト)です.
  • getCurrentPosition(成功関数、失敗関数)
  • getCurrentPosition()には2つの要件があります.
  • 座標のインポートに成功したときの関数
  • の処理
    関数
  • は、入力座標が失敗した場合の処理を処理するために使用される.
  • navigator.geolocation.getCurrentPosition()
  • watchPosition( )
  • 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);
    }
    運転結果(受入座標)