안녕하세요
제목과 같이 화면 밖으로 간 커스텀 마커에 적용된 css의 스타일을 아래의 함수를 통해 변경 한 후 마커로 가보면 적용되어 있지 않습니다.
document.getElementById("selectedCircle" + id).style.visibility = 'visible';
document.getElementById("selectedCircle" + id).style.animationPlayState = 'running';
아마도 화면 밖에 있는 마커는 document에서 삭제되는 최적화로 인해 getElementById로 해당 ID를 찾을 수 없는것 같은데…
제가 지식이 짧아 동작되는 방법을 찾기 어렵습니다.
물론 화면상에 마커를 둔 뒤 해당 내용을 동작하면 동작은 잘 됩니다.
프로그램 특성 상 화면 밖 마커들을 건들여야하는 상황이라 꼭 해답을 찾았으면 합니다.
감사합니다.
Element를 지우게 될 경우, Id로 요소를 찾으려 해도 값이 없기 때문에 스타일 변경을 할 수 없습니다.
화면 밖에서도 동작이 이뤄져야 하는 마커의 경우
삭제 로직에서 제외되도록 구현해주세요.
안녕하세요 제가 조금 질문이 어리석었던 것 같습니다.
화면 밖으로 갈 경우 카카오 맵 API에서 Element를 지우는 것은 아닌가요?^^;
제가 작성하는 코드에서는 별도로 삭제하는 것이 없습니다.
혹시 삭제 로직에서 제외되도록 하는 방법이 따로 있는지요^^
저도 잘못 이해하고 답변드렸네요. 죄송합니다.
화면 밖의 커스텀 오버레이는 지도에서 삭제되기 때문에
마커를 배열로 관리하고 n번째 또는 특정 마커를 구한 다음
content를 가져와서 스타일을 변경해주세요.
아래 코드는 참고로 봐주시고
화면에 마커가 보이지 않는 곳으로 이동한 다음
지도를 클릭하면 0번째 마커 텍스트 색상을 red로 변경하는 코드입니다.
<style>
.wrap {
padding: 3px;
background-color: #ffffff;
}
<script>
let mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
let map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커를 표시할 위치와 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)
}
];
// 커스텀 오버레이 마커를 생성합니다.
let markers = positions.map((item, idx) => {
let div = document.createElement('div');
div.id = 'marker-'+idx;
div.className = 'wrap'
div.innerText = item.title;
return new kakao.maps.CustomOverlay({
map: map,
content: div,
position: item.latlng
});
});
//지도를 클릭하면 0번째 마커 색상을 변경
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
let content = markers[0].getContent();
content.style.color = 'red';
});positions > content 객체안에
태그를 만들어주어 직접 css 건들여보시는방법은 어떠신가요?
positions = [];
positions.push({
title: v.CTR_NO,
content:
// ‘<div class=“map-title” style="background-color: #8861e6;color: #fff;margin: 0px 0px 0px -5px; padding: 1px 5px 1px 5px;"표시’,
//임의로 만들어봤어요 주석으로 처리해야 댓글로 보이더군요
latlng: new kakao.maps.LatLng(‘위도’, ‘경도’)});
답변 감사드립니다~!! 정말 많은 도움이 되었습니다~~css 직접 건들이는 방법이 필요했는데 응용해서 적용하니 제가 원하는데로 동작했습니다.^^
감사합니다. Content를 불러와서 css 내부의 특정 값을 변경하려할때 엘리멘트 찾는 데 조금 애 먹었지만 알려주신 방법을 응용하니 그동안 고민한게 허무할정도로 잘 해결되었습니다.
역시 최고십니다^^
^^ 잘해결됬다니 다행입니다 카카오에서 마커 css를 변경하기쉽게 설명해주면 좋을꺼 같네요