개발자의 끄적끄적

[javascript] 현재위치에서 반경2km 내 업체들 거리, 도보/자전거 이동거리 구하기[펌] 본문

개발/javascript & jquery

[javascript] 현재위치에서 반경2km 내 업체들 거리, 도보/자전거 이동거리 구하기[펌]

효벨 2020. 9. 5. 03:00
728x90
반응형

[javascript] 현재위치에서 반경2km 내 업체들 거리, 도보/자전거 이동거리 구하기[펌]

 

 

다음지도를 바탕으로 현재 GPS 위치상에서 반경 2km이내에 업체들 마커를 화면에 찍고, 

현재 위치에서 각각의 거리를 구하고, 도보 및 자전거로 이동거리를 구하는 소스를 작업해 봤다.

 

이 소스는 실무에서 참 유용하게 쓰일것으로 생각된당 ^^

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>다음지도 - 현재 GPS상에서 반경2km 이내의 업체들 거리, 도보/자전거 이동시간 구하기</title>
</head>
<body>
<p style="text-align:center;">다음지도 - 현재 GPS 상에서 반경 2km 이내의 업체들 거리, 도보/자전거 이동시간 구하기</p>

<div id="map" style="width:100%;height:500px;"></div>
<div id="coordXY"></div>
<div id="distance"></div>

<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=다음지도key값"></script>
<script>
var mapContainer = document.getElementById("map");
var coordXY   = document.getElementById("coordXY");
var distanceGap  = document.getElementById("distance");

 

 

var x = 35.85659647224101;    // 현재 GPS x좌표
var y = 128.53115388420585;  // 현재 GPS y좌표
var radius = 2000;                 // 반경 미터(m), 2km

 

var latlngyo = new daum.maps.LatLng(x, y);
var mapOption = {
  center: latlngyo, // 지도의 중심좌표
        level: 5      // 지도의 확대 레벨

 };

 

var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다

var circle = new daum.maps.Circle({
    map: map,
    center : latlngyo,
    radius: radius,
    strokeWeight: 2,
    strokeColor: '#FF00FF',
    strokeOpacity: 0.8,
    strokeStyle: 'dashed',
    fillColor: '#D3D5BF',
    fillOpacity: 0.5
});

 

var marker = new daum.maps.Marker({
 position: latlngyo, // 마커의 좌표
 title: "마커1",
 map: map          // 마커를 표시할 지도 객체
});


var arr = new Array();
arr[0] = ["테스트1",37.6397252,126.671359, "대구 달서구 장기동 790"];
arr[1] = ["테스트2",35.8502186751,128.516473546, "대구 달서구 장기동 162-1"];

 


arr[2] = ["테스트3",35.8507674215,128.520114592, "대구 달서구 용산동 410-9"];
arr[3] = ["테스트4",35.8491570477,128.528283511, "대구 달서구 용산동 215-9"];
arr[4] = ["테스트5",35.854902859257784,128.5296955671568, "대구 달서구 용산동 955"];

 

var markerTmp;      // 마커
var polyLineTmp;    // 두지점간 직선거리
var distanceArr = new Array();
var distanceStr = "";
var walkkTime = 0;
var walkHour = "", walkMin = "";

 

for (var i=0;i<arr.length;i++) {


    markerTmp = new daum.maps.Marker({
        position: new daum.maps.LatLng(arr[i][1],arr[i][2]),
        title: arr[i][0],
        map:map
    });

 

    polyLineTmp = new daum.maps.Polyline({
        map: map,
        path: [
            latlngyo, new daum.maps.LatLng(arr[i][1],arr[i][2])
        ],
        strokeWeight: 2,   
        strokeColor: '#FF00FF',
   strokeOpacity: 0.8,
   strokeStyle: 'dashed'
    });

 


    distance[i] = polyLineTmp.getLength();  // 도보의 시속은 평균 4km/h 이고 도보의 분속은 67m/min입니다    


    walkkTime = distance[i] / 67;  // 계산한 도보 시간이 60분 보다 크면 시간으로 표시합니다   
    if (walkkTime > 60) {
        walkHour = Math.floor(walkkTime / 60) + " 시간 ";
    }   
    walkMin = parseInt(walkkTime % 60) + " 분";

 

    // 자전거의 평균 시속은 16km/h 이고 이것을 기준으로 자전거의 분속은 267m/min입니다
    var bycicleTime = distance[i] / 227 | 0;
    var bycicleHour = '', bycicleMin = '';

 

    // 계산한 자전거 시간이 60분 보다 크면 시간으로 표출합니다
    if (bycicleTime > 60) {
        bycicleHour =  Math.floor(bycicleTime / 60) + ' 시간 ';
    }
    bycicleMin =  parseInt(bycicleTime % 60) + ' 분';

 

    distanceStr += arr[i][0] + " : "  +  parseFloat(distance[i] / 1000) + " km 거리 ,  도보 : "+ walkHour + walkMin +", 자전거 : " + bycicleHour + bycicleMin + "<br>";

 

    walkkTime = 0;
    walkHour = "";
    walkMin = "";
}

coordXY.innerHTML = "<br>현재 GPS X좌표 : " + x + " , Y좌표 : " + y + " ( 2km 반경 )<br><br>";
distanceGap.innerHTML = distanceStr;
</script>
</body>
</html>

 

 

[ 결과화면 ]

 

 

 

출처 : wonpaper.tistory.com/56

반응형
저작자표시 비영리 변경금지

'개발 > javascript & jquery' 카테고리의 다른 글

[vue.js] local server IP로 접근하기 [펌]  (0) 2020.09.16
[javascript] 두 좌표간 거리계산 함수  (0) 2020.09.11
[javascript] colorpicker 참고 사이트!  (0) 2020.08.30
[javascript] 추억의 javascript로 달력 만들기 [펌]  (0) 2020.08.27
[javascript/jquery] 자바스크립트 기능 제작, 달력 (Javascript Calendar) [펌]  (0) 2020.08.27
'개발/javascript & jquery' Related Articles more
Comments