Tech. Forum 개발자들을 위한 정보 공유의 장입니다
닫기

Tech.Forum

Tmap v2 maker offset 관련 질문

#1

v2 대응 중입니다.

마커를 생성 후 offset을 지정 하던 부분을 진행중인데요.
기존에는 Tmap.Pixel()을 먼저 생성해서 Tmap.Icon()에 offset을 넣어서 사용했는데

V2 doc를 보면 [http://tmapapi.sktelecom.com/main.html#webv2/docs/WebDocs.Marker]
Tmapv2.Marker에 offset 파라미터 설명이 {Tmapv2.Point} 마커 아이콘 offset 값 이라고 되어있는데
구체적으로 어떤식으로 지정하면 되는건가요?
position에 해당하는 latlng를 point로 변형후 offset을 설정하고 지정하는 형식인가요?

예)
var size = new Tmapv2.Size(30, 30);
var position = new Tmapv2.LatLng(latY,lonX);
var point = new Tmapv2.Point(latY,lonX); //position과 동일한 좌표?
point.offset(-(sizeIcon._width/2), -(sizeIcon._height/2)); // v1과 같은 offset 지정?

var marker = new Tmapv2.Marker({
position: position, //Marker의 중심좌표 설정.
icon: {Icon URL}, //마커의 아이콘
iconSize: size, // 마커의 아이콘 사이즈
offset : point, //???
map: map //Marker가 표시될 Map 설정…
});

0 Likes

#2

안녕하세요.
T map API 운영담당자입니다.

마커의 offset값은 마커의 중심점 좌표를 스크린 좌표계값을 통해 설정하는 옵션입니다.
V1에서의 offset값은 해당 좌표와 마커 아이콘에 크기에 맞춰서 offset을 설정해줘서
좌표위에 마커를 생성하도록 조정한 것 입니다.
V2에서는 그런 작업을 하지 않더라도 마커가 좌표위에 정상적으로
생성되도록 되어있어, offset을 따로 설정하지 않으셔도 됩니다.
하지만, 옵션 설정을 원하신다면 Tmapv2.Point() 객체를 생성하여
스크린좌표값을 사용하시면 됩니다.
아래의 예시를 참고하시면 도움이 되실겁니다.


marker = new Tmapv2.Marker({
position : position,
icon: {Icon URL},
map: map,
offset : new Tmapv2.Point(x,y)
});


감사합니다.

0 Likes

#3

답변 감사합니다.
하지만 마커의 이미지가 첨부 처럼 동그라미 같은 경우에는 해당 좌표 위에 찍히게 되어
이를 이미지 중앙에 위치하게 하고 싶은데 Tmapv2.Point() 객체를 생성하여 스크린좌표값을 사용하면 된다고 하셨는데 이는 지도상의 좌표를 말씀하신건가요?
아니면 해당 좌표에서 픽셀 단위로 조절이 가능하다는 말씀이신가요?
예처럼 해보았으나 원하는 위치에 표현 되지 않습니다.
스크린 좌표라는게 어떤걸 말씀하시는지 잘 이해가 되지 않습니다.
예)
var point = new Tmapv2.Point(latY,lonX); //position과 동일한 좌표?
point.offset(-(이미지가로길이절반), -(이미지 높이 절반)); //픽셀단위?

image

0 Likes

#4

안녕하세요.
T map API 운영담당자입니다.

Marker에서 offset설정시 Tmapv2.Point 가 가르키는 스크린 좌표는 픽셀단위를 뜻합니다.
따라서, 문의주신 예) 에서 두번째 처럼 픽셀단위로 설정해서 사용하시면 됩니다.
아래의 예시를 참고하시면 도움이되실겁니다.


EX)

var latLng = new Tmapv2.LatLng(37.566671, 126.978413); // 서울시청기준좌표

        //var pixelPoint = map.realToScreen(latLng.toEPSG3857()); // 좌표 기준
        var pixelPoint = new Tmapv2.Point(100,100); // 특정 마커 위치변경

        var marker = new Tmapv2.Marker({
            position: latLng, //Marker의 중심좌표 설정.
            offset : pixelPoint,
            map: map //Marker가 표시될 Map 설정..
        });

감사합니다.

0 Likes