watchPosition를 사용하여 마커를 추가하였는데
좌표가 바뀔떄마다 마커가 생겨서 기존의 위치에 대한 마커를 삭제하고 싶은데
명령어를 어디에 어떻게 넣어야하는지 모르겠습니다.
(다른 마커는 건드리지 않고 watchPosition에 의해 생겼던 마커들만 지우고 싶습니다.)
<meta charset="utf-8">
<title>다음 지도 API</title>
<div id="map" style="width:100% ;height:100vh;"></div>
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=e2c2859d71094885cd5f2569e9ba9fa7&libraries=clusterer"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.25782,126.51845), // 지도의 중심좌표
level: 2, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
var imageSrc = 'https://i.ibb.co/xz5qYkg/image.png', // 마커이미지의 주소입니다
imageSize = new kakao.maps.Size(64, 69), // 마커이미지의 크기입니다
imageOption = {offset: new kakao.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
markerPosition = new kakao.maps.LatLng(37.54699, 127.09598); // 마커가 표시될 위치입니다
// 마커 이미지의 주소
var markerImageUrl = 'https://i.ibb.co/xz5qYkg/image.png',
markerImageSize = new kakao.maps.Size(40, 42), // 마커 이미지의 크기
markerImageOptions = {
offset : new kakao.maps.Point(20, 42)// 마커 좌표에 일치시킬 이미지 안의 좌표
};
// 마커 이미지를 생성한다
var markerImage = new kakao.maps.MarkerImage(markerImageUrl, markerImageSize, markerImageOptions);
// 마커 클러스터러를 생성합니다
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 6 // 클러스터 할 최소 지도 레벨
});
// 지도에 확대 축소 컨트롤을 생성한다
var zoomControl = new kakao.maps.ZoomControl();
//지도 사이즈 kakao_100km
map.setCopyrightPosition(kakao.maps.CopyrightPosition.BOTTOMLEFT, true);
// 지도의 우측에 확대 축소 컨트롤을 추가한다
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
var 데이터 = [
[37.25782,126.51845,'<div style="padding:5px;">내용1</div>'],
[37.95865,126.45003,'<div style="padding:5px;">내용2</div>'],
[37.95918,124.66657,'<div style="padding:5px;">내용3</div>'],
[37.96011,124.66657,'<div style="padding:5px;">내용4</div>'],
[37.96075,124.66802,'<div style="padding:5px;">내용5</div>'],
[37.97269,124.72039,'<div style="padding:5px;">내용6</div>']
];
// HTML5의 geolocation으로 사용할 수 있는지 확인합니다
if (navigator.geolocation) {
// GeoLocation을 이용해서 접속 위치를 얻어옵니다
navigator.geolocation.watchPosition(function(position) {
var lat = position.coords.latitude, // 위도
lon = position.coords.longitude; // 경도
var locPosition = new kakao.maps.LatLng(lat, lon), // 마커가 표시될 위치를 geolocation으로 얻어온 좌표로 생성합니다
message = '<div style="padding:5px;">현재 위치</div>'; // 인포윈도우에 표시될 내용입니다
// 마커와 인포윈도우를 표시합니다
displayMarker(locPosition, message);
});
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var locPosition = new kakao.maps.LatLng(33.450701, 126.570667),
message = 'geolocation을 사용할수 없어요..'
displayMarker(locPosition, message);
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition, message) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map: map,
position: locPosition
});
var iwContent = message, // 인포윈도우에 표시할 내용
iwRemoveable = true;
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : iwContent,
removable : iwRemoveable
});
// 마커에 클릭이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function() {
// 마커 위에 인포윈도우를 표시합니다
infowindow.open(map, marker),
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
});
// 지도 중심좌표를 접속위치로 변경합니다
map.setCenter(locPosition);
}
var markers = [];
for (var i=0; i < 데이터.length; i++) {
// 지도에 마커를 생성하고 표시한다
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(데이터[i][0],데이터[i][1]) // 마커의 좌표
});
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : 데이터[i][2]
});
// 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
markers.push(marker);
// 마커에 mouseover 이벤트와 mouseout 이벤트를 등록합니다
// 이벤트 리스너로는 클로저를 만들어 등록합니다
// for문에서 클로저를 만들어 주지 않으면 마지막 마커에만 이벤트가 등록됩니다
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
}
clusterer.addMarkers(markers);
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
//맵 타입 -스카이뷰 일반지도
var mapTypeControl = new kakao.maps.MapTypeControl();
// 지도 오른쪽 위에 지도 타입 컨트롤이 표시되도록 지도에 컨트롤을 추가한다.
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
</script>
