구글맵 API - 선그리기

GPolyline 객체를 이용하여 직선을 그리는 예제를 보겠습니다.

왼쪽 클릭한 지점에 빨간색 마커를 추가하고, 그 상태에서 오른쪽 클릭하면 파란색 마커를 추가하면서 두 마커 사이를 직선으로 연결하는 예제입니다.
(왼쪽 클릭하지 않은 상태에서 오른쪽을 클릭하면 에러가 납니다. 참고하세요.)
예제보기

전체 소스입니다.

    var lat1, lon1;

    function GM_load() {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GMapTypeControl());
        map.setCenter(new GLatLng(36.615527, 127.353515), 12);
        map.setUIToDefault();
        map.enableGoogleBar();

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

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

                GEvent.addListener(lmarker, "mouseover", function(){
                    var myHtml = "<H3>Position is: <br>" +"[" + point.lat().toFixed(6) + ", " + point.lng().toFixed(6) + "]</H3>";
                    map.openInfoWindow(point, myHtml);
                });
            }
        });
        GEvent.addListener(map, "singlerightclick", function(point, src, overlay){
            var geo_pt = map.fromContainerPixelToLatLng(point);
            rmarker = new GMarker(geo_pt);
            map.addOverlay(rmarker);
            rmarker.setImage("http://maps.google.com/mapfiles/ms/icons/purple-pushpin.png");

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

delete base;

        });
    }

우선 전역변수 lat1, lon1이 추가되었습니다.
왼쪽 마우스가 클릭된 지점의 좌표를 저장하기 위해서입니다.
왼쪽 마우스가 클릭되면 다음과 같이 좌표를 전역변수에 저장합니다.
                lat1 = point.lat();
                lon1 = point.lng();

오른쪽 마우스가 클릭되면 파란색 마커를 추가하는 것은 이전 포스트에서 했던 내용입니다.
여기에 GPolyline 객체를 이용하여 직선을 추가해 봤습니다.

var polyline = new GPolyline([base, geo_pt], "#ff0000", 5, 1, polyOptions);

GPolyline의 매개변수를 간단히 설명하면.
첫번째는 직선을 그릴 두 좌표입니다. GLatLng의 객체로 입력해야 합니다.
두번째는 직선의 색상으로 RGB 값으로 넣어주면 됩니다. #ff0000이므로 빨간색입니다.
세번째는 직선의 두께입니다. 숫자가 커질수록 두꺼워집니다.
마지막 polyOptions는 ... 저도 자세한 내용은 읽어보질 않아서 모르겠네요.

base를 new로 생성했으니 delete를 해줘야겠죠.

delete base;

polyline도 new로 생성했으니 delete를 해줘야 하는데 예제에서는 넣지 않았습니다.
적당한 시점에 delete하는 code를 추가해 주시기 바랍니다.

잘 응용하면 쓸모가 많을것 같습니다.