Notice
Recent Posts
Recent Comments
Tags more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Archives
Today
Total
관리 메뉴

웹개발자의 기지개

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

javascript

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

http://portfolio.wonpaper.net 2018. 11. 30. 00:08

다음지도를 바탕으로 현재 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>


[ 결과화면 ]


'javascript' 카테고리의 다른 글

현재 GPS 좌표값 얻기 1 - navigator.geolocation  (0) 2018.12.28
체크박스 여러개중에 체크한것만 삭제하기  (0) 2018.12.21
[카카오지도] javascript 주소명으로 위도경도 좌표값 얻기  (0) 2018.11.27
JSON.parse , JSON.stringify  (0) 2018.11.26
javascript 상에서 안드로이드나 혹은 IOS로 분개시키기  (0) 2018.11.26
'javascript' Related Articles more
Comments