안녕하세요, Javascript navigator.geolocation가 활성화되어 있는 경우 getCurrentPosition(callback) 함수를 호출하여
파라미터로 전달되는 callback을 실행시켜, 이용자의 위치 좌표(위도/경도) 값을 알아 낸 후 카카오 맵 상에 Marker로 출력해 주고 있습니다.
또한, 임의의 tour.json을 파일을 호출하여 주변 관광지 정보를 JSON 데이터로 얻어온 후 추가적인 Marker를 출력해 주며, Click 이벤트를 등록하고 있는데요.
이렇게 Click 이벤트가 부여된 Marker를 클릭하게 되면 해당 Marker의 속성 정보를 알 수 있을까요?
하고자 하는 것은 주변 관광지 Marker를 클릭하면 커스텀한 속성을 부여(관광지 일련번호 등)하여 해당 관광지 상세페이지로 이동시키거나, Layer popup으로 해당 페이지에 관광지 정보를 노출하고자 합니다.
내용 읽어보시고 답변 부탁드리겠습니다.
감사합니다.
<script>
var mapContainer = document.getElementById('map');
var mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표(위도, 경도)
level: 5, //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도 생성 및 객체 리턴
var marker = null;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
}
function success({ coords, timestamp }) {
if (marker) {
marker.setMap(null);
}
var myLat = coords.latitude; // 위도
var myLng = coords.longitude; // 경도
var myPosition = new kakao.maps.LatLng(myLat, myLng);
var markerPositions = [];
markerPositions.push({
title: '내 위치',
latlng: myPosition,
});
$.ajax({
url: './tour.json',
type: 'get',
dataType: 'json',
success: function (res) {
for (var i = 0; i < res.length; i++) {
markerPositions.push({
title: res[i].name,
latlng: new kakao.maps.LatLng(res[i].lat, res[i].lng),
});
}
for (var i = 0; i < markerPositions.length; i++) {
marker = new kakao.maps.Marker({
map: map,
position: markerPositions[i].latlng, // 마커를 표시할 위치
title: markerPositions[i].title,
clickable: true,
});
// 마커에 클릭이벤트를 등록
kakao.maps.event.addListener(marker, 'click', function (event) {
console.log('click: ' + event);
});
}
map.panTo(myPosition);
},
});
console.log(`위도: ${myLat}, 경도: ${myLng}, 위치 반환 시간: ${timestamp}`);
}
</script>