ดึงพิกัดและข้อมูลจาก 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

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!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

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

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


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


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

 ความคิดเห็นที่ 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 สำหรับเอาไปทดสอบรัน
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!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
1







สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ