[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.https://devtalk.kakao.com/t/faq-api/125610
안녕하세요,
강남시티힐점의 실제 좌표는 {127.02796373337118,37.50098957314337} 입니다.
또한 하나의 오버레이만 지도에 추가하여 줌인/줌아웃 했을 시에도 오버레이가 다른 위치에 생성되는 경우가 있는 것을 확인할 수 있었습니다.
아래 링크의 영상을 자세히 보시면 좌표계 전체가 밀려서 찍힌다는 생각이 듭니다.
현재 플러터 기반의 우리동네GS앱에서 지도 웹을 띄워 사용하고 있습니다.
https://photos.app.gool.gl/NCaiJ4GUY5Vhmtu16
C.L
6월 22, 2023, 3:53오전
2
@y0ungsamii
안녕하세요,
올려주신 영상 링크가 저희 쪽에서는 접근이 되지 않아 확인이 불가능한데요,
말씀하신 내용으로 보면,
아래 예시와 가이드를 참고해주시고,https://apis.map.kakao.com/web/sample/basicMarkerImage/ https://apis.map.kakao.com/web/documentation/#MarkerImage
이 방법으로 해결되지 않으면 영상을 다른 곳에 올려 다시 전달해주실 수 있을까요 (이곳에 바로 첨부해주셔도 됩니다.)
https://youtube.com/shorts/_nEtoMefM7w?feature=share
영상의 화면에서 zoon레벨 변경 시 따로 이벤트 처리는 하지 않고,
커스텀 오버레이 사용 시 줌인 줌아웃 할 때 깜빡거림 현상 - lea.ju님의 글 #2 를 참고했을 때 커스텀오버레이가 깜빡이는 현상이 동일하게 발생하는데 이때 좌표계가 옮겨지는 가능성이 있는 걸까요?
첨부드린 영상에선 강남시티힐점이 놀숲 - 어글리스토브 - 뉴엠아파트까지 찍히는 현상이 나타나는 것이 확인됩니다.
커스텀 오버레이가 깜빡이는 것은 레벨이 변경되면 타일을 새로 불러와서 그리기 때문에
영상 초반에는 레벨을 변경할 때 커스텀 오버레이 위치가 변경되지 않다가
첨부된 코드가 없어서 정확힌 이유를 알 순 없지만xAnchor, yAnchor 옵션을 변경하고 있다면
아래 addStoreMarker 를 통해 커스텀 오버레이를 생성합니다. 지도 화면 상 커스텀 오버레이의 위치가 바뀔 때에도 아래 함수에 전달된 파라미터 값은 일정한것으로 확인했습니다. 아래 코드와 같이 offset설정은 항상 yAnchor:1로 고정되어있습니다. 이부분이 문제가 될까요?
지도를 옮길 시(dragend) 아래 코드 중 clearStoreMarker 호출 하여 맵뷰 내 커스텀 오버레이를 삭제 하고 addStoreMarker를 호출하여 커스텀 오버레이를 추가합니다.
function clearStoreMarker() {
for (const [key, value] of storeBalloonMap) {
value.customOverlay.setMap(null);
}
storeBalloonMap.clear();
}
function addStoreMarker(storeCode, serviceCode, balloonText, latitude, longitude, enable) {
if(!(serviceCode === '01' || serviceCode === '02')) {
return;
}
const position = new kakao.maps.LatLng(latitude, longitude);
let balloonStyle;
let storeNameColor;
let badgeBg;
let badgeImage;
if(enable === false) {
balloonStyle = "balloon_disable";
storeNameColor = "store_name_disable";
badgeBg = "badge_bg_disable";
} else {
storeNameColor = "store_name_enable";
switch(serviceCode) {
case '02':
balloonStyle = "balloon_fresh";
badgeBg = "badge_bg_fresh";
break;
default:
balloonStyle = "balloon_gs25";
badgeBg = "badge_bg_gs25";
break;
}
}
switch(serviceCode) {
case '02':
badgeImage = "badge_fresh";
break;
default:
badgeImage = "badge_gs25";
break;
}
const balloonId = `${serviceCode}_${storeCode}`;
const content =
'<div id="balloon_' + balloonId + '" class="balloon_common ' + balloonStyle + '" onClick="onMarkerClick(`'+ serviceCode + '`, `' + storeCode + '`, false, true, false)">' +
' <div class="badge_common ' + badgeBg + '"><div class="'+ badgeImage + '"></div></div>' +
' <div class="store_name ' + storeNameColor + '">' + balloonText + '</div>' +
'</div>';
const customOverlay = new kakao.maps.CustomOverlay({
map: map,
position: position,
content: content,
yAnchor: 1
});
const storeBalloonPosition = new kakao.maps.LatLng(latitude, longitude);
storeBalloonMap.set(balloonId, {customOverlay: customOverlay, position: storeBalloonPosition, enable: enable});
}
처음 지도를 로드할 때와 중간부터 커스텀 오버레이 위치가 바뀌는 부분 모두 데이터와 로직이 동일하다는 말씀이시죠?position이 absolute 거나 padding, margin 속성이 적용되어 있다면
메시지로 코드 전달드렸습니다 확인부탁드립니다!
1개의 좋아요
