[javascript] 지도에서 측정된 거리 표시하기

22 Nov 2023

javascript

지도에서 측정된 거리를 표시하는 방법에 대해 알아보겠습니다. 이를 위해 JavaScript와 몇 가지 지도 API를 사용할 것입니다.

Google Maps API 사용

Google Maps API를 사용하여 지도 위에 경로를 그린 다음, 경로의 총 거리를 계산하여 표시할 수 있습니다.

다음은 위치 A와 위치 B 사이의 거리를 표시하는 간단한 예제입니다:

<!DOCTYPE html>
<html>
<head>
  <title>지도에서 측정된 거리 표시하기</title>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=geometry"></script>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 37.5665, lng: 126.9780},
        zoom: 13
      });

      var markerA = new google.maps.Marker({
        position: {lat: 37.5665, lng: 126.9780},
        map: map,
        label: 'A'
      });

      var markerB = new google.maps.Marker({
        position: {lat: 37.5641, lng: 126.9986},
        map: map,
        label: 'B'
      });

      var path = new google.maps.Polyline({
        path: [markerA.getPosition(), markerB.getPosition()],
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
      });

      path.setMap(map);

      var distance = google.maps.geometry.spherical.computeDistanceBetween(markerA.getPosition(), markerB.getPosition());

      var infoWindow = new google.maps.InfoWindow({
        content: '측정된 거리: ' + distance.toFixed(2) + 'm'
      });

      infoWindow.open(map, markerB);
    }

    initMap();
  </script>
</body>
</html>

위 예제에서 YOUR_API_KEY 부분에는 Google Maps API 키를 입력해야 합니다. 자세한 내용은 Google Maps API 문서를 참조하십시오.

이 코드는 두 개의 마커(A와 B)를 생성하고, 이 마커를 경로로 연결하여 지도에 표시합니다. 그리고 computeDistanceBetween 함수를 사용하여 두 위치 사이의 거리를 계산하고, InfoWindow를 사용하여 결과를 표시합니다.

다른 지도 API 사용

Google Maps API 이외에도 다른 지도 API를 사용하여 지도에서 측정된 거리를 표시할 수 있습니다. 예를 들어, Leaflet.js와 OpenStreetMap을 사용할 수 있습니다.

자세한 내용은 Leaflet.js와 OpenStreetMap의 공식 문서를 참조하십시오.

혹시 하려는 작업에 따라 다른 API가 필요하다면 추가적인 조회 작업이 필요합니다.

이제 지도에서 측정된 거리를 표시하는 방법에 대해 알게 되었습니다. 적절한 API를 선택하여 원하는 기능을 구현해보세요!