PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ดึงพิกัดและข้อมูลจาก database ใน google map

ดึงพิกัดและข้อมูลจาก database ใน google map

ตอนนี้ทำโปรเจ็คงานกลุ่มส่งอาจารย์ แล้วเลือกที่จะทำ การวัดความแรงสัญญาณ ADSL โดยใช้ google map
ทำแบบมั่วไปมั่วมาตามประสาคน coding ไม่ค่อยเป็นนะคับ ก็ได้โค้ดจาก http://www.ninenik.com/สร้างเส้นทาง_เพื่อ_หาระยะทาง_ใน_google_map_ด้วย_jQuery-276.html ไปลองแก้ไขดู (ให้เครดิตไว้ในเล่มรายงานแล้วนะคับ) โดยกำหนดจุดเพิ่ม และคำนวณระยะทางออกมาเป็นความแรงของสัญญาณ ADSL

สิ่งที่อยากรบกวนคือ

อยากดึงข้อมูลพิกัดและข้อมูลจุดส่งสัญญาณ จาก text file มาโชว์ผ่าน google map เพราะตอนนี้ลองกำหนดจุดลงที่โค้ดเลย ซึ่งจิงๆ แล้วมีตั้ง 44 จุด

ช่วยโค้ดเป็นตัวอย่างให้ด้วยคับ บอกตรงๆ ไม่ค่อยจะเป็นเลยเรื่อง coding


 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">
            html{
                padding:0px;
                margin:0px;
            }
            div#map_canvas{
                margin:auto;
                width:600px;
                height:550px;
                overflow:hidden;
            }
            div#route{
                width: 250px;
                height:380px;
                border:1px solid black;
                position:relative;
                float:left;
                font-size:12px;
                background-color:#F4F4F4;
                overflow:auto;
                display:none;
            }
        </style>

    </head>

    <body>

        <div id="map_canvas">
        </div>

        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAiOY-qJhvEGWCj2x02oGhIxSv-Bmf33CSQVJOyrsioyUisQmXPBR71ZNe7krWOuOacdYjjIo-SdmqlQ" type="text/javascript"></script>
        <script type="text/javascript">
            var directions; // ҧѺ˹鹷ҧ
            function initialize() {
                if (GBrowserIsCompatible()) {

                    var map = new GMap2(document.getElementById("map_canvas"));

                    var center = new Array();

                    center[0] = new GLatLng(6.614771,100.066507); // á˹ش
                    center[1] = new GLatLng(6.618911,100.071759); // á˹ش
                    center[2] = new GLatLng(6.623067,100.072918); // á˹ش
                    center[3] = new GLatLng(6.608648,100.064142); // á˹ش
                    center[4] = new GLatLng(6.638222,100.072339); // á˹ش
                    center[5] = new GLatLng(6.651202,100.075729); // á˹ش
                    center[6] = new GLatLng(6.642207,100.073476); // á˹ش
                    center[7] = new GLatLng(6.645703,100.074463); // á˹ش
                    center[8] = new GLatLng(6.653908,100.076995); // á˹ش
                    center[9] = new GLatLng(6.670532,100.08472); // á˹ش

                    map.setCenter(center[0], 13); // Ţ 13 ͤ zoom öѺͧ
                    map.setUIToDefault();

                    directions = new GDirections(map);
                    var directOpt= { "preserveViewport": false, "getSteps": true ,"getPolyline":true}; // ˹ٻẺͧ鹷ҧ

                    var marker = Array();
                    var markerGoTo = Array();

                    function Line(m1, m2) {
                        this.m1 = m1;
                        this.m2 = m2;
                    }

                    Line.prototype.increment = function() {
                        directions.load("from: "+this.m1.getPoint()+" to: "+this.m2.getPoint(),directOpt);
                    }

                    var i=0;
                    for(i=0;i<10;i++){
                        marker[i] = new GMarker(center[i], {draggable: false}); // ҧ mark
                        map.addOverlay(marker[i]);

                        markerGoTo[i] = new GMarker(center[i], {draggable: true}); // ҧ mark աѹ
                        map.addOverlay(markerGoTo[i]);

                        GEvent.bind(markerGoTo[i], "dragend",line = new Line(markerGoTo[i], marker[i]), line.increment );
                    }    
                
                    GEvent.addListener(directions, "load", function() {
                        var drivingDistanceKilometers = directions.getDistance().meters / 1000; // зҧ
                        $("#distanceDrive").val(drivingDistanceKilometers); // Ӥҷ textbox

                        var drivingDistanceMb = directions.getDistance().meters / 100; // Ҥ MB ѹ Ѻ
                        $("#distanceMb").val(drivingDistanceMb); // Ӥҷ textbox
                        if(document.form_get_detailMap.distanceDrive.value <= 3.7 ){
                            document.form_get_detailMap.distanceMb.value = 6.1;
                        }else{
                            document.form_get_detailMap.distanceMb.value = 2;
                        }
                    });

                }
            }
            
        </script>
        <script type="text/javascript" src="jquery-1.4.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                initialize();
                $(document.body).unload(function(){
                    GUnload();
                });
                $("#Reset").click(function(){
                    directions.clear(); // ź鹷ҧҡἹ
                });
            });
        </script>
        <div id="showDD" style="margin:auto;padding-top:5px;width:600px;">
            <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
                Distance
                <input name="distanceDrive" type="text" id="distanceDrive" value="0" />
                Km.
                speed
                <input name="distanceMb" type="text" id="distanceMb" value="0" />
                MB
                 <input type="button" name="Reset" id="Reset" value="Cancel to start again" />
            </form>
        </div>
    </body>
</html> 

 



โดย:  Chinjung44 IP: 183.88.114.xxx วันที่: 08-09-2010 เวลา: 00:29:49

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 3

แนะนำไม่ถูกเหมือนกัน คงต้องให้ ไปลองศึกษาได้จากของ google โดยตรง http://code.google.com/apis/maps/documentation/javascript/v2/examples/index.html

ตอนนี้ google map ก็พัฒนาไปเยอะ มีอะไรใหม่ๆ น่าลอง อาจจะได้นำเอามาเขียนเป็นบทความในเว็บ เพื่อดึงความสามารถ มาประยุกต์ใช้
ต่อไป



โดย:  Ninenik IP: 183.89.168.xxx วันที่: 08-09-2010
 ความคิดเห็นที่ 2

ขอบคุณมากคับสำหรับคำตอบที่ทำให้เห็นทางสว่างอยู่รำไร

ลองทำแล้วคับ map ไม่ขึ้นเลย  

แล้วถ้ารบกวนถามเพิ่มอีกนิดว่า ถ้าต้องการให้แต่ละจุดแสดงข้อมูล(เช่น ชื่อโหนด สถานที่ตั้ง และรายละเอียดต่างๆ ของโหนด) ต้องทำอย่างไร?

รบกวนอีกครั้งนะคับ



โดย:  Chinjung44 IP: 183.88.114.xxx วันที่: 08-09-2010 เวลา: 08:53:58
 ความคิดเห็นที่ 1

เป็นการนำไปประยุกต์ใช้งาน ได้ดีมากเลย 
ส่วนถ้าให้แนะนำ โค้ดดึงข้อมูลจาก text ไฟล์แสดง แทนการกำหนดเอง คงต้องใช้ php อ่านไฟล์ วนลูปสร้างตัวแปร javascript

ลองทำตามดู สร้างไฟล์ text แล้วกำหนด ค่า lat - lon (ค่าพิกัน) บรรทัดละ 1 ค่า แบ่งด้วย คอมม่า (,) เช่น
lat_lon_data.txt
 

6.614771,100.066507
6.618911,100.071759
6.623067,100.072918
6.608648,100.064142
6.638222,100.072339
6.651202,100.075729
6.642207,100.073476
6.645703,100.074463
6.653908,100.076995 
6.670532,100.08472

ส่วนโค้ดการนำไปใช้ ก็ใช้งาน javascirpt ร่วมกับ php โค้ดตัวอย่างไฟล์ php สำหรับเอาไปทดสอบรัน
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style type="text/css">
            html{
                padding:0px;
                margin:0px;
            }
            div#map_canvas{
                margin:auto;
                width:600px;
                height:550px;
                overflow:hidden;
            }
            div#route{
                width: 250px;
                height:380px;
                border:1px solid black;
                position:relative;
                float:left;
                font-size:12px;
                background-color:#F4F4F4;
                overflow:auto;
                display:none;
            }
        </style>

    </head>

    <body>

        <div id="map_canvas">
        </div>

        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAiOY-qJhvEGWCj2x02oGhIxSv-Bmf33CSQVJOyrsioyUisQmXPBR71ZNe7krWOuOacdYjjIo-SdmqlQ" type="text/javascript"></script>
        <script type="text/javascript">
            var directions; // ҧѺ˹鹷ҧ
            function initialize() {
                if (GBrowserIsCompatible()) {

                    var map = new GMap2(document.getElementById("map_canvas"));

                    var center = new Array();

					<?php
						$f = fopen ("lat_lon_data.txt", "r");
						$ln= 0;
						while ($line= fgets ($f)) {
								if($line===FALSE){
									// print ("FALSEn");
								}else{
									$lat_lon=trim($line);
									echo "center[$ln] = new GLatLng($lat_lon);rn";
									$ln++;
								}
						}
						fclose ($f);
						
					?>	
/*                    center[0] = new GLatLng(6.614771,100.066507); // á˹ش
                    center[1] = new GLatLng(6.618911,100.071759); // á˹ش
                    center[2] = new GLatLng(6.623067,100.072918); // á˹ش
                    center[3] = new GLatLng(6.608648,100.064142); // á˹ش
                    center[4] = new GLatLng(6.638222,100.072339); // á˹ش
                    center[5] = new GLatLng(6.651202,100.075729); // á˹ش
                    center[6] = new GLatLng(6.642207,100.073476); // á˹ش
                    center[7] = new GLatLng(6.645703,100.074463); // á˹ش
                    center[8] = new GLatLng(6.653908,100.076995); // á˹ش
                    center[9] = new GLatLng(6.670532,100.08472); // á˹ش*/

                    map.setCenter(center[0], 13); // Ţ 13 ͤ zoom öѺͧ
                    map.setUIToDefault();

                    directions = new GDirections(map);
                    var directOpt= { "preserveViewport": false, "getSteps": true ,"getPolyline":true}; // ˹ٻẺͧ鹷ҧ

                    var marker = Array();
                    var markerGoTo = Array();

                    function Line(m1, m2) {
                        this.m1 = m1;
                        this.m2 = m2;
                    }

                    Line.prototype.increment = function() {
                        directions.load("from: "+this.m1.getPoint()+" to: "+this.m2.getPoint(),directOpt);
                    }

                    var i=0;
                    for(i=0;i<<?=$ln?>;i++){
                        marker[i] = new GMarker(center[i], {draggable: false}); // ҧ mark
                        map.addOverlay(marker[i]);

                        markerGoTo[i] = new GMarker(center[i], {draggable: true}); // ҧ mark աѹ
                        map.addOverlay(markerGoTo[i]);

                        GEvent.bind(markerGoTo[i], "dragend",line = new Line(markerGoTo[i], marker[i]), line.increment );
                    }    
                
                    GEvent.addListener(directions, "load", function() {
                        var drivingDistanceKilometers = directions.getDistance().meters / 1000; // зҧ
                        $("#distanceDrive").val(drivingDistanceKilometers); // Ӥҷ textbox

                        var drivingDistanceMb = directions.getDistance().meters / 100; // Ҥ MB ѹ Ѻ
                        $("#distanceMb").val(drivingDistanceMb); // Ӥҷ textbox
                        if(document.form_get_detailMap.distanceDrive.value <= 3.7 ){
                            document.form_get_detailMap.distanceMb.value = 6.1;
                        }else{
                            document.form_get_detailMap.distanceMb.value = 2;
                        }
                    });

                }
            }
            
        </script>
        <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
        <script type="text/javascript">
            $(function(){
                initialize();
                $(document.body).unload(function(){
                    GUnload();
                });
                $("#Reset").click(function(){
                    directions.clear(); // ź鹷ҧҡἹ
                });
            });
        </script>
        <div id="showDD" style="margin:auto;padding-top:5px;width:600px;">
            <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
                Distance
                <input name="distanceDrive" type="text" id="distanceDrive" value="0" />
                Km.
                speed
                <input name="distanceMb" type="text" id="distanceMb" value="0" />
                MB
                 <input type="button" name="Reset" id="Reset" value="Cancel to start again" />
            </form>
        </div>
    </body>
</html> 

 



โดย:  Ninenik IP: 110.164.245.xxx วันที่: 08-09-2010