Class Mylocation

draw() 메소드로 좌표에 표시된 내 위치 마커를 삭제할 수 있습니다.

Example

map.mylocation.clear();
Copy

현재 GPS 또는 indoor location service에 따른 수신 위치를 맵좌표로 변환하여 반환합니다. map.mylocation.start() 를 호출하지 않았거나, 수신된 GPS 좌표데이터가 없으면 undefined 를 반환하고 에러메시지를 출력합니다.

Example

const locationOption = {
  x: 2500,
  y: 1000,
  iconOption: {
    iconUrl: "https://assets.dabeeomaps.com/image/ico/img_person-3x.png",
    width: 200,
    height: 200,
  },
  onActive: true,
  animate: {
    color: "#00ff00",
    opacity: 0.4,
    desireScale: 4,
  },
};
map.mylocation.set(locationOption);
map.mylocation.start(); // map.mylocation.start() 를 먼저 호출해줘야 합니다.
setTimeout(() => {
  const currentPosition = map.mylocation.getCurrentPosition(); // 현재 GPS 수신 좌표를 반환함. 수신된 좌표가 없으면 undefined 를 반환합니다.
  console.log('map.mylocation.getCurrentPosition()에 대한 결과값: ', currentPosition);
}, 5000);
Copy

내 위치 마커 이미지가 gif 일 때, gif 애니메이션을 비활성화합니다.

Example

const locationOption = {
  x: 2500,
  y: 1000,
  iconOption: {
    iconUrl: "https://assets.dabeeomaps.com/image/ico/landy.gif",
    width: 196,
    height: 305,
  },
  onActive: true,
};
await map.mylocation.set(locationOption);
map.mylocation.gifOff();
Copy

내 위치 마커 이미지가 gif 일 때, gif 애니메이션을 활성화합니다. map.mylocation.set(locationOption) 메서드로 gif 마커를 생성 시, gif 애니메이션이 자동으로 활성화되므로, 별도로 활성화하지 않아도 됩니다. 그러나, map.mylocation.gifOff() 로 gif 애니메이션을 비활성화했을 경우, map.mylocation.gifOn() 으로 애니메이션을 다시 활성화할 수 있습니다. 단, gif 마커가 존재하지 않을 때 실행하면 불필요한 렌더링이 발생할 수 있습니다.

Example

const locationOption = {
  x: 2500,
  y: 1000,
  iconOption: {
    iconUrl: "https://assets.dabeeomaps.com/image/ico/landy.gif",
    width: 196,
    height: 305,
  },
  onActive: true,
};
await map.mylocation.set(locationOption);
map.mylocation.gifOff();
map.mylocation.gifOn();
Copy

내 위치 마커를 감춥니다.

Example

// mylocation-map-out
mapContainer?.addEventListener('mylocation-map-out', (e: CustomEventInit) => {
  console.log('mylocation-map-out에 대한 결과값: ', e.detail);
  map.mylocation.hide(); // 지도영역에서 벗어나면 내 위치 마커를 감춤.
});
Copy

Indoor Tracking을 위한 속성(focus)을 정의합니다. true이면 내위치마커가 항상 지도의 중심에 위치하도록 지도가 움직입니다 false이면 내위치마커가 움직이고 지도는 고정됩니다.

Indoor Tracking을 위한 속성(Heading)을 지정합니다 true이면 진행방향이 항상 위로 오도록 지도가 회전됩니다. false이면 진행방향이 바뀌어도 지도는 고정됩니다

Indoor Tracking을 위한 속성(신장)을 지정합니다

Indoor Tracking 을 시작합니다. option으로 아래와 같이 설정해줍니다. 현재 위치의 좌표와 각도(지도 기준 각도 북:0, 서: 90, 남: 180, 동: 270 position: IPosition; orient: number;

Indoor Tracking 을 종료합니다.

마커의 x좌표, y좌표 위치로 이동한다.

Example

map.mylocation.movePosition({x: 100, y: 100});
Copy

내 위치 마커를 원하는 좌표에 표시합니다.

Example

const locationOption = {
  x: 2500,
  y: 1000,
  iconOption: {
    iconUrl: "https://assets.dabeeomaps.com/image/ico/img_person-3x.png",
    width: 200,
    height: 200,
  },
  onActive: true,
  animate: {
    color: "#00ff00",
    opacity: 0.4,
    desireScale: 4,
  },
  gpsOption: {
    leftCourseDistance: 50, // 경로이탈 여부 (ON_PATH 와 OUT_OF_PATH) 를 판단하는 기준 거리. 기본값은 25m. 단위는 m(미터)
    willArriveRadius: 100, // 도착 예정 범위 반경. 기본값은 50m. 단위는 m(미터) -> 도착 예정 범위 반경은 도착 범위 반경보다 더 커야합니다. 작거나 같을 경우, 에러를 출력하면서 전달된 값이 무시되고, 기본값을 적용합니다.
    arrivedRadius: 50, // 도착 범위 반경. 기본값은 25m. 단위는 m(미터) -> 내 위치 마커가 해당 범위내로 들어올 경우, tracking-complete 이벤트가 발생합니다.
  },
};
map.mylocation.set(locationOption);
Copy

마커의 x좌표, y좌표를 설정한다.

Example

map.mylocation.setPosition({x: 100, y: 100});
Copy

마커의 rotation을 변경한다. 단위 : 각도

Example

map.mylocation.setRotation(270);
Copy

내 위치 마커를 보여줍니다.

Example

// mylocation-map-in
mapContainer?.addEventListener('mylocation-map-in', (e: CustomEventInit) => {
  console.log('mylocation-map-in에 대한 결과값: ', e.detail);
  map.mylocation.show(); // 지도영역으로 돌아오면 내 위치 마커를 보여줌.
});
Copy

내 위치 마커의 GPS Tracking 을 시작합니다.

Example

const locationOption = {
  x: 2500,
  y: 1000,
  iconOption: {
    iconUrl: "https://assets.dabeeomaps.com/image/ico/img_person-3x.png",
    width: 200,
    height: 200,
  },
  onActive: true,
  animate: {
    color: "#00ff00",
    opacity: 0.4,
    desireScale: 4,
  },
};
map.mylocation.set(locationOption);
map.mylocation.start();
Copy

내 위치 마커의 GPS Tracking 을 종료합니다.

Example

mapContainer?.addEventListener('tracking-complete', (e: CustomEventInit) => {
  console.log('tracking-complete에 대한 결과값: ', e.detail);
  map.mylocation.stop(); // GPS Tracking 중단
  map.mylocation.clear(); // myLocation 제거
});
Copy

tracking-move 및 tracking-complete 이벤트 발생을 비활성화합니다. tracking-move 및 tracking-complete 이벤트핸들러를 등록했더라도, map.mylocation.trackingOff() 를 호출하면 더 이상 해당 이벤트가 발생하지 않습니다.

Example

const naviResponse = await mapData.getRoute(routeOptions.gongdeok); // 경로데이터 가져오기
map.routeSimulation.set(naviResponse?.recommendation); // 경로 그리기

const locationOption = {
  x: 2500,
  y: 1000,
  iconOption: {
    iconUrl: "https://assets.dabeeomaps.com/image/ico/img_person-3x.png",
    width: 200,
    height: 200,
  },
  onActive: true,
  animate: {
    color: "#00ff00",
    opacity: 0.4,
    desireScale: 4,
  },
};
map.mylocation.set(locationOption); // myLocation 생성
map.mylocation.start(); // geolocation 시작
map.mylocation.trackingOn(naviResponse?.recommendation); // tracking-move, tracking-complete 이벤트 활성화

setTimeout(() => {
  map.mylocation.trackingOff(); // tracking-move, tracking-complete 이벤트 비활성화
}, 5000)

// tracking-move 이벤트핸들러 등록
mapContainer?.addEventListener('tracking-move', (e: CustomEventInit) => {
  console.log('tracking-move에 대한 결과값: ', e.detail);
});
Copy

GPS Tracking 또는 indoor tracking 이 진행중일 때, tracking-move 및 tracking-complete 이벤트 발생을 활성화합니다. map.routeSimulation.set() 에서 넘겨준 것과 동일한 NavigationResponse 데이터를 넘겨주면, 그려진 경로를 기준으로 TrackingInfo 데이터를 반환합니다. 또한, tracking-move, tracking-complete 이벤트핸들러도 별도로 등록해주어야 합니다.

Example

const naviResponse = await mapData.getRoute(routeOptions.gongdeok); // 경로데이터 가져오기
map.routeSimulation.set(naviResponse?.recommendation); // 경로 그리기 (NavigationResponse 데이터 전달)

const locationOption = {
  x: 2500,
  y: 1000,
  iconOption: {
    iconUrl: "https://assets.dabeeomaps.com/image/ico/img_person-3x.png",
    width: 200,
    height: 200,
  },
  onActive: true,
  animate: {
    color: "#00ff00",
    opacity: 0.4,
    desireScale: 4,
  },
};
map.mylocation.set(locationOption); // myLocation 생성
map.mylocation.start(); // geolocation 시작
map.mylocation.trackingOn(naviResponse?.recommendation); // tracking-move, tracking-complete 이벤트 활성화

// tracking-move 이벤트핸들러 등록
mapContainer?.addEventListener('tracking-move', (e: CustomEventInit) => {
  console.log('tracking-move에 대한 결과값: ', e.detail);
});
Copy