카카오맵 API GPS 버튼 커스텀하기(Javascript)

카카오맵 API GPS 버튼 커스텀하기(Javascript)

 

 

카카오맵 API를 활용해서 웹 페이지를 만들면, 현재 위치 기능을 geolocation 객체를 활용해서 받아올 수는 있지만, 우리가 흔히 사용하는 스마트폰 카카오맵에서 활용하는 버튼 기능을 제공하지 않는다는 것에서 막힐 때가 있다.

 

https://apis.map.kakao.com/web/sample/geolocationMarker/

 

기본 공식문서를 보고 geolocation을 적용하면, 페이지에 접속했을 때 자동으로 현재위치로 이동되는 것을 쉽게 구현할 수는 있다. 그러나, 내가 원할 때, geolocation을 불러오고 싶다면, gps버튼을 커스텀해야 한다.

 

GPS 버튼을 이제 만들어보자!

 

1. button의 형태를 먼저 만들어준다.(HTML)

 

<button class="gpsButton" id="gpsButtonConnect" onclick="gpsButton()" ><img style="width:40px; height:40px;" src="./images/gpsButton.png" alt="gps"></button>

 

일단 구현하고 싶은 위치에 button을 이런 식으로 만들어준다.

 

img 스타일은 button에 적용된다. 이미지를 바꿔 적용할 수도 있고 크기를 조절할 수도 있다.

 

 

2. onclick에 사용될 gpsButton() 메서드 정의(JS)

 

스크립트 태그 또는 그 페이지에서 사용하는 스크립트 문서에 다음의 코드를 추가해준다.

 

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

// 1) gpsButton 메서드

var gpsMarkers;

/**
현재 자신의 위치를 알려줄 수 있는 gps 마커를 띄우는 버튼에 필요한 메서드
*/
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으로 얻어온 좌표로 생성합니다

            // 마커와 인포윈도우를 표시합니다
            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(40, 40)
);


// 3) 마커 표시 함수
/*
마커를 생성하고 변경된 이미지를 반영한 후, 현재 사용자의 위치에 띄운다.
gps 마커가 지도의 가운데에 보이게 하기 위해 setCenter() 메서드를 사용한다.
*/
function displayMarker(locPosition) {
    // gps마커를 생성합니다
    gpsMarker = new kakao.maps.Marker({
        map: map,
        position: locPosition
    });
    gpsMarker.setImage(icon);
    // 지도 중심좌표를 접속위치로 변경합니다
    map.setCenter(locPosition);
}

 

기본으로 제공되는 gps 표시 메서드를 조금 변경한 것이다. gps 버튼이 눌리면, 현재 위도와 경도를 받아오고, 마커를 하나 생성하여 이미지를 새로 변경하고, 화면에 표시하는 메서드이다.

 

정리하면 로직은 이러하다.

gpsbutton() onclick ▶︎ 현재 위도와 경도 불러오기 ▶︎ displayMarker 메서드로 GPS 마커 생성 ▶︎ setImage로 icon 이미지 변경 ▶︎ icon 변수에 이미지 주입 ▶︎ map에 GPS 마커 띄우기

 

 

3. GPS Button CSS 조정(CSS)

 

.gpsButton {
    border:0;
    outline:0;
    border-radius:50%;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    background-color: gray;
    position:fixed;
    z-index:2;
    right:7px;
    bottom: 300px;
    width:40px;
    height:40px;
}

 

이런 식으로 값을 주었다. right 값은 이전에 작성했던 스크롤 떨림을 해결하기 위해 px으로 주었다. 원형의 버튼을 만들기 위해 노력하였다... html 페이지에 연결된 css 문서나 style 태그 안에 이 코드를 붙여 넣으면 될 것이다.

 

 

 

4. 완성본

 

내 위치는 시청이 아니었지만, location 수정을 통해 현재 위치를 수정하여 시험 화면을 만들었다.

원래 gps 값을 활용한다면 더 빠르게 작동한다.

 

 

GPS 버튼 커스텀하기 끝!