데이터 가져와서 positions 에 title 이랑좌표를 넣어줬는데 콘솔에 title이랑 latlng에대해 저런 오류가 뜨는데 왜그런지 알수 있을까요?
` var address = new Array();
var number = new Array();
<c:forEach var='itemList' items='${searchList}'>
address.push('${itemList.getRoom().getAddr()}');
</c:forEach>
<c:forEach var="itemList" items="${searchList}" >
number.push("${itemList.getRoom().getSeq_rm()}");
</c:forEach>
var mapContainer = document.getElementById('kkomap'), // 지도를 표시할 div
mapOption = {
center : new kakao.maps.LatLng(36.2, 110.25), // 지도의 중심좌표
level : 3
// 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new kakao.maps.Map(mapContainer, mapOption);
//마커 표시할 위치와 객체 배열
var positions = new Array();
for (var i = 0; i < address.length; i++) {
var pOb = new Object();
pOb.title = number[i] ;
pOb.latlng = address[i] ;
positions.push(pOb);
};
// 지도를 재설정할 범위정보를 가지고 있을 LatLngBounds 객체를 생성합니다
var bounds = new kakao.maps.LatLngBounds();
var imageSrc = 'images/icons/map_house.ico'
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new kakao.maps.services.Geocoder();
for(var i = 0; i<positions.length; i++) {
geocoder.addressSearch(positions[i].latlng, function(
result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {
var coords = new kakao.maps.LatLng(result[0].y,
result[0].x);
// 마커 이미지의 이미지 크기 입니다
var imageSize = new kakao.maps.Size(24, 35);
// 마커 이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc,
imageSize);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
map : map, // 마커를 표시할 지도
position : coords, // 마커를 표시할 위치
title : positions[i].title, // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
image : markerImage
});
// LatLngBounds 객체에 좌표를 추가합니다
bounds.extend(positions[i].latlng);
}
});
};
function setBounds() {
// LatLngBounds 객체에 추가된 좌표들을 기준으로 지도의 범위를 재설정합니다
// 이때 지도의 중심좌표와 레벨이 변경될 수 있습니다
map.setBounds(bounds);
}`
positions 반복문 내 스코프를 강제해야 합니다.
이를 위해서 for문이 아닌 positions.forEach
문으로 변경해주세요.
또는 for문의 var 대신 let, const
를 사용하는 방법도 있습니다.
이제 주소변환은 잘되는데 카카오지도 부분이 하얀 바탕으로 뜹니다…맵띄우는 div태그 id 도 하나고 key 도 자바스크립트 용으로 잘가져왔는데…
bounds.extend() API는 latlng 객체를 파라미터로 넣어야 합니다.
positions.latlng에 들어간 값이 kakao.maps.latlng 객체인지 확인해주세요.
http://apis.map.kakao.com/web/documentation/#LatLngBounds_extend
setCenter에 이상한 좌표값이 들어가있었네요ㅠㅠ 감사합니다ㅎㅎㅎ
1개의 좋아요