안녕하세요 지도를 구현하다 보니 어려움을 느끼게 되여서 글을 올리게 되었습니다

지도/로컬 API
#1

안녕하세요 제가 그때 도움을 받고 닫기가 가능한 커스텀 오버레이를 다중 마커로 표현하는 데에는 성공하였습니다.

이번에도 도움을 얻고자 문의를 드리는데요

일단 그때 구현한것을 토대로 이제 다양한 이미지 마커 표시하기 기능을 추가 하려고 하는데 추가를 하면 마커 클릭 이벤트가 사라지는 상황이 생기고 제가 구현한 부분을 어떤식으로 객체화를 시킬수 있는지 도움 받을 수 잇을까요?
Mapapi1Mapapi2Mapapi3Mapapi4

우선 코드는 이렇게 설계를 했구요 읽어주셔서 감사합니다

#2

좀 더 빠르게 답변을 드릴 수 있도록 소스를 스크린 샷이 아닌 코드로 첨부해주세요.

저번에 주신 내용을 바탕으로 이미지를 마커 표시하기 예제를 같이 붙인 소스 첨부해드립니다.
비교해서 확인 부탁드립니다.

<div id="map" style="width:100%;height:350px;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도의 중심좌표
    mapOption = { 
        center: new kakao.maps.LatLng(33.451475, 126.570528), // 지도의 중심좌표
        level: 3 // 지도의 확대 레벨
    }; 

var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

var positions = [
    {
        title: '카카오', 
        latlng: new kakao.maps.LatLng(33.450705, 126.570677)
    },
    {
        title: '생태연못', 
        latlng: new kakao.maps.LatLng(33.450936, 126.569477)
    },
    {
        title: '텃밭', 
        latlng: new kakao.maps.LatLng(33.450879, 126.569940)
    },
    {
        title: '근린공원',
        latlng: new kakao.maps.LatLng(33.451393, 126.570738)
    }
];

for(let i=0; i < positions.length; i++){
    var data = positions[i];
    displayMarker(data);
}

var clickedOverlay = null;
    
var imageSrc = 'http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png', // 마커이미지의 주소입니다    
imageSize = new kakao.maps.Size(64, 69), // 마커이미지의 크기입니다
imageOption = {offset: new kakao.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.

// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);


// 지도에 마커를 표시하는 함수입니다    
function displayMarker(data) { 
    var marker = new kakao.maps.Marker({
        map: map,
        position: data.latlng,
        image: markerImage
    });
    var overlay = new kakao.maps.CustomOverlay({
        yAnchor: 3,
        position: marker.getPosition()
    });
    
    var content = document.createElement('div');
    content.innerHTML =  data.title;
    content.style.cssText = 'background: white; border: 1px solid black';
    
    var closeBtn = document.createElement('button');
    closeBtn.innerHTML = '닫기';
    closeBtn.onclick = function () {
        overlay.setMap(null);
    };
    content.appendChild(closeBtn);
    overlay.setContent(content);

    kakao.maps.event.addListener(marker, 'click', function() {
        if(clickedOverlay) {
        	clickedOverlay.setMap(null);
        }
        
        overlay.setMap(map);
        
        clickedOverlay = overlay;
    });
}
</script>
1개의 좋아요
#3

lea.ju님 답글 달아주셔서 감사합니다. 다음부터는 캡처본이아닌 코드로 올리겠습니다.

우선 사용하신 예제를 봤는데 어, 다른 이미지를 찍는것도 맞지만

각각의 마커들을 카테고리 형식으로 바꾸려고 했던거거든요

현재 카테고리별 장소 검색하기를 보면서 참고 하고있는데 혹시 가이드를 받을 수 있을까요?

#4

음… http://apis.map.kakao.com/web/sample/categoryFromBounds/ 예제처럼
마커 이미지를 검색한 카테고리 값에 따라 변경하려고 하시는 건가요?

어떤 부분을 원하시는 건지 다시 설명 부탁드립니다.

#5

네 맞습니다. 제가 위에서 설명을 잘 못 했는데요 마커 이미지를 카테고리 값에 따라 변경하려고 하는 지도를 만드려고 합니다
하지만 검색의 값이 아니라 DB에서 데이터를 받아오 값으로 마커를 넣어주려고 하고 있습니다

#6

예제와 비슷하게 타입별로 마커 이미지를 생성하여 리턴해주는 함수를 만들어서
마커 생성 시 해당 함수를 호출하여 image를 받아 적용하면 될 것 같습니다.

#7

답장 해주셔서 감사합니다 말씀하신 가이드 대로 한번 해보겠습니다~

1개의 좋아요