ต้องการให้ตัวแปลใน java ดึงข้อมูลจาก database มาเก็บไว้ผมต้องทำยังไงครับ

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

ต้องการให้ตัวแปลใน java ดึงข้อมูลจาก database มาเก็บไว้ผมต้องทำยังไงครับ
ผมติดปัญหาการดึงข้อมูลจาก database มาใช้ใน java
ในภาพด้านล่างคือข้อมูลดิบที่ใส่ลงไปในตัวแปล 
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
var arr_Destination = [
    {id:1,title: 'บริษัท กรีนไพน์ จำกัด',lat: 12.570474,   lng: 99.957825,alink:'https://maps.google.com?saddr=Current Location&daddr=ทีพีไอ คอนกรีต หน่วยผลิตหัวหิน'},
    {id:2,title: 'ทีพีไอ คอนกรีต หน่วยผลิตหัวหิน',lat: 12.6755735,   lng: 99.9487977,alink:'https://maps.google.com?saddr=Current Location&daddr=ทีพีไอ คอนกรีต หน่วยผลิตหัวหิน'},
    {id:3,title: 'บริษัทรุ่งทิพย์คอนกรีต จำกัด',lat: 12.3740072, lng: 99.8326259,alink:'https://maps.google.com?saddr=Current Location&daddr=บริษัทรุ่งทิพย์คอนกรีต จำกัด'},
    {id:4,title: 'ห้างหุ้นส่วนจำกัด สหสยามคอนกรีต',lat: 12.4343182,   lng: 99.9467043,alink:'https://maps.google.com?saddr=Current Location&daddr=ห้างหุ้นส่วนจำกัด สหสยามคอนกรีต'},
    {id:5,title: 'บริษัท ปูนซีเมนต์นครหลวง จำกัด(มหาชน)',lat: 11.273043, lng: 99.488970,alink:'https://maps.google.com?saddr=Current Location&daddr=11.273043, 99.488970'},
    {id:6,title: 'บริษัทพงศ์พัฒนาคอนกรีต จำกัด',lat: 11.1989883,   lng: 99.5036602,alink:'https://maps.google.com?saddr=Current Location&daddr=บริษัทพงศ์พัฒนาคอนกรีต จำกัด'},
    {id:7,title: 'โรงงานคอนกรีตผสมเสร็จซีแพค',lat: 12.533803, lng: 99.948434,alink:'https://maps.google.com?saddr=Current Location&daddr=12.533803, 99.948434'},
    {id:8,title: 'ห้างหุ้นส่วนจำกัด มหาทรัพย์ซีเมนต์ เทรดดิ้ง',lat: 12.5866329,   lng: 99.8632228,alink:'https://maps.google.com?saddr=Current Location&daddr=ห้างหุ้นส่วนจำกัด มหาทรัพย์ซีเมนต์ เทรดดิ้ง'}
];

แต่ที่ต้องการคือต้องการดึงข้อมูลจาก database มาใช้และให้ loop ลงมาเรื่อยๆ


แต่ผมไม่รู้จะดึงข้อมูลมายังไงครับ
รบกวนท่านผู้รู้ช่วยชี้แนะด้วย


Zzz12345 30-11-2017 23:47:54

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

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


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


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

 ความคิดเห็นที่ 1
ดูเนื้อาหาตอนท้ายของบทความนี้เป็นแนวทาง

สร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมาก จาก xml ไฟล์ http://niik.in/336 


ninenik 30-11-2017
 ความคิดเห็นที่ 2
ผมลองทำดูแล้วครับแต่ยังไม่ได้เลยครับไม่รู้ว่าติดตรงไหน

genMarker.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
<?php
header("Content-type:application/json; charset=UTF-8");   
header("Cache-Control: no-store, no-cache, must-revalidate");        
header("Cache-Control: post-check=0, pre-check=0", false);
require_once("admin/inc/dbconnect.php");
$json_data = array();
$sql = "
SELECT * FROM map WHERE 1 ORDER BY id_map
";
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $json_data[] = array(
            "province_id" => $row['id_map'],
            "province_name" => $row['title_map'],
            "province_lat" => $row['lat_map'],
            "province_lon" => $row['lng_map'],
            "province_link" => $row['alink_map']                   
        );
    }
}
// แปลง array เป็นรูปแบบ json string 
if(isset($json_data)){ 
    $json= json_encode($json_data);   
    if(isset($_GET['callback']) && $_GET['callback']!=""){   
    echo $_GET['callback']."(".$json.");";       
    }else{   
    echo $json;   
    }   
}
?>
 
 
<span style="font-size:16px;"><strong>index.php</strong></span>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="text/javascript">
$.ajax({
        url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ json
        method: "POST",
        dataType: "json",
        success:function(data){
            if(data && typeof data == 'object'){
                $.each(data,function(k,dataValue){
                    var markerID=dataValue.province_id;// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน   
                    var markerName=dataValue.province_name; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน   
                    var markerLat=dataValue.province_lat; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
                    var markerLng=dataValue.province_lon;
                    var markerLng=dataValue.province_link; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน                
                    });
                }); // end loop data
            } // end check data
        }   // end success
    });    // End ajax function
var arr_Destination = [
    {id:dataValue.province_id,title: dataValue.province_name,lat: dataValue.province_lat,   lng: dataValue.province_lon,alink:dataValue.province_link},
];


zzz12345 01-12-2017 00:26
 ความคิดเห็นที่ 3
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
<?php
header("Content-type:application/json; charset=UTF-8");   
header("Cache-Control: no-store, no-cache, must-revalidate");        
header("Cache-Control: post-check=0, pre-check=0", false);
require_once("admin/inc/dbconnect.php");
$json_data = array();
$sql = "
SELECT * FROM map WHERE 1 ORDER BY id_map
";
$result = $mysqli->query($sql);
if($result && $result->num_rows > 0){
    while($row = $result->fetch_assoc()){
        $json_data[] = array(
            "id_map" => $row['id_map'],
            "title_map" => $row['title_map'],
            "lat_map" => $row['lat_map'],
            "lng_map" => $row['lng_map'],
            "alink_map" => $row['alink_map']                   
        );
    }
}
// แปลง array เป็นรูปแบบ json string 
if(isset($json_data)){ 
    $json= json_encode($json_data);   
    if(isset($_GET['callback']) && $_GET['callback']!=""){   
    echo $_GET['callback']."(".$json.");";       
    }else{   
    echo $json;   
    }   
}
?>


zzz12345 01-12-2017 00:43
 ความคิดเห็นที่ 4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$.ajax({
        url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ json
        method: "POST",
        dataType: "json",
        success:function(data){
            if(data && typeof data == 'object'){
                $.each(data,function(k,dataValue){
                    var id_map=dataValue.id_map;// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน   
                    var title_map=dataValue.title_map; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน   
                    var lat_map=dataValue.lat_map; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
                    var lng_map=dataValue.lng_map;
                    var alink_map=dataValue.alink_map; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน                
                    });
                }); // end loop data
            } // end check data
        }   // end success
    });    // End ajax function
     
     
var arr_Destination = [
    {id:id_map, title: title_map, lat:lat_map, lng:lng_map, alink:alink_map},
];


zzz12345 01-12-2017 00:43
 ความคิดเห็นที่ 5
อันนี้ code ทั้งหมด

-------------------------------------


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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
<!DOCTYPE html>
<html>
<head>
<title><?php include('../title.php') ?></title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   
  <link rel="stylesheet" href="http://v4-alpha.getbootstrap.com/examples/sticky-footer/sticky-footer.css">
 
     <!-- FONTAWESOME STYLES-->
    <link href="../assets/css/font-awesome.css" rel="stylesheet" />
        <!-- CUSTOM STYLES-->
     
     <!-- GOOGLE FONTS-->
   <link href='https://fonts.googleapis.com/css?family=Kanit:400,300&subset=thai,latin' rel='stylesheet' type='text/css'>
<style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
     
     
      }
      /* Optional: Makes the sample page fill the window. */
   
      
    </style>
     <style type="text/css">
    html { height: 100% }
    body {
        height:100%;
        margin:0;padding:0;
        font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
        font-size:12px;
    }
  
#comments {background:#fff}
iframe {width:100%; height:250px;border:0;}
#comment-wrap {background:#fff;position:relative}
#comments #comment-wrap{display:none;z-index:5;padding:10px}
#comments:hover #comment-wrap {display:block}
    </style>
     
     
    <style type="text/css"> 
  
#map_canvas {  
     
    height:500px; 
    margin:auto; 
    /*  margin-top:100px;*/
    li01 a {
    font-size:18px;
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
.li01  {
    font-size:18px;
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
.li02 {
     background-color: #555;
    color: white;
}
 
</style> 
<style>
#customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
}
 
#customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
}
 
#customers tr:nth-child(even){background-color: #f2f2f2;
 
}
 
#customers tr:hover {background-color: #ddd;
 
}
 
#customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
}
</style>
  <style type="text/css">
  a:link,a:visited {
   color: #ff6600;
   
   text-decoration: none;
   target-new: none;
    
  }
  a:hover {
   color: red;
 
   text-decoration: none;
   target-new: none;
  }
 </style>
     
     
     
    <script>hover = function() {
    if (!document.body.currentStyle) return;
    var DIVcomments = document.getElementById('comments');
    var DIVcomment_wrap = document.getElementById('comment-wrap');
    DIVcomments.onmouseover = function() {
        DIVcomment_wrap.style.display = 'block';
    }
    DIVcomments.onmouseout = function() {
        DIVcomment_wrap.style.display = 'none';
    }
}
window.onload = hover;</script>
     
    <style type="text/css"> 
body {
  font-family: 'Kanit', sans-serif;
}
h2 {
  font-family: 'Kanit', sans-serif;
}
</style>
    <link href="../assets/css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body><div style="display:block">
<nav class="navbar navbar-default">
<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"></a>    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="../index.php"><span class="glyphicon glyphicon-modal-window"></span>&nbsp;หน้าแรก</a></li>
      <li><a href="../frontend/agent.php"><span class="glyphicon glyphicon-globe"></span>&nbsp;ตัวแทนทั้งหมด</a></li>
      <li><a href="../frontend/contact.php"><span class="glyphicon glyphicon-phone-alt"></span>&nbsp;สินค้าทั้งหมด</a></li>
      <li><a href="../map/index.php"><span class="glyphicon glyphicon-globe"></span>&nbsp;แผนที่</a></li>
    </ul>
    <div>  </div>
  </div>
   
    <table width="100%" border="0" >
   <tr>
     <td width="25%"valign="top" style="background-color:#f1f1f1;">
     <li01 style="text-align:center;">
       <table width="100%" border="0">
         <tr>
           <td><div align="center" style="background-color:#4caf50; color:#FFFFFF; font-size:16px; padding: 5px;">คู่มือ</div></td>
         </tr>
         <tr>
           <td><div align="center" style="background-color:#555555; color:#FFFFFF; font-size:16px; padding: 5px;">ลากไอคอนสีเหลือง<img src="img/male-2.png" alt=""> ไปยังตำแหน่งของท่าน<br>
             และโปรแกรมคำนวนระยะทางให้ท่าน<br>
             จากนั้นเลือกผลลัพที่แสดงที่ตัวเลือกด้านล่างนี้</div></td>
         </tr>
       </table>
       </li01>
        <li02 style="text-align:center;font-size:16px;"></li02>
       <table id="customers">
    <thead>
        <tr class="active">
         
            <th align="left" width="75%">ชื่อสถานที่</th>
            <th align="right" width="25%">ระยะทาง</th>
        </tr>
    </thead>
    <tbody id="placeData">
    </tbody>
</table>
      <p>&nbsp;</p></td>
     <td width="75%"><div id="map_canvas" style="width:100%;height:1000px;"></div> </td>
   </tr>
 </table>
<br>
<br>
<div class="container" style="width:100%;"></div>  
</div>
   
   
   
  
<script src="//unpkg.com/jquery@3.2.1"></script>
<script type="text/javascript">
$.ajax({
        url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ json
        method: "POST",
        dataType: "json",
        success:function(data){
            if(data && typeof data == 'object'){
                $.each(data,function(k,dataValue){
                    var id_map=dataValue.id_map;// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน   
                    var title_map=dataValue.title_map; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน   
                    var lat_map=dataValue.lat_map; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
                    var lng_map=dataValue.lng_map;
                    var alink_map=dataValue.alink_map; // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน                
                    });
                }); // end loop data
            } // end check data
        }   // end success
    });    // End ajax function
     
     
var arr_Destination = [
    {id:id_map, title: title_map, lat:lat_map, lng:lng_map, alink:alink_map},
];
var sort_arr_Destination = [];
var iconLetter = ['a','b','c','d'];
var place_Marker = [];
var pos;
var posPlace;
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้ 
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น 
var my_Marker;  // กำหนดตัวแปรเก็บ marker ตำแหน่งปัจจุบัน หรือที่ระบุ 
var service;
var origins = [];
var destinations = [];
function initialize() { // ฟังก์ชันแสดงแผนที่ 
    GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM 
    
   service = new GGM.DistanceMatrixService();
    // เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี   
    if(navigator.geolocation){   
              
            // หาตำแหน่งปัจจุบันโดยใช้ getCurrentPosition เรียกตำแหน่งครั้งแรกครั้งเดียวเมื่อเปิดมาหน้าแผนที่
            navigator.geolocation.getCurrentPosition(function(position){   
                var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude  ปัจจุบัน 
                var myPosition_lon=position.coords.longitude;  // เก็บค่าตำแหน่ง  longitude ปัจจุบัน          
                  
                // สรัาง LatLng ตำแหน่ง สำหรับ google map 
                pos = new GGM.LatLng(myPosition_lat,myPosition_lon);   
                origins = [];
                origins.push(pos);            
                  
                // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas 
                var my_DivObj=$("#map_canvas")[0];  
                  
                // กำหนด Option ของแผนที่ 
                var myOptions = { 
                    zoom: 12, // กำหนดขนาดการ zoom 
                    center: pos , // กำหนดจุดกึ่งกลาง  เป็นจุดที่เราอยู่ปัจจุบัน
                    mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่ 
                    mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่ 
                        position:GGM.ControlPosition.RIGHT, // จัดตำแหน่ง 
                        style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style  
                    } 
                }; 
           
                map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map                     
                
               my_Marker = new GGM.Marker({ // สร้างตัว marker 
                    position: pos,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง 
                    map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map 
                    icon:"//www.ninenik.com/demo/google_map/images/male-2.png", 
                    draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้ 
                    title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ 
                });                 
                  
                for( i = 0;i<arr_Destination.length;i++){   
                    posPlace = new GGM.LatLng(arr_Destination[i].lat,arr_Destination[i].lng);    
                    destinations.push(posPlace);
 
                    place_Marker[i] = new GGM.Marker({ // สร้างตัว marker 
                        position: posPlace,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง 
                        animation: google.maps.Animation.DROP,
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map 
                        label:arr_Destination[i].title
                    });        
                }      
                 
                service.getDistanceMatrix(
                  {
                    origins: origins,
                    destinations: destinations,
                    travelMode: 'DRIVING',
                    avoidHighways: true,
                    avoidTolls: true,
                  }, callback);                     
                  
                  
                // กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร
                GGM.event.addListener(my_Marker, 'dragend', function() {
                    var my_Point = my_Marker.getPosition();  // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย
                    map.panTo(my_Point);  // ให้แผนที่แสดงไปที่ตัว marker          
                    origins = [];
                    origins.push(my_Point);    
                         
                    service.getDistanceMatrix(
                      {
                        origins: origins,
                        destinations: destinations,
                        travelMode: 'DRIVING',
                        avoidHighways: true,
                        avoidTolls: true,
                      }, callback);                         
 
                });    
                                  
                // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom 
                GGM.event.addListener(map, "zoom_changed", function() { 
                    $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value   
                });                 
                  
            },function() {   
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน   
            });   
          
            // ให้อัพเดทตำแหน่งในแผนที่อัตโนมัติ โดยใช้งาน watchPosition
            // ค่าตำแหน่งจะได้มาเมื่อมีการส่งค่าตำแหน่งที่ถูกต้องกลับมา
            navigator.geolocation.watchPosition(function(position){   
   
                var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude  ปัจจุบัน 
                var myPosition_lon=position.coords.longitude;  // เก็บค่าตำแหน่ง  longitude ปัจจุบัน 
                                 
                // สรัาง LatLng ตำแหน่งปัจจุบัน watchPosition
                pos = new GGM.LatLng(myPosition_lat,myPosition_lon);    
                 orgins = [];
                 origins.push(pos);   
                // ให้ marker เลื่อนไปอยู่ตำแหน่งปัจจุบัน ตามการอัพเดทของตำแหน่งจาก watchPosition
                my_Marker.setPosition(pos);
 
                map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน 
                map.setCenter(pos);  // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน                  
        
  
            },function() {   
                // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน   
            });   
            
    }else{   
         // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง   
    }    
  
  
   
} 
 
function callback(response, status,_) {
    if(status=='OK'){      
//      console.log(arr_Destination);
        $.each(response.rows[0].elements,function(i,elm){
            arr_Destination[i].distanceText = elm.distance.text;
            arr_Destination[i].distanceValue = elm.distance.value;
        });
        sort_arr_Destination = [];
        sort_arr_Destination = $.extend(true,[], arr_Destination);
        sort_arr_Destination.sort(function(a, b) {
            return parseFloat(a.distanceValue) - parseFloat(b.distanceValue);
        });
//      console.log(sort_arr_Destination);
        $("#placeData").html('');
        $.each(sort_arr_Destination,function(i,dest){
            var htmlTr = '<tr><td><a href="'+arr_Destination[i].alink+'" target="_blank">'+dest.title '</a></td><td>' dest.distanceText '</td></tr>';
            $("#placeData").append(htmlTr);        
    //      console.log(dest);
        });    
    }
}
$(function(){ 
    // โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว 
    // ค่าตัวแปร ที่ส่งไปในไฟล์ google map api 
    // v=3.2&sensor=false&language=th&callback=initialize 
    //  v เวอร์ชัน่ 3.2 
    //  sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false 
    //  language ภาษา th ,en เป็นต้น 
    //  callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize 
    $("<script/>", { 
      "type": "text/javascript", 
      src: "//maps.google.com/maps/api/js?v=3.2&key=AIzaSyCSTujeM64MyA3QnjwKF_SnXmaiyTItWOM&sensor=false&language=th&callback=initialize"
    }).appendTo("body");     
});
 </script>
</body>
</html>





zzz12345 01-12-2017 00:46
 ความคิดเห็นที่ 6
ลองศึกษาเกี่ยวกับ json ไฟล์เพิ่มเติมดู

การสร้าง json ไฟล์ จากฐานข้อมูล ด้วย php และการใช้งานด้วย jQuery getJSON() http://niik.in/373 
ค่าที่ได้จาก ไฟล์ genMarker.php เป็นรูปแบบ JSON String ที่สามารถแปลงเป็น Array Object ที่ต้องการได้
แค่เปลี่ยน key กับ value ให้ตรงกับที่ต้องการ
 
หรือใช้คำสั่งนี้แทนก็ได้

1
2
3
4
5
6
7
8
9
10
<script src="//unpkg.com/jquery@3.2.1"></script>
<script type="text/javascript">
$(function(){
    var arr_Destination;
    $.getJSON("genMarker.php",function(data){
        arr_Destination = data;
        console.log(arr_Destination);
    });
});
</script>


ninenik 01-12-2017
1







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