เนื้อหาต่อไปนี้ เป็นแนวทางการประยุกต์ใช้งาน 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
<!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 ด้านล่าง
เนื้อหาที่เกี่ยวข้อง