[기능정리] 현제위치를 지도에 표시하기

https://apis.map.kakao.com/web/sample/geolocationMarker 해당글을 참조하여 작성했습니다. 

 

0. 개요

프로젝트를 하다가 현위치와 가까운 지점을 표시하기 위해 현제 위치값을 얻는방법을 검색했다.

검색결과 카카오 API내에서 설명과 함께 이용방법또한 알려주었다.

 

1. 지도생성

GeoLocation라는 기능으로 HTML 자체기능이다. 

Chrome 브라우저는 https 환경에서만 geolocation을 지원하는 제약이 존재한다. 

var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 10 // 지도의 확대 레벨 
    }; 
    
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

지도를 생성하고 지도의 기본좌표와 확대 레벨을 셋팅합니다. 

 

2. 현제좌표 사용검사와 좌표검색

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으로 얻어온 좌표로 생성합니다
            message = '<div style="padding:5px;">여기에 계신가요?!</div>'; // 인포윈도우에 표시될 내용입니다
        
        // 마커와 인포윈도우를 표시합니다
        displayMarker(locPosition, message);
            
      });
    
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
    
    var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),    
        message = 'geolocation을 사용할수 없어요..'
        
    displayMarker(locPosition, message);
}

 

위도와 경도를 얻어 해당 위치에 마커를 표시해줍니다. 

3.  마커와 인포윈도우 생성 함수

// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {

    // 마커를 생성합니다
    var marker = new kakao.maps.Marker({  
        map: map, 
       position: locPosition
    }); 
    
    var iwContent = message, // 인포윈도우에 표시할 내용
        iwRemoveable = true;

    // 인포윈도우를 생성합니다
    var infowindow = new kakao.maps.InfoWindow({
        content : iwContent,
        removable : iwRemoveable
    });
    
    // 인포윈도우를 마커위에 표시합니다 
    infowindow.open(map, marker);
    
    // 지도 중심좌표를 접속위치로 변경합니다
    map.setCenter(locPosition);      
}

마커 : 해당좌표에 마커로 표시를 해줍니다. 

인포윈도우 : 마커위에 해당 위치가 맞는지 확인하는 말풍선을 띄워줍니다. 

 

 

느낀점 : API를 사용해서 기능을 제작할 경우 카카오 같은 회사는 다 설명서가 존재한다. 좋은것 같다. 정확도도 생각보다 좋다. 아쉬운점은 HTTP 환경에서만 사용이 가능하단점