우선 예의없게도 소스코드 먼저 보여드리겠습니다............................
j1Query(function($) {
$(document).ready(function() {
var route_count = $('#route_count').val();
for(var j=0;j<route_count;j++){
$('#map').append('<div id="map'+j+'" style="float:left;">'+j+'</div>');
var mapX = "";
var mapY = "";
var defaultLevel = 6;
var oCenterPoint = new nhn.api.map.LatLng(37.5010226, 127.0396037);
var oMap = new nhn.api.map.Map(document.getElementBy1Id('map'+j), {
point : oCenterPoint,
zoom : defaultLevel,
enableWheelZoom : true,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(150, 150) });
var markerCount = 0; //마커의 갯수
var oSize = new nhn.api.map.Size(28, 37);
var oOffset = new nhn.api.map.Size(14, 37);
// - Draggable Marker 의 경우 Icon 인자는 Sprite Icon이 된다.
// - 따라서 Sprite Icon 을 사용하기 위해 기본적으로 사용되는 값을 지정한다.
// - Sprite Icon 을 사용하기 위해서 상세한 내용은 레퍼런스 페이지의 nhn.api.map.SpriteIcon 객체를 참조하면 된다.
var mapInfoTestWindow = new nhn.api.map.InfoWindow(); // - info window 생성
mapInfoTestWindow.setVisible(false); // - infowindow 표시 여부 지정.
oMap.addOverlay(mapInfoTestWindow); // - 지도에 추가.
var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
mapInfoTestWindow.attach('changeVisible', function(oCustomEvent) {
if (oCustomEvent.visible) {
oLabel.setVisible(false);
}
});
oMap.attach('mouseenter', function(oCustomEvent) {
var oTarget = oCustomEvent.target;
// 마커위에 마우스 올라간거면
if (oTarget instanceof nhn.api.map.Marker) {
var oMarker = oTarget;
oLabel.setVisible(true, oMarker); // - 특정 마커를 지정하여 해당 마커의 title을 보여준다.
}
});// 마우스 들어왔을 때 보일 것
oMap.attach('mouseleave', function(oCustomEvent) {
var oTarget = oCustomEvent.target;
// 마커위에서 마우스 나간거면
if (oTarget instanceof nhn.api.map.Marker) {
oLabel.setVisible(false);
}
});
$.ajax({
type: 'POST',
url: 'mapt.php',
dataType: 'text',
data: {
user_id : 'user_id',
route_count : j
},
cache: false,
success: function(result){
//alert(result);
var arr = result.split(",");
if(result != ""){
for(var i = 0; i<arr.length;i++){
var arr2 = arr[i].split("/");
//map(arr2[0],arr2[1],arr2[2]);
mapX = arr2[0];
mapY = arr2[1];
var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot.png', oSize, oOffset);
var oPoint = new nhn.api.map.TM128(mapX,mapY);
oMarker = new nhn.api.map.Marker(oIcon, { title : arr2[2] });
// alert(2);
oMarker.setPoint(oPoint);
oMap.addOverlay(oMarker);
oMap.setCenter(oPoint);
var aPoints = oPolyline.getPoints(); // - 현재 폴리라인을 이루는 점을 가져와서 배열에 저장.
aPoints.push(oPoint); // - 추가하고자 하는 점을 추가하여 배열로 저장함.
oPolyline.setPoints(aPoints);
oMap.addOverlay(oPolyline);
//alert(result);
}
}
},
error:function(){
alert("error");
}
});
markerCount++;
var oPolyline = new nhn.api.map.Polyline([], {
strokeColor : '#f00', // - 선의 색깔
strokeWidth : 5, // - 선의 두께
strokeOpacity : 0.5 // - 선의 투명도
}); // - polyline 선언, 첫번째 인자는 선이 그려질 점의 위치. 현재는 없음.
//oMap.addOverlay(oPolyline); // - 지도에 선을 추가함.
alert(12);
}
});
});
이렇게 실행하면 나오는 화면입니다
이게 정상적으로 출력된 화면입니다(지도 2개는 서로 다른 지도)
ajax를 통해서 좌표값을 불러와서 지도에 뿌려주는건데 반복문으로 조건에 따라 지도 갯수가 달라져요
그리고 위에 빨간 alert(12); 이 부분을 지우면
이렇게 따로 찍혀야 되는 좌표들이 한 지도에 몰려서 찍힙니다 ㅠㅠ
제가 생각 할 때는 ajax 로 php가 실행중일때 for문이 다음 루프를 돌아버려서 한곳에 찍히는 거라고 예상은 하고있는데..
for문 안에서 delay도 주고 settimeout도 시도 해보고 현재 시간과 비교해서 딜레이 주는 함수도 적용해봤지만 ㅠㅠ
막막하네요.......
개발자 선배님들 도와주세요 ㅠㅠㅠㅠㅠ
