구글맵 API2010. 1. 8. 16:36

이번에는 두 지점간 거리를 계산해 보겠습니다.
거리를 구해주는 API가 분명히 있을것 같은데, 도저히 찾지를 못해 직접 계산해버렸습니다.
(거리 구하는 API 를 아시는 분은 알려주시면 감사하겠습니다)

예제보기

    //Global Variables
    var lat1="", lon1="", lat2="", lon2="";
    var map;
    var lmarker, rmarker;

    function calcDistance(lat1, lon1, lat2, lon2){
        var EARTH_R, Rad, radLat1, radLat2, radDist;
        var distance, ret;

        EARTH_R = 6371000.0;
        Rad = Math.PI/180;
        radLat1 = Rad * lat1;
        radLat2 = Rad * lat2;
        radDist = Rad * (lon1 - lon2);
       
        distance = Math.sin(radLat1) * Math.sin(radLat2);
        distance = distance + Math.cos(radLat1) * Math.cos(radLat2) * Math.cos(radDist);
        ret = EARTH_R * Math.acos(distance);

        return  Math.round(Math.round(ret) / 1000);
    }

    function load() {
        if (GBrowserIsCompatible()) {
            var mapOptions = {
                googleBarOptions : {
                style : "new"
                }
            }
            map = new GMap2(document.getElementById("map_canvas"), mapOptions);
            map.addControl(new GMapTypeControl());
            map.setCenter(new GLatLng(37.566079, 126.980495), 5);
            map.setUIToDefault();
            map.enableGoogleBar();

            GEvent.addListener(map, "click", function(overlay,point) {
                if (point) {
                    lat1 = point.lat().toFixed(6);
                    lon1 = point.lng().toFixed(6);

                    lmarker = new GMarker(point);
                    map.addOverlay(lmarker);
                    lmarker.setImage("http://maps.google.com/mapfiles/ms/icons/red-pushpin.png");
                }
            });

            //right click event로 넘어오는 point는 브라우저상의 pixel이므로 위/경도로 변환해야 함.
            GEvent.addListener(map, "singlerightclick", function(point, src, overlay){
                if(lat1.length == 0 || lon1.length == 0){
                    window.alert("Select Origin Point first");
                    return;
                }
                if(point){
                    var geo_pt = map.fromContainerPixelToLatLng(point);
                    lat2 = geo_pt.lat();
                    lon2 = geo_pt.lng();
                   
                    rmarker = new GMarker(geo_pt);
                    map.addOverlay(rmarker);
                    rmarker.setImage("http://maps.google.com/mapfiles/ms/icons/purple-pushpin.png");

                    //Draw Poly Line
                    var base = new GLatLng(lat1, lon1);
                    var polyOptions = {geodesic:true};
                    var polyline = new GPolyline([base, geo_pt], "#ff0000", 5, 1, polyOptions);
                    map.addOverlay(polyline);

                    //Calculate distance
                    var dist = calcDistance(lat1, lon1, lat2, lon2);
                    var myHtml = "<H3>Disatnce is " + dist + " Km</H3>";
                    map.openInfoWindow(geo_pt, myHtml);

                    GEvent.addListener(rmarker, "mouseover", function(){
                        map.openInfoWindow(geo_pt, myHtml);
                    });

                    delete base;
                }
            });

        }
    }

lat1, lon1, lat2, lon2, map, lmarker, rmarker를 프로그램 편의상 전역변수로 뺐습니다.
그리고 거리 계산하는 함수 calcDistance 가 추가되었습니다.
맵상에서 좌측 클릭한 좌표를 lat1, lon1에 저장하고, 우측 클릭한 좌표를 lat2, lon2에 저장한 다음 거리를 계산합니다.
그리고 파란색 마커(rmarker)에 마우스를 올리면(mouseover) 두 지점간 거리를 풍선 도움말로 표시하게 했습니다.


Posted by 못생긴나무