지도에 인포윈도우 + 이미지 마커를 만들려고 하는데 오류가 납니다

카카오맵 API (지도/로컬)
1

JSP/Servlet 웹 프로젝트를 진행중인데 DB 하나의 테이블에 있는 주소값과 이미지 경로값을 전부 리스트로 받아와서 지도에 주소와 이미지를 찍었는데요 주소에 이미지 마커가 잘 생성되는데 하나의 이미지로만 마커가 생성됩니다 크롬 개발자도구에서 스크립트문에 다른 이미지 주소가 들어가는거는 확인이 되는데 보이는거는 하나의 이미지만 보이는데 해결방법이 없을까요ㅜㅜ

<%
String member_animal;
String member_address;

     for (int i = 0; i < animalList.size(); i++) {
        MemberAnimalBean mab = (MemberAnimalBean) animalList.get(i);

        member_animal = mab.getMemberAnimal();
        member_address = mab.getMemberAddress();

        System.out.println(member_animal);
        System.out.println(member_address);

%>

var imageSrc = [];

var imageSrc = ‘Animal_File_Upload/<%=member_animal%>’, // 마커이미지의 주소입니다
imageSize = new kakao.maps.Size(64, 69), // 마커이미지의 크기입니다
imageOption = {offset: new kakao.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

// 주소로 좌표를 검색합니다
geocoder.addressSearch(’<%=member_address%>’,
function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === kakao.maps.services.Status.OK) {

                    var markerImage = new kakao.maps.MarkerImage(
                          imageSrc, imageSize, imageOption);
                    var coords = new kakao.maps.LatLng(result[0].y,
                           result[0].x);

                    // 결과값으로 받은 위치를 마커로 표시합니다
                    var marker = new kakao.maps.Marker({
                       map : map,
                       position : coords,
                       image : markerImage
                    // 마커이미지 설정
                    });

                    // 인포윈도우로 장소에 대한 설명을 표시합니다
                    var infowindow = new kakao.maps.InfoWindow(
                          {
                             content : '<div style="width:150px;text-align:center;padding:6px 0;">내위치</div>'
                          });
                    infowindow.open(map, marker);

                    // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
                    map.setCenter(coords);
                 }
              });

<%}%>

2

소스는 저렇게 되어있는데 아시는분 계신가요ㅜㅜㅜ

3

For문에서 print를 할 때는 리스트의 i번째 해당하는 address, animal을 찍지만
전역으로 선언된 member_animal, member_address 변수에는 리스트의 마지막 데이터 값으로 들어가서
마커 이미지와 좌표 검색이 리스트의 마지막 데이터로 실행하는 것 같습니다.

반복문 안에서 i번째 데이터로 마커 이미지 선언과 좌표 검색을 호출할 수 있도록 로직을 수정해주세요.

4

전역변수로 같이 선언된 member_addreess는 지도에 정확하게 하나하나 표시가 잘되는데 이미지 주소에 해당하는 member_animal만 중복되는 오류가 발생하는데 혹시 다른 이유가 있을까여…ㅜ

5

if문내에 MarkerImage 객체를 생성 시 데이터의 이미지 주소에 맞게 설정되어 있는지
로그로 확인해보셨나요?

6

캡처2넵 이미지 확인해보시면 주소에 맞는 이미지가 각각 들어가있습니다.

8

아래 링크와 첨부 소스 참고해주세요.

https://devtalk.kakao.com/t/topic/67435/7?u=lea.ju

var list = [
    {
        address: '제주특별자치도 제주시 첨단로 242',
        imgSrc: "https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png",
        imgSize: new kakao.maps.Size(24, 35)
    },
    {
        address: '서울 강남구 압구정동 386-1',
        imgSrc: 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png',
        imgSize: new kakao.maps.Size(64, 69)
    }
];

list.forEach(data => {
    var address = data.address;
    var imageSrc = data.imgSrc; // 마커 이미지입니다.
    var imageSize = data.imgSize; // 마커 이미지의 크기입니다


    // 주소로 좌표를 검색합니다
    geocoder.addressSearch(address, function(result, status) {
        // 정상적으로 검색이 완료됐으면
        if (status === kakao.maps.services.Status.OK) {

            var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
            var coords = new kakao.maps.LatLng(result[0].y, result[0].x);

            // 결과값으로 받은 위치를 마커로 표시합니다
            var marker = new kakao.maps.Marker({
                map: map,
                position: coords,
                image: markerImage
            });

            // 인포윈도우로 장소에 대한 설명을 표시합니다
            var infowindow = new kakao.maps.InfoWindow({
                content: '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>'
            });

            infowindow.open(map, marker);

            // 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
            map.setCenter(coords);
        }
    });
});
1개의 좋아요
9

정말 감사합니다 !!! 무사히 지도에 주소값이랑 주소에 맞는 이미지각 중복되지 않고 들어갔습니다!!!
답변해주셔서 감사합니다

1개의 좋아요