var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 6 // 지도의 확대 레벨
};
// 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
//일반 지도와 스카이뷰로 지도 타입을 전환할 수 있는 지도타입 컨트롤을 생성합니다
var mapTypeControl = new kakao.maps.MapTypeControl();
// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
// kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
map.addControl(mapTypeControl, kakao.maps.ControlPosition.TOPRIGHT);
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new kakao.maps.ZoomControl();
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
var cnt=0;
// 주소로 좌표를 검색합니다
var addra=["서울 강남구 양재대로 333","서울 강남구 도산대로 403","서울 서초구 강남대로 475"];
for(var i=0; i<addra.length; i++){
console.log(addr[i]);
geocoder.addressSearch(addra[i], function(result, status) {
console.log(result[0]);
//alert(i);
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
console.log("addr:"+addr[i]);
var coords = new kakao.maps.LatLng(result[0].y, result[0].x);
//alert(coords);
var redstar1 = '../image/redstar1.png'; // 마커이미지의 주소입니다
var redstar2 = '../image/redstar2.png'; // 마커이미지의 주소입니다
var redstar3 = '../image/redstar3.png'; // 마커이미지의 주소입니다
var bluestar1 = '../image/bluestar1.png'; // 마커이미지의 주소입니다
var bluestar2 = '../image/bluestar2.png'; // 마커이미지의 주소입니다
var bluestar3 = '../image/bluestar3.png'; // 마커이미지의 주소입니다
var avgstar = '../image/avgstar.png';
var imageSize = new kakao.maps.Size(45, 45); // 마커이미지의 크기입니다
var imageOption = {offset: new kakao.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
if(searchprice[cnt]>=veryveryveryhighprice)
{
var markerImage = new kakao.maps.MarkerImage(redstar1, imageSize, imageOption);
console.log("searchprice:"+searchprice[cnt]+"vvvhp:"+veryveryveryhighprice);
}
else if(searchprice[cnt]>=veryveryhighprice && searchprice[cnt]<veryveryveryhighprice)
{
var markerImage = new kakao.maps.MarkerImage(redstar2, imageSize, imageOption);
console.log("searchprice:"+searchprice[cnt]+"vvhp:"+veryveryhighprice);
}
else if(searchprice[cnt]>=veryhighprice && searchprice[cnt]<veryveryhighprice)
{
var markerImage = new kakao.maps.MarkerImage(redstar3, imageSize, imageOption);
console.log("searchprice:"+searchprice[cnt]+"vhp:"+veryhighprice);
}else if(searchprice[cnt]>=avgprice && searchprice[cnt]<veryhighprice)
{
var markerImage = new kakao.maps.MarkerImage(avgstar, imageSize, imageOption);
console.log("searchprice:"+searchprice[cnt]+"avgprice:"+avgprice);
}
else if(searchprice[cnt]<avgprice && searchprice[cnt]>=verylowprice)
{
var markerImage = new kakao.maps.MarkerImage(avgstar, imageSize, imageOption);
console.log("searchprice:"+searchprice[cnt]+"avgprice:"+avgprice);
}
else if(searchprice[cnt]<verylowprice && searchprice[cnt]>=veryverylowprice)
{
var markerImage = new kakao.maps.MarkerImage(bluestar1, imageSize, imageOption);
console.log("searchprice:"+searchprice[cnt]+"vlp:"+verylowprice);
}
else if(searchprice[cnt]<veryverylowprice && searchprice[cnt]>=veryveryverylowprice){
var markerImage = new kakao.maps.MarkerImage(bluestar2, imageSize, imageOption);
console.log("searchprice:"+searchprice[cnt]+"vvlp:"+veryverylowprice);
}
else if(searchprice[cnt]<veryveryverylowprice){
var markerImage = new kakao.maps.MarkerImage(bluestar3, imageSize, imageOption);
console.log("searchprice:"+searchprice[cnt]+"vvvlp:"+veryveryverylowprice);
}
// 결과값으로 받은 위치를 마커로 표시합니다
console.log("집이름:"+searchhome_name[cnt]);
console.log("지역:"+addr[cnt]);
var marker = new kakao.maps.Marker({
map: map,
position: coords,
image:markerImage
});
var cc = cnt;
kakao.maps.event.addListener(marker, 'click', function() {
// 이곳에 작성하면 됩니다.
// 여기서 infoWindow.getContent() 로 내용을 가져올 수 있습니다.
location.href="content.do?num="+num[cc];
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
for(j=0;j<searchhome_name.length;j++){
if(cnt==j){
var infowindow = new kakao.maps.InfoWindow({
content: '<div id="home_name" style="width:150px;text-align:center;padding:6px 0;">'+searchhome_name[j]+'</div>'
});
}
}
infowindow.open(map, marker);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
cnt++;
}
});
};
geocoder.addressSearch(addra[i], function(result, status) {
부분에서 addr부분을 배열로 주어 마커를 뽑아 출력을 하려했습니다
그런데 result부분이 계속 배열 순서대로가 아닌 랜덤으로 처리가 됩니다…
어떻게 처리해야할까요
새로고침 할때마다 계속 변경이 됩니다
그리고 안에서 for문 i 수가 제대로 돌지 않습니다. 비동기식인가요?? add리스너라던가?