본문 바로가기
카테고리 없음

카카오 지도 거리재기

by kangs' tong 2023. 10. 30.

카카오 지도 거리재기란?

카카오 지도 거리재기는 카카오 지도 API를 사용하여 두 지점 간의 거리를 측정하는 기능입니다. 이를 통해 사용자는 지도 상의 임의의 두 위치의 직선거리를 쉽게 확인할 수 있습니다.

거리재기 사용 방법

  1. 카카오 지도 API를 이용하여 지도를 불러옵니다.

     import { Map, DistanceTool } from 'kakao.maps';
  2. 거리재기 도구를 생성합니다.

     const map = new Map(document.getElementById('map'), {
       center: new kakao.maps.LatLng(37.537187, 127.005476),
       level: 3
     });
    
     const distanceTool = new DistanceTool(map);
  3. 거리재기 기능을 활성화합니다.

     distanceTool.start();
  4. 거리재기 기능을 이용하여 두 위치 간의 거리를 측정합니다.

     distanceTool.end();

거리재기 사용 예시

다음은 카카오 지도 API를 사용하여 거리재기 기능을 구현한 예시입니다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        html, body {
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=API_KEY"></script>
<script>
    const { Map, DistanceTool } = kakao.maps;

    const map = new Map(document.getElementById('map'), {
        center: new kakao.maps.LatLng(37.537187, 127.005476),
        level: 3
    });

    const distanceTool = new DistanceTool(map);
    distanceTool.start();
</script>
</body>
</html>

위 예시를 웹 브라우저로 실행하면 지도가 표시되고 거리재기 기능이 활성화됩니다. 사용자는 지도 위에서 임의의 두 위치를 클릭하고, 거리재기 기능을 이용하여 두 위치 간의 거리를 확인할 수 있습니다.

마무리

카카오 지도 거리재기는 간편하고 직관적인 사용법으로 사용자가 두 위치 간의 거리를 쉽게 측정할 수 있도록 도와줍니다. 카카오 지도 API와 거리재기 도구를 활용하여 웹 사이트나 애플리케이션에 지도 기능을 구현하는데 유용하게 사용할 수 있습니다.

댓글