카카오맵 GPS 마커 중복 생성 해결방법

카카오맵 GPS 마커 중복 생성 해결방법

 

이전에 포스팅한 대로 GPS 버튼을 만들면, 마커는 정상적으로 작동하지만, 새로 고침 했을 때, 꺼지지 않고 계속 생성되어 있는 부분이 마음에 걸렸고, 마커가 있을 때 버튼을 클릭하면 중복 생성되는 문제가 있었다.

 

이에 새로고침을 하면 GPS 마커가 사라지고 GPS 마커가 있는 상태에서 GPS 버튼을 누르면 더이상 마커가 생성되지 않게 만들어야 했다. 그래서 마커가 있을 때는 어떤 변수에 값을 1을 저장하고, 없을 때는 0을 저장하여서 로직을 다르게 구현하면 되겠다는 발상을 하였다.

 

처음에는 자바스크립트 코드 내부에 값을 저장해보려고 했지만, 전혀 값이 저장되지 않았다.

 

// 2. 위치 수집, GPS 마커 표시 기능(GeoLocation)

// 1) gpsButton 메서드
/**
현재 자신의 위치를 알려줄 수 있는 gps 마커를 띄우는 버튼에 필요한 메서드
*/
var gpsMarkers;
var isMarker = 0;

function gpsButton(){

    // HTML5의 geolocation으로 사용할 수 있는지 확인합니다
    if (navigator.geolocation) {
        // GeoLocation을 이용해서 접속 위치를 얻어옵니다
        navigator.geolocation.getCurrentPosition(function(position) {

            var lat = position.coords.latitude, // 위도
                lon = position.coords.longitude; // 경도
            var locPosition = new kakao.maps.LatLng(lat, lon); // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다

            if(isMarker == "1"){
                map.setCenter(locPosition);
                return;
            }

            // 마커와 인포윈도우를 표시합니다
            displayMarker(locPosition);
        });
    } else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
        var locPosition = new kakao.maps.LatLng(x, y);
        displayMarker(locPosition);
    }
}


// 2) 마커 이미지 객체 생성
/**
마커 이미지와 사이즈를 설정할 수 있다.
*/
let icon = new kakao.maps.MarkerImage(
    //마커 이미지를 변경
    "images/gpsIcon.png",
    new kakao.maps.Size(50, 50)
);


// 3) 마커 표시 함수
/*
마커를 생성하고 변경된 이미지를 반영한 후, 현재 사용자의 위치에 띄운다.
gps 마커가 지도의 가운데에 보이게 하기 위해 setCenter() 메서드를 사용한다.
*/


function displayMarker(locPosition) {
    // gps마커를 생성합니다
    gpsMarker = new kakao.maps.Marker({
        map: map,
        position: locPosition
    });
    gpsMarker.setImage(icon);
    // 지도 중심좌표를 접속위치로 변경합니다
    map.setCenter(locPosition);
    isMarker = "1";
}

 

이전에 작성해놓은 코드에 isMarker 라는 변수만 추가하였다.

 

왜 안되지 왜 안되지 하다가... 정말 멍청한 짓이라는 것을 깨달았다.

 

맨날 공부할 때, 인텔리제이 창 안에서 변수에 값이 저장되는 것을 보고 새로고침을 해도 값이 저장될 줄 알았던 것이다. 당연히 새로고침이 되면 문서를 새로 불러올 것이고, 결국, 변수에는 0만 계속 들어가고 내가 원하는 기능을 구현할 수 없었다.

 

 

"값을 브라우저 안에 저장한다..."를 하기 위해 열심히 서칭하던 중, 로컬 스토리지가 그 기능을 한다는 것을 알았다.

 

(로컬 스토리지 포스팅은 아래 링크 참조)

2022.09.06 - [프로그래밍 언어/Javascript] - [Javascript] 로컬 스토리지 사용 방법

[Javascript] 로컬 스토리지 사용 방법

 

그래서 로컬 스토리지에 기본적으로 isMarker라는 키에 값을 0을 지정하고, 마커가 만들어지면 값을 1로 만들고 더 이상 만들어지지 않게 하였다. 또한 새로고침이 되면 자동으로 값이 0으로 지정되기 때문에 새로운 마커를 만들어 나타내게 하였다.

 

만약 isMarker 값이 1이라면 마커가 있는 곳으로 지도의 중심을 옮기는 방식으로 로직을 구현했다.

 

// 2. 위치 수집, GPS 마커 표시 기능(GeoLocation)

// 1) gpsButton 메서드
/**
현재 자신의 위치를 알려줄 수 있는 gps 마커를 띄우는 버튼에 필요한 메서드
*/
var gpsMarkers;

localStorage.setItem("isMarker", "0");

function gpsButton(){

    // HTML5의 geolocation으로 사용할 수 있는지 확인합니다
    if (navigator.geolocation) {
        // GeoLocation을 이용해서 접속 위치를 얻어옵니다
        navigator.geolocation.getCurrentPosition(function(position) {

            var lat = position.coords.latitude, // 위도
                lon = position.coords.longitude; // 경도
            var locPosition = new kakao.maps.LatLng(lat, lon); // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다

            if(localStorage.getItem("isMarker") == "1"){
                map.setCenter(locPosition);
                return;
            }

            // 마커와 인포윈도우를 표시합니다
            displayMarker(locPosition);
        });
    } else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
        var locPosition = new kakao.maps.LatLng(x, y);
        displayMarker(locPosition);
    }
}


// 2) 마커 이미지 객체 생성
/**
마커 이미지와 사이즈를 설정할 수 있다.
*/
let icon = new kakao.maps.MarkerImage(
    //마커 이미지를 변경
    "images/gpsIcon.png",
    new kakao.maps.Size(50, 50)
);


// 3) 마커 표시 함수
/*
마커를 생성하고 변경된 이미지를 반영한 후, 현재 사용자의 위치에 띄운다.
gps 마커가 지도의 가운데에 보이게 하기 위해 setCenter() 메서드를 사용한다.
*/


function displayMarker(locPosition) {
    // gps마커를 생성합니다
    gpsMarker = new kakao.maps.Marker({
        map: map,
        position: locPosition
    });
    gpsMarker.setImage(icon);
    // 지도 중심좌표를 접속위치로 변경합니다
    map.setCenter(locPosition);
    localStorage.setItem("isMarker", 1);
}

 

이렇게 해서 GPS 버튼 구현을 완료하였다.

 

 

CSS와 HTML이 궁금하다면 이전 글을 참조!

2022.09.19 - [프로그래밍 언어/Javascript] - 카카오맵 API GPS 버튼 커스텀하기(Javascript)