If절로 Marker 생성 삭제 질문

지도/로컬 API
#1

var current = document.getElementById(‘current’);

current.addEventListener(‘click’, function() {
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+0.0048, lon+0.0304); // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다 

		var currentmarker = new kakao.maps.Marker({
	        position: locPosition,
	    });

		if(!currentmarker.getMap()) {
			currentmarker.setMap(map);
        	                 map.panTo(locPosition);
			current.style.color = '#4374D9';
		} else {
			currentmarker.setMap(null);
			current.style.color = 'black';
		}
    });
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다   
    message = '위치를 찾을 수 없습니다.';
    alert(message);
}

});

위에서

if(!currentmarker.getMap()) {
currentmarker.setMap(map);
map.panTo(locPosition);
current.style.color = ‘#4374D9’;
} else {
currentmarker.setMap(null);
current.style.color = ‘black’;
}

이 부분에서 마커 생성은 되나 클릭을 한 번 더 했을 경우 계속 생성이 됩니다.
클릭을 하면 마커가 getMap()이 되고 또 한 번 누르면 getMap()이 된 상태에서 누른 것이니 당연이 setMap(null)이 발생할 것이라 생각했는데
계속 setMap(map)이 발생하는데 이유가 뭘까요…

#2

currentMarker를 전역으로 선언하여 사용해야 합니다.
로직상으로 보면 계속 currentmarker를 생성하고 있어서 마커가 계속 생기고 있습니다.

아래 예제도 참고해주세요.

<div id="map" style="width:100%;height:350px;"></div>
<em>클릭한 위치에 마커가 표시됩니다!</em>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div  
    mapOption = { 
        center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    };

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

// 지도에 표시된 마커 객체
var marker = new kakao.maps.Marker({map: map});
    
// 지도를 클릭했을때 클릭한 위치에 마커를 추가하도록 지도에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {        
    // 클릭한 위치에 마커를 표시합니다 
    const latLng = mouseEvent.latLng;
    marker.setPosition(latLng);
        
});
</script>
1개의 좋아요
#3

정말 감사합니다!

1개의 좋아요