'마커'에 클릭 이벤트를 등록할 때 클릭된 마커의 속성 값을 읽어 올 수 있는 방법이 있는지 문의드립니다

안녕하세요, 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>

@devug

안녕하세요,

마커에 임의 속성을 부여하는 것은 별도 객체로 만드시는 방법이 낫다고 합니다.
아래 글 참고 부탁드립니다.

https://devtalk.kakao.com/t/topic/61935/2

1개의 좋아요