วันอังคารที่ 20 พฤษภาคม พ.ศ. 2557

Google Maps Api V3 สอนสร้าง Polyline หาระยะทาง


     ได้เวลาอัพเดทบทความอีกครั้งครับ หลังจากห่างหายไปเกือบสองเดือน บทความนี้จะสอนเรื่องของ Polyline ของ Google Map API V.3 กันต่อครับ ซึ่งเนื้อหาจะเป็นระดับAdvandceมากขึ้น
เพราะผมจะสอนเรื่องของการหาระยะทางของเส้น Polyline กันครับ บทความก่อนหน้าผมก็ได้สอนสร้างเส้น Polyline มาบ้างแล้ว คือ Google Maps Api V3 กับการสร้าง Polyline แบบง่ายๆ
     สำหรับโค๊ดตัวอย่างในบทความนี้ ผมค่อนข้างตั้งใจอยากนำเสนอมากครับ เพราะใช้เวลาค่อนข้างนาน  (ประมาณเกือบอาทิตย์) ในการพัฒนาตัวอย่างโปรแกรมนี้ขึ้นมา เนื่องจากผมอยากให้มีการเคลียร์หรือลบจุดพิกัดได้ ในกรณี ที่เราได้สร้างMarkerจุดพิกัดไปแล้ว แต่อยากคืนค่ากลับไปยังค่าเดิม หรือคืนค่ากลับไปยังจุดก่อนหน้า ในกรณีที่เราสร้างตัวMarkerผิด


มาดูโค๊ดกันเลยครับ

ส่วนของ HTML ใช้คำสั่งดังนี้ครับ 

<div id="contain_map">
            <div id="map_canvas"></div>
        </div>
        <div id="show_form_data">
            <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
                พิกัดเส้นทาง<br />
                <textarea name="path_arr" id="path_arr" cols="70" rows="5"></textarea>
                <br />
                ระยะทางรวม<br />
                <input name="distance" type="text" id="distance" value="" /> Km  
                <input type="button" name="clearLastMarker" id="clear_last_marker" value="ลบพิกัดสุดท้าย"  onclick="removeLastPoint()"/>
                <input type="button" name="clearMarker" id="clear_marker" value="ลบพิกัดทั้งหมด" onClick="removeAllPoint();" />                
            </form>
        </div>

ส่วนของ CSS 

            html {
                height: 100%
            }
            body {
                height:100%;
                margin:0;
                padding:0;
                font-family:tahoma;
                font-size:12px;
            }
            #map_canvas {
                position:relative;
                width:550px;
                height:400px;
                margin:auto;
            }
            #contain_map {
                position:relative;
                width:550px;
                height:400px;
                margin:auto;
                margin-top:50px;
            }
            #show_form_data {
                margin:auto;
                width:550px;
            }

ส่วนของ Javascript 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
        <script type="text/javascript">
                    var listener;
                    var map;
                    var GGM;
                    var poly;
                    var path = {};
                    var ev = 0;
                    var marker = [];
                    var markers = [];

                    function startDrawing() {//แสดง Polyline และ Marker
                        listener = GGM.event.addListener(map, "click", function(event) {
                            ev = event;
                            if (markers.length == 0) {
                                var polyOptions = {
                                    strokeColor: "#ff0000",
                                    geodesic: true,
                                    strokeOpacity: 1.0,
                                    strokeWeight: 3
                                }
                                poly = new GGM.Polyline(polyOptions);
                                poly.setMap(map);
                            }
                            path = poly.getPath();
                            path.push(ev.latLng);
                            updatePath(event);
                            var i = 0;
                            var image = "http://google.com/mapfiles/ms/micons/red.png";
                            var id = i; // get new id
                            marker = new GGM.Marker({
                                position: event.latLng,
                                id: i,
                                title: "#" + path.getLength(),
                                map: map,
                                icon: image
                            });
                            markers.push(marker);
                            i++;
                        });

                    }

                    function updatePath() {//ฟังก์ชั่นอัพเดทระยะทาง
                        var data_path = "";
                        $.each(path.b, function(j, k) {
                            var key_no = 0;
                            var path_lat = [];
                            var path_lon = [];
                            $.each(path.b[j], function(j_key, k_val) {
                                if (key_no < 2) {
                                    if (key_no == 0) {
                                        path_lat[0] = k_val;
                                    }
                                    if (key_no == 1) {
                                        path_lon[0] = k_val;
                                    }
                                    key_no++;
                                }
                            });
                            data_path += path_lat[0] + "," + path_lon[0] + "\r\n";
                        });
                        $("#path_arr").val(data_path);//แสดงจุดพิกัดต่างๆที่เราได้สร้างไว้เพื่อบอกเส้นทาง
                        $("#distance").val(poly.inKm().toFixed(3));//แสดงระยะทางแบบกิโลเป็นจุดทศนิยม 3 ตำแหน่ง
                    }


                    function removeLastPoint() {//ฟังก์ชั่นลบพิกัดล่าสุด
                        try {
                            var lastMarker = markers.length - 1;
                            markers[lastMarker].setMap(null);
                            markers.splice(lastMarker, 1);
                            poly.getPath().removeAt(lastMarker);
                            updatePath();
                        } catch (e) {
                        }
                    }

                    function removeAllPoint() { //ฟังก์ชั่นลบจุดกัดทั้งหมด
                        try {
                            for (var i = 0; i < markers.length; i++) {
                                markers[i].setMap(null);
                            }
                            poly.setMap(null);
                            markers = [];
                            $("#path_arr").val('');
                            $("#distance").val('');
                        } catch (e) {
                        }
                    }

                    function initialize() { //เริ่มต้นทำงานที่ฟังชั่นนี้ก่อนเป็นลำดับแรก
                        GGM = new Object(google.maps);
                        var my_Latlng = new GGM.LatLng(13.723419, 100.476232);
                        var my_mapTypeId = GGM.MapTypeId.ROADMAP;
                        var my_DivObj = $("#map_canvas")[0];
                        var myOptions = {
                            zoom: 15,
                            center: my_Latlng,
                            mapTypeId: my_mapTypeId
                        };
                        map = new GGM.Map(my_DivObj, myOptions);

                        GGM.LatLng.prototype.kmTo = function(a) {
                            var e = Math, ra = e.PI / 180;
                            var b = this.lat() * ra, c = a.lat() * ra, d = b - c;
                            var g = this.lng() * ra - a.lng() * ra;
                            var f = 2 * e.asin(e.sqrt(e.pow(e.sin(d / 2), 2) + e.cos(b) * e.cos
                                    (c) * e.pow(e.sin(g / 2), 2)));
                            return f * 6378.137;
                        }

                        GGM.Polyline.prototype.inKm = function(n) {
                            var a = this.getPath(n), len = a.getLength(), dist = 0;
                            for (var i = 0; i < len - 1; i++) {
                                dist += a.getAt(i).kmTo(a.getAt(i + 1));
                            }
                            return dist;
                        }
                        startDrawing();
                    }
                    $(function() {
                        $("<script/>", {
                            "type": "text/javascript",
                            src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
                        }).appendTo("body");
                    });
        </script>

ผมนำแนวทางจากเว็บนี้มาประยุกต์ครับ http://www.ninenik.com/การใช้งาน_polyline_และ_polygon_ใน_google_map_api_v3-380.html
ตอนนี้ได้ผลลัพธุ์ที่ค่อนข้างน่าพอใจแล้วครับ สงสัยตรงไหนสามารถสอบถามได้ครับ

3 ความคิดเห็น :

  1. ไม่ระบุชื่อ5 มกราคม 2558 เวลา 07:47

    ขอโค๊ดเต็มๆได้ไหมครับ ผมทำแล้วค่า lat, lon มันไม่ออก

    ตอบลบ
  2. ขอ code เต็มที่แก้ไขแล้ว (ของ Google Maps Api V3 สอนสร้าง Polyline หาระยะทาง) ได้ไหมครับ mail ผม nongc2014@gmail.com เพราะผมทำแล้วค่า lat,long ไม่โชว์ในช่อง input text : name ='path_arr' id='path_arr'

    ขอบคุณมากครับ

    ตอบลบ
  3. ไม่ระบุชื่อ7 พฤษภาคม 2559 เวลา 23:49

    พอจะมีวิธีเขียน code การลากเส้น path เมื่อรู้ระยะความยาวของเส้น แล้วสามารถคำนวณหาตำแหน่ง lat, lon ได้ครับ

    ตอบลบ