เนื้อหาต่อไปนี้ เป็นแนวทางการประยุกต์ใช้งาน Google map Distance Matrix API
ในการหาระยะทางระหว่างตำแหน่งเริ่มต้น กับตำแหน่งสิ้นสุด โดยในที่นี้จะให้ตำแหน่ง
เริ่มต้น เป็นตำแหน่งปัจจุบันของผู้ใช้งาน ตรวจสอบจากตำแหน่ง GPS อ้างอิงจากบทความ
ในหัวข้อ
ใช้ gps ระบุตำแหน่ง และอัพเดท ตำแหน่งอัตโนมัติ ใน google map http://niik.in/563
https://www.ninenik.com/content.php?arti_id=563 via @ninenik
จำไว้เสมอว่า การระบุตำแหน่งปัจจุบันผ่าน google map นั้น เว็บไซต์ของเราหรือ url ที่เรียกใช้งาน
จะต้องเป็น https หรือเป็นระบบ ssl เท่านั้น ค่าตำแหน่งจึงจะแสดง
อีกส่วนที่สำคัญ คือการใช้งาน API key ในการใช้งาน google map ควรจะใช้และจำเป็นต้องใช้งาน API Key
อย่างกรณีที่เราจะใช้งาน Distance Matrix API จำเป็นต้องใช้งาน API Key ด้วย ดูเนื้อหาบทความด้านล่าง
นี้เป็นแนวทาง
แนวทางแก้ปัญหา Google map ไม่แสดง และการใช้งาน API Key http://niik.in/783
https://www.ninenik.com/content.php?arti_id=783 via @ninenik
สำหรับเนื้อหาโดยละเอียดเกี่ยวกับ Distance Matrix API สามารถดูเพิ่มเติมได้ที่
https://developers.google.com/maps/documentation/distance-matrix/intro
https://developers.google.com/maps/documentation/distance-matrix/usage-limits
https://developers.google.com/maps/documentation/javascript/examples/distance-matrix
โค้ดตัวอย่าง และการทำงานของโค้ดตัวอย่าง
สำหรับโค้ดตัวอย่างต่อไปนี้ เราจะสมมติสถานที่ขึ้นมา 2 ที่ แสดงด้วย marker A B และกำหนดจุดของ
ผู้ใช้งานเป็นไอคอนรูปคน โดยตำแหน่งของผู้ใช้จะอิงจากตำแหน่งของ GPS ถ้าเปิดผ่านบราวเซอร์ จะมีการ
แจ้งขอสิทธิ์การระบุตำแหน่ง เราควรอนุญาตให้ใช้ตำแหน่ง เพื่อให้การทำงานเป็นไปอย่างถูกต้อง โดยระบบ
GPS ผ่านการใช้งานบราวเซอร์ จะอ้างอิงถึงตำแหน่งของสัญญาณอินเทอร์เน็ต หรือไวไฟ
ตำแหน่งของผู้ใช้ในโค้ดตัวอย่าง ถ้าตำแหน่งจริง ไม่ได้อยู่ใน กทม ให้คลิกที่ไอคอนลากมาที่ กทม เพื่อให้
เห็นภาพชัดเจนขึ้น ใต้รูปแผนที่ จะมีตารางแสดงสถานที่ และระยะห่างของสถานที่นั้น กับตำแหน่งปัจจุบันของเรา
เราสามารถ ทดสอบย้ายไอคอนรูปคน และดูการเปลี่ยนแปลงของระยะทาง โดยระยะทางในตัวอย่าง จะ
เป็นในโหมดของ การขับรถ ดังนั้นมีโอกาสเป็นไปได้ที่แม้เราลากตำแหน่งไอคอนมาใกล้กับสถานที่ เพื่อทดสอบ
ระยะทาง แต่ระยะทางยังไกล หรือเป็นระยะทางที่คล้ายกับการขับรถอ้อมไปตามเส้นทาง ดังนั้น การวางตำแหน่ง
ของไอคอน ในตำแหน่งที่เหมาะสม จะได้ข้อมูลที่ใกล้เคียง
ไฟล์ตัวอย่าง google_map_distance_matrix.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 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 | <!DOCTYPE html> <html lang= "en" > <head> <meta charset= "utf-8" > <meta http-equiv= "X-UA-Compatible" content= "IE=edge" > <meta name= "viewport" content= "width=device-width, initial-scale=1" > <title>Document</title> <link rel= "stylesheet" href= "//unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css" > </head> <body> <style type= "text/css" > #map_canvas { width:550px; height:500px; margin:auto; /* margin-top:100px;*/ } </style> <br> <br> <div class = "container" style= "width:800px;" > <div id= "map_canvas" ></div> <table class = "table table-condensed" style= "width:550px;margin:auto;" > <thead> <tr class = "active" > <th>Place</th> <th>Distance</th> </tr> </thead> <tbody id= "placeData" > </tbody> </table> </div> </div> <script src= "//unpkg.com/jquery@3.2.1" ></script> <script type= "text/javascript" > var arr_Destination = [ {title: 'Place A' ,lat:13.78040,lng:100.58738}, {title: 'Place B' ,lat:13.79157,lng:100.63922}, /* {title:'Place C',lat:ddddd,lng:ddddd}, {title:'Place D',lat:ddddd,lng:ddddd}, {title:'Place E',lat:ddddd,lng:ddddd}, {title:'Place F',lat:ddddd,lng:ddddd},*/ ]; var iconLetter = [ 'a' , 'b' ]; 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: 13, // กำหนดขนาดการ 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++){ var htmlTr = '<tr><td>' +arr_Destination[i].title+ '</td><td class="place_distance"></td></tr>' ; $( "#placeData" ).append(htmlTr); posPlace = new GGM.LatLng(arr_Destination[i].lat,arr_Destination[i].lng); destinations.push(posPlace); place_Marker[i] = new GGM.Marker({ // สร้างตัว marker position: posPlace, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map icon: "//www.ninenik.com/iconsdata/letter_red/letter_" +iconLetter[i]+ ".png" }); } 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); service.getDistanceMatrix( { origins: origins, destinations: destinations, travelMode: 'DRIVING' , avoidHighways: true, avoidTolls: true, }, callback); // ให้ marker เลื่อนไปอยู่ตำแหน่งปัจจุบัน ตามการอัพเดทของตำแหน่งจาก watchPosition my_Marker.setPosition(pos); map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน map.setCenter(pos); // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน }, function () { // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน }); } else { // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง } } function callback(response, status) { if (status== 'OK' ){ console.log(response.rows); $.each(response.rows[0].elements, function (i,elm){ console.log(i); console.log(elm); $( ".place_distance:eq(" +i+ ")" ).text(elm.distance.text); }); } } $( 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=<ใส่ api key ของเรา>&sensor=false&language=th&callback=initialize" }).appendTo( "body" ); }); </script> </body> </html> |
ดูตัวอย่างผลลัพธ์ที่ demo ด้านล่าง