해당 포스팅에 기록
초기 설정은 해당 페이지 참고할것 https://sadfsdf.tistory.com/137
1. 로드뷰, 기본 뷰 설정하기
2. 현재 내 위치 가져오기
3. marker에 따른 위치 변경 및 로드뷰 연동하기
초기 코드는 다음과 같다.
카카오 링크 : https://apis.map.kakao.com/web/sample/basicRoadview/
카카오 맵 가져오기 (로드뷰, 기본 뷰)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>로드뷰와 지도 토글하기</title>
<style>
#container {overflow:hidden;height:300px;position:relative;}
#btnRoadview, #btnMap {position:absolute;top:5px;left:5px;padding:7px 12px;font-size:14px;border: 1px solid #dbdbdb;background-color: #fff;border-radius: 2px;box-shadow: 0 1px 1px rgba(0,0,0,.04);z-index:1;cursor:pointer;}
#btnRoadview:hover, #btnMap:hover{background-color: #fcfcfc;border: 1px solid #c1c1c1;}
#container.view_map #mapWrapper {z-index: 10;}
#container.view_map #btnMap {display: none;}
#container.view_roadview #mapWrapper {z-index: 0;}
#container.view_roadview #btnRoadview {display: none;}
</style>
</head>
<body>
<p style="margin-top:-12px">
로드뷰의 파노라마 ID와 시점(ViewPoint)은 Wizard를 사용하면 쉽게 확인할 수 있습니다.
<em class="link">
<a href="/web/wizard" target="_blank">Wizard를 사용해보세요!</a>
</em>
</p>
<div id="container" class="view_map">
<div id="mapWrapper" style="width:100%;height:300px;position:relative;">
<div id="map" style="width:100%;height:100%"></div> <!-- 지도를 표시할 div 입니다 -->
<input type="button" id="btnRoadview" onclick="toggleMap(false)" title="로드뷰 보기" value="로드뷰">
</div>
<div id="rvWrapper" style="width:100%;height:300px;position:absolute;top:0;left:0;">
<div id="roadview" style="height:100%"></div> <!-- 로드뷰를 표시할 div 입니다 -->
<input type="button" id="btnMap" onclick="toggleMap(true)" title="지도 보기" value="지도">
</div>
</div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=발급받은 APP KEY를 사용하세요"></script>
<script>
var container = document.getElementById('container'), // 지도와 로드뷰를 감싸고 있는 div 입니다
mapWrapper = document.getElementById('mapWrapper'), // 지도를 감싸고 있는 div 입니다
btnRoadview = document.getElementById('btnRoadview'), // 지도 위의 로드뷰 버튼, 클릭하면 지도는 감춰지고 로드뷰가 보입니다
btnMap = document.getElementById('btnMap'), // 로드뷰 위의 지도 버튼, 클릭하면 로드뷰는 감춰지고 지도가 보입니다
rvContainer = document.getElementById('roadview'), // 로드뷰를 표시할 div 입니다
mapContainer = document.getElementById('map'); // 지도를 표시할 div 입니다
// 지도와 로드뷰 위에 마커로 표시할 특정 장소의 좌표입니다
var placePosition = new kakao.maps.LatLng(33.450701, 126.570667);
// 지도 옵션입니다
var mapOption = {
center: placePosition, // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
// 로드뷰 객체를 생성합니다
var roadview = new kakao.maps.Roadview(rvContainer);
// 로드뷰의 위치를 특정 장소를 포함하는 파노라마 ID로 설정합니다
// 로드뷰의 파노라마 ID는 Wizard를 사용하면 쉽게 얻을수 있습니다
roadview.setPanoId(1023434522, placePosition);
// 특정 장소가 잘보이도록 로드뷰의 적절한 시점(ViewPoint)을 설정합니다
// Wizard를 사용하면 적절한 로드뷰 시점(ViewPoint)값을 쉽게 확인할 수 있습니다
roadview.setViewpoint({
pan: 321,
tilt: 0,
zoom: 0
});
// 지도 중심을 표시할 마커를 생성하고 특정 장소 위에 표시합니다
var mapMarker = new kakao.maps.Marker({
position: placePosition,
map: map
});
// 로드뷰 초기화가 완료되면
kakao.maps.event.addListener(roadview, 'init', function() {
// 로드뷰에 특정 장소를 표시할 마커를 생성하고 로드뷰 위에 표시합니다
var rvMarker = new kakao.maps.Marker({
position: placePosition,
map: roadview
});
});
// 지도와 로드뷰를 감싸고 있는 div의 class를 변경하여 지도를 숨기거나 보이게 하는 함수입니다
function toggleMap(active) {
if (active) {
// 지도가 보이도록 지도와 로드뷰를 감싸고 있는 div의 class를 변경합니다
container.className = "view_map"
} else {
// 지도가 숨겨지도록 지도와 로드뷰를 감싸고 있는 div의 class를 변경합니다
container.className = "view_roadview"
}
}
</script>
</body>
</html>
현재 코드는 기본적으로 카카오의 위치가 설저되어있기에 본인의 실시간 위치를 얻어오기 위해선 추가적인 설정이 필요하다.
사용자의 실시간 위치 가져오기
해당 방식을 위해선 브라우저의 실시간 위치기능 + Geolocation API 를 사용하였습니다.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
locPosition = new kakao.maps.LatLng(lat, lon);
map.setCenter(locPosition);
marker = new kakao.maps.Marker({
position: locPosition
});
marker.setMap(map);
}, function(error) {
console.error('Error occurred. Error code: ' + error.code);
placePosition = new kakao.maps.LatLng(33.450701, 126.570667);
map.setCenter(placePosition);
marker = new kakao.maps.Marker({
position: placePosition
});
marker.setMap(map);
});
},
{
enableHighAccuracy: true, // 고정밀 모드 요청
timeout: 5000, // 위치 요청 타임아웃 설정
maximumAge: 0 // 캐시된 위치 정보 사용 안함
});
else {
console.error('Geolocation is not supported by this browser.');
placePosition = new kakao.maps.LatLng(33.450701, 126.570667);
map.setCenter(placePosition);
marker = new kakao.maps.Marker({
position: placePosition
});
marker.setMap(map);
}
현재 위치를 가져오되 만약 위치값을 가져오는데 실패했을경우 카카오 데이터센터(33.450... ,126.570..)가 초기 값으로 지정됩니다.
고정밀 모드로 사용 안할경우 종종 gps가 튀어버려 이상한곳을 가리키는 경우가 있습니다 (저는 개천으로 나옵니다..)
사용자의 마커 이동 및 로드뷰 위치 변경하기
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
lat = position.coords.latitude;
...
marker.setMap(map);
initializeRoadView(lat, lon, locPosition); //new!!
}, function(error) {
console.error('Error occurred. Error code: ' + error.code);
...
marker.setMap(map);
initializeRoadView(33.450701, 126.570667, placePosition); //new!!
});
} else {
console.error('Geolocation is not supported by this browser.');
...
marker.setMap(map);
initializeRoadView(33.450701, 126.570667, placePosition); //new!!
}
//new!!
//로드뷰를 추출하기 위한 코드
function initializeRoadView(lat, lon, position) {
var roadview = new kakao.maps.Roadview(rvContainer);
var roadviewClient = new kakao.maps.RoadviewClient(); //좌표로부터 로드뷰 파노ID를 가져올 로드뷰 helper객체
var roadviewContainer = document.getElementById('roadview'); // 로드뷰를 표시할 div
roadviewClient.getNearestPanoId(position, 50, function(panoId) {
roadview.setPanoId(panoId, position); //panoId와 중심좌표를 통해 로드뷰 실행
});
roadview.setViewpoint({
pan: 321,
tilt: 0,
zoom: 0
});
kakao.maps.event.addListener(roadview, 'init', function() {
var rvMarker = new kakao.maps.Marker({
position: position,
map: roadview
});
});
}
marker가 이동될떄마다 실행되도록 함수를 작성하였습니다.
최종결과
'기타' 카테고리의 다른 글
| 구글 폰트 적용시키기 (0) | 2024.09.17 |
|---|---|
| FileZila 사용법 (0) | 2024.06.27 |
| 이미지 배치하기 (0) | 2024.02.23 |