지도/로컬 API에 대한 문의게시판입니다.
DB의 좌표를 받아 마커를 지속적으로 생성하려고 합니다.
setInterval을 사용 중에 지도를 제외한 나머지 부분이 하얗게 되는데 어렵습니다…
<script>
var map;
$(document).ready(function(){
/* setInterval(function () {
$.ajax({
type:'post',
url:'map.do',
success:function() {
};
});
}, 1000); */
setInterval(function () {
var posi = [
<c:forEach items="${shipState}" var="laton">
[<c:out value="${laton.latitude}"/>,
<c:out value="${laton.longitude}"/>,
<c:out value="${laton.vessel_dir}"/>,
],
</c:forEach>];
var nowLat = ${vesselState[0].latitude}; //현재 위도
var nowLon = ${vesselState[0].longitude}; //현재 경도
var nowPosition = new kakao.maps.LatLng(nowLat, nowLon); //현재 위치 저장
var mapContainer = document.getElementById("map"), //지도를 표시할 div
mapOption = {
center : nowPosition, //지도 중심좌표
level : 5 //확대 레벨
};
map = new kakao.maps.Map(mapContainer, mapOption); //지도를 표시할 div와 옵션으로 지도 생성
//지도에 표시할 원을 생성
var circle = new kakao.maps.Circle({
center : nowPosition,
radius : 500, //미터 단위 원의 반지름
strokeWeight : 1, //선의 두께
strokeColor : '#75B8FA', //선의 색
strokeOpacity : 1, //선의 불투명도 0~1
strokeStyle : 'solid', //선의 스타일
fillColor : '#CFE7FF', //채우기색
fillOpacity : 0.3 //채우기 불투명도
});
//현재 위치 마커생성
var marker = new kakao.maps.Marker({
map: map,
position : nowPosition
});
//마커 클릭시 좌표 표시
clicker(marker);
//중심에 원 생성
circle.setMap(map);
//마커 이미지 커스텀
var imageSize = new daum.maps.Size(20, 18);
var imageSrc = "/images/jota/ftLoc/yellow.png";
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize);
//선을 그리기 위한 좌표 배열 생성
var linePath = [];
//배가 지나간 자리에 마커 표시
for(var i = 0 ; i < posi.length ; i++) {
//좌표 값들을 저장
var coords = new daum.maps.LatLng(posi[i][0], posi[i][1]);
linePath.unshift(coords); //지나간 좌표 경로 추가
//위치를 마커로 표시
var markers = new daum.maps.Marker({
map : map,
position : coords,
image : markerImage,
clickable : true //마커를 클릭했을때 지도의 클릭 이벤트가 발생하지 않도록함
});
//마커 표시
markers.setMap(map);
clicker(markers, i);
}
//이동 좌표에 선 그리기
linePath.push(nowPosition); //마지막에 현재 좌표 추가
var polyline = new kakao.maps.Polyline({
path: linePath, //좌표 배열
strokeWeight:5, //선의 두께
strokeColor : '#997000', //선 색깔
strokeOpacity:0.7, //선 불투명도
strokeStyle:'solid' //선 스타일
});
polyline.setMap(map); //지도에 선 표시
map.setZoomable(false);
//현재 좌표로 지도 이동하기 위한 함수
$("#refresh").click(function() {
var moveCenter = nowPosition; //중심 좌표
map.panTo(moveCenter); //지도를 부드럽게 이동
});
}, 3000);
});
//마커 클릭시 좌표 테이블에 표시하기 위한 함수
function clicker(marker, i) {
kakao.maps.event.addListener(marker, 'click', function() {
var clicked = marker.getPosition();
$("#lati").text(clicked.getLat().toFixed(5)); //마커 클릭시 테이블에 위도 표시
$("#longi").text(clicked.getLng().toFixed(5)); //마커 클릭시 테이블에 경도 표시
$("#heading").text(posi[i][2]);
});
}
</script>