[010/API] Kakao Map API | 현위치 표시하기

1.  문제상황

---

카카오가 제주도에 위치해서 그런지 항상 기본 위치는 제주도로 나왔다ㅋㅋ 그래서 우리는 이 기본 위치를 현위치로 설정하기로 했다!

(공식 문서도 참고! https://apis.map.kakao.com/web/sample/basicMarker/)

 

2.  현위치를 기본 위치로 만들어보자!

---

1단계 geolocation API

---

//map.html
function currentLocation() {
	// 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으로 얻어온 좌표로 생성합니다
			var message = '<div style="padding:5px;">현위치</div>'; // 인포윈도우에 표시될 내용입니다

			// 마커와 인포윈도우를 표시합니다
			displayMarker(locPosition, message);
		});
	} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다

		var locPosition = new kakao.maps.LatLng(37.4812845080678, 126.952713197762),
			message = '현재 위치를 알 수 없어 기본 위치로 이동합니다.'

		currentLatLon['lat'] = 33.450701
		currentLatLon['lon'] = 126.570667

		displayMarker(locPosition, message);
	}
	return true
}

currentLocation();

👉🏻현위치는 geolocation API를 사용해서 알아낸다.

💡geolocation API란? 사용자의 현재 위치를 가져오는 API로, 지도에 사용자 위치를 표시하는 등 다양한 용도로 사용할 수 있다. 더 자세한 내용이 알고 싶다면 아래 링크도 참조해보자! https://developer.mozilla.org/ko/docs/Web/API/Geolocation_API/Using_the_Geolocation_API

👉🏻geolocation의 getCurrentPosition을 이용하면 position.coords.latitude, position.coords.longitude형태로 위도와 경도를 얻을 수 있다! 그리고 이렇게 얻는 위도와 경도를 kakao Map API의 LatLng 함수를 이용해 기본 위치로 정해주면 지도가 해당 위치로 나올 것이다. 그리고 displayMarker함수를 호출하는데 이는 아래에서 보도록 하자! 

👉🏻혹시나 geolocation을 사용할 수 없다면 서울대입구역의 위도와 경도를 알아내어 기본 위치로 설정하면 된다!

 

2단계 현위치에 마커와 인포윈도우 표시하기

---

//map.html
function displayMarker(locPosition, message) {
	var imageSize = new kakao.maps.Size(24, 35);
	var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);

	// 마커를 생성합니다
	var marker = new kakao.maps.Marker({
		map: map, 
		position: locPosition, 
		image : markerImage, 
	});

	var iwContent = message, // 인포윈도우에 표시할 내용
		iwRemoveable = true;

	// 인포윈도우를 생성합니다
	var infowindow = new kakao.maps.InfoWindow({
		content : iwContent,
		removable : iwRemoveable
	});

	// 인포윈도우를 마커위에 표시합니다
	infowindow.open(map, marker);

	// 지도 중심좌표를 접속위치로 변경합니다
	map.setCenter(locPosition);
}

👉🏻마커 찍는 법은 아래 링크를 참조하자!

2022.04.10 - [그 땐 IT활동했지/그 땐 영일영 근무했지] - [010/API] Kakao Map API | 위치 표시하기

👉🏻인포윈도우라는 새로운 요소가 나왔는데 이를 살펴보자!

👉🏻인포윈도우는 위의 사진에서 '현위치'라는 문구를 가진 말풍선이다. 현재 내가 이 글을 쓰고 있는 곳은 도서관..ㅎㅎ

var iwContent = message, // 인포윈도우에 표시할 내용
    iwRemoveable = true;

👉🏻일단 인포윈도우에 담을 내용을 iwContent에 담는다. message라는 변수는 이전에 현위치를 찾는 함수에서 값을 지정해 넘겨주었다.

👉🏻iwRemoveable은 인포 윈도우를 닫을 수 있는지 여부이다. true로 설정했기 때문에 위 사진의 인포윈도우에는 x버튼이 있고 이를 누르면 인포윈도우가 닫아진다.

// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
    content : iwContent,
    removable : iwRemoveable
});

// 인포윈도우를 마커위에 표시합니다
infowindow.open(map, marker);

👉🏻그리고 kakao Map API의 infoWindow를 활용해 인포윈도우를 생성해준다.

👉🏻infoWindow의 open메서드를 활용해 마커 위헤 인포윈도우를 생성해준다!