마커 이미지에 텍스트 넣기 문의

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

기존 지도 내 마커를 색깔 및 숫자 자동 이미지로 추출해주는 URL을 통하여 사용하고 있었습니다.

마커

이미지 추출 URL 서비스가 작동되지 않아 이를 대체 하려고 하는데

마커를 이미지로 넣을 때 마커에 위 사진과 같이 텍스트(숫자)를 넣을 수 있는 기능이 없을까요?

위치는 이미지 위,아래,옆 상관없고 텍스트가 확인만 되면 됩니다.

현재 이미지 클릭 시 별도로 인포윈도우 기능은 사용 중에 있습니다.

var imageSrc ="https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png ";
var imageSize = new kakao.maps.Size(26, 37);

var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);

markers[<?=$i?>] = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(<?=$v2[pos_x]?>, <?=$v2[pos_y]?>),
image : markerImage

});

kakao.maps.event.addListener(markers[<?=$i?>],‘click’, function() {
infowindow.setContent(“ <?=$v2[sangho]?>
지역<?=$v2[area]?> - 순번<?=$v2[orderby]?>”);
infowindow.open(map, markers[<?=$i?>]);
});

2

마커에 텍스트를 추가하는 기능은 제공하고 있지 않습니다.
키워드 검색 예제 같이 sprite 이미지로 마커 이미지를 적용하거나 CustomOverlay로 마커를 표현해서 텍스트를 표시할 수 있습니다.
CustomOverlay를 사용할 경우 이벤트는 content에 직접 등록해주셔야 합니다.
아래 코드 참고해주세요.

/* CSS */
.marker-img {
  background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png') no-repeat;
  width: 24px;
  height: 35px;  
}

.text {
  padding-top: 5px;
  font-weight: bold;
}

// 마커를 표시할 위치와 title 객체 배열입니다 
let 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 ++) {
    let wrap = document.createElement('div'); //overlay content를 생성합니다.
    wrap.className = 'marker-img';
    wrap.onclick = () => { //클릭 이벤트를 등록합니다.
        console.log(positions[i].title);
    }
    
    let text = document.createElement('div');
    text.className = 'text';
    text.innerText = positions[i].title;
    
    wrap.appendChild(text);
     
    let overlay = new kakao.maps.CustomOverlay({ 
        map: map,
        position: positions[i].latlng,
        content: wrap
    });
}