watchposition 을 활용해 현재 위치를 추적하는 마커 생성 코드입니다…
버튼을 누르면 mypos 함수가 실행되는데
이게 버튼을 누를 때 마다 마커가 중복해서 생깁니다…
해결방법 알 수 있을까요??
// 현재 위치를 받아오는 javascirpt code 입니다
function mypos(){
var posmarkers = [];
var locindex = 0;
var posmarkerImageUrl = 'https://t1.daumcdn.net/localimg/localimages/07/2018/img/exsearch-ico-red8_hover.png',
posmarkerImageSize = new kakao.maps.Size(20, 20), // 마커 이미지의 크기
posmarkerImageOptions = {
offset : new kakao.maps.Point(20, 20)// 마커 좌표에 일치시킬 이미지 안의 좌표
};
// 마커 이미지를 생성한다
var posmarkerImage = new kakao.maps.MarkerImage(posmarkerImageUrl, posmarkerImageSize, posmarkerImageOptions);
// 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으로 얻어온 좌표로 생성합니다
// 마커와 인포윈도우를 표시합니다
displayMarker(locPosition);
});
} else { // HTML5의 GeoLocation을 사용할 수 없을때 마커 표시 위치와 인포윈도우 내용을 설정합니다
var locPosition = new kakao.maps.LatLng(33.450701, 126.570667);
displayMarker(locPosition);
}
// 지도에 마커와 인포윈도우를 표시하는 함수입니다
function displayMarker(locPosition) {
// 마커를 생성합니다
var posmarker = new kakao.maps.Marker({
position: locPosition,
image : posmarkerImage
});
//마커를 배열에 넣습니다
posmarkers.push(posmarker);
//배열에 넣은 마커를 생성하는 부분입니다
if(posmarkers.length>=2)
// 배열의 개수가 2개가 넘어가면 기존 배열의 마커를 지우고 배열값도 삭제합니다
{ posmarkers[posmarkers.length-2].setMap(null); posmarkers.shift(); }
//배열에 저장한 마커를 맵에 뛰웁니다
posmarkers[posmarkers.length-1].setMap(map);
// 지도 중심좌표를 접속위치로 변경합니다
if(locindex === 0){
map.setCenter(locPosition);
locindex = 1;
}
}
}