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

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ดึงพิกัดและข้อมูลจาก database ใน google map

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

ตอนนี้ทำโปรเจ็คงานกลุ่มส่งอาจารย์ แล้วเลือกที่จะทำ การวัดความแรงสัญญาณ ADSL โดยใช้ google map
ทำแบบมั่วไปมั่วมาตามประสาคน coding ไม่ค่อยเป็นนะคับ ก็ได้โค้ดจาก https://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 08-09-2010 00:29:49

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

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

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

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ความคิดเห็นที่ 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="//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 08-09-2010

ความคิดเห็นที่ 2

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

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

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

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

chinjung44 08-09-2010 08:53

ความคิดเห็นที่ 3

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

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

Ninenik 08-09-2010

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน