현재 상황
카카오 지도 API를 사용하여, 직접 제작한 이미지로 지도를 만들었습니다.
커스텀 타일셋1을 참고해서 코드를 작성했는데요, 이 코드를 보니 이미지를 x,y,z 에 맞게 새로 불러오더라고요. 그래서 저도 이미지를 520x520 사이즈로 다음과 같이 쪼개서 planh~ 이미지들을 만들었습니다.
문제 상황
문제는 축소/확대를 할 때 이미지가 유지가 안되고 위치가 계속 움직입니다. 다시 말해서, 가운데 있는 마커를 보시면, 축소/확대 할 때, 마커의 위치가 고정되지 않고 모두 달라집니다.
이유는 알고 있습니다. 제가 피그마에서 planh~ 이미지들을 직접 만들었기 때문에, 축소/확대 할 때 정확히 맞지 않는 것입니다.
방법 요청
이미지를 확대/축소 해도 이상하지 않도록 이미지를 다시 편집하고 싶은데, 카카오가 제공하는 방법이 있는지 혹은 카카오가 이미지를 어떻게 편집하라고 가이드를 해주는 문서나 API가 있는지 궁금합니다.
.
.
.
개발보다 편집을 오래했더니… 힘드네요… 근데 안 맞는다니… 
살려주십쇼
해당 건에 관한 PR
https://github.com/INU-CapstoneDesign/INU-Festival-FE/pull/75
카카오 이미지 지도 생성에 대한 내용은 공유드릴 수 없는 점 양해 부탁드립니다.
커스텀 타일셋은 자유롭게 주어진 정보로 타일을 생성하는 객체로 이 또한 별도로 이미지 생성에 대한 정보는 제공하고 있지 않습니다.
지도에 타일 넘버를 표시하는 커스텀 타일셋을 하나 더 추가해서 어떤 타일이 맞지 않는지 확인해 보는 방법도 있을 것 같아요.
참고 부탁드립니다.
kakao.maps.Tileset.add('TILE_NUMBER',
new kakao.maps.Tileset({
width: 256, //하나의 타일이 이 520x520이라면 width, height를 크기에 맞게 수정해주세요.
height: 256,
getTile: function(x, y, z) {
var div = document.createElement('div');
div.innerHTML = x + ', ' + y + ', ' + z;
div.style.fontSize = '36px';
div.style.fontWeight = 'bold';
div.style.lineHeight = '256px'
div.style.textAlign = 'center';
div.style.color = '#4D4D4D';
div.style.border = '1px dashed #ff5050';
return div;
}
}));
map.addOverlayMapTypeId(kakao.maps.MapTypeId.TILE_NUMBER);
https://apis.map.kakao.com/web/sample/getTile/
1개의 좋아요
