จำลอง ระบบ tracking ด้วย google map api

ผมอยากจะเขียนเกี่ยวกับ google map มานานแล้ว
แต่ไม่มีเวลาสักที ก็เลยตั้งใจว่าวันนี้ยังไงๆ ก็ต้องเขียนให้ได้
แต่ไม่รู้จะเขียนเรื่องอะไร พอคิดได้ ก็นึกชื่อบทความไม่ออก ^^"
เอาชื่อนี้ไปก่อนก็แล้วกัน

ในบทความนี้ ผมจะแนะนำเทคนิคที่จะนำไปประยุกต์ ใช้กับระบบ GPS tracking ได้
หวังว่าจะเป็นแนวทาง เป็นประโยชน์กับผู้ที่กำลังศึกษาเรื่องนี้ได้บ้าง

เพื่อให้เห็นภาพ เรามาดูภาพกันก่อนเลย -*-



สังเกตทางขวามือครับ จะมีปุ่ม UP DOWN LEFT RIGHT ฮ่าๆๆๆ
เป็นปุ่มที่ทำให้ตัว marker หรือตัวหมุดแดงวิ่งนั้นเอง อิอิ ^^
จำลองว่ารถวิ่งอะไรแบบนั้น แล้วลองมาดูที่แผนที่ google map ครับ
จะเห็นว่ามีเส้นม่วง ๆ ลากไปมา นั้นเป็นเส้นที่บอกว่า หมุดวิ่งไปตรงไหนบ้าง
ก็คือสมมุติว่ารถวิ่งไปตรงไหนบ้าง นั้นแหละครับ แบบนี้พอจะนึกภาพออกไหมครับ
ในตัวอย่างนี้ แผนที่สามารถเลื่อนตาม marker หรือหมุดแดง ได้ด้วย
หาก marker หรือ หมุดแดง วิ่งออกนอกขอบเขตบนแผน ณ ขณะนั้น
คือวิ่งหลุดออกขอบ อ่ะครับ แผนที่จะ pan ตาม จะว่ายังไงล่ะ ต้องลองเล่นดูอ่ะครับ ^^

งั้นเรามาดู code กันเลย ^^

ไฟล์ map.js (เป็นไฟล์ javascript)

var map;
var marker;

 function setup_map() 
  {
    if (GBrowserIsCompatible()) 
   {
   map = new GMap2(document.getElementById("map"));
   map.addControl(new GLargeMapControl());
   map.addControl(new GMapTypeControl());
   map.setCenter(new GLatLng(14.902321826141808,100.986328125), 10);
   var setPosition = new GLatLng(14.902321826141808, 100.986328125);
   //var icon01 = i_icon("img/icon62.png");
   //marker    = new GMarker(setPosition,{icon:icon01});
   marker    = new GMarker(setPosition);
   map.addOverlay(marker);

    GEvent.addListener(map,"click", function(overlay, latlng) { 
     if (latlng) { 
      map.clearOverlays();
      var myHtml = "Latitude : " +  latlng.lat() + "
 Longitude : " +  latlng.lng();  
      document.getElementById("hid_lat").value =  latlng.lat()    ;
      document.getElementById("hid_lng").value =  latlng.lng()  ; 
      var setPosition = new GLatLng(   latlng.lat()  , latlng.lng());
      var icon01 = i_icon("img/icon62.png");
      //marker    = new GMarker(setPosition,{icon:icon01});
      marker    = new GMarker(setPosition);
      map.addOverlay(marker);
     }
    });
    }
    }

function i_icon(part)
{
 var icon = new GIcon(); 
    icon.image = part;
    icon.iconSize = new GSize(27, 27);
    icon.iconAnchor = new GPoint(6, 10);
 return icon;
} 

var points = new Array();
var index = 0;
function line(latlng)
{
 points[index] = latlng;
 var lines = new GPolyline(points)
 map.addOverlay(lines);
 index += 1;
}

function out_panto(latlng)
{
 var bounds = map.getBounds();
 var northEast = bounds.getNorthEast();
 var southWest = bounds.getSouthWest();

 var up = northEast.lat();
 var right = northEast.lng();
 var left = southWest.lng();
 var down = southWest.lat();

 var lat = marker.getLatLng().lat();
 var lng = marker.getLatLng().lng();

 if((lat > up) || (lat < down) || (lng > right) || (lng < left) )
 {
  map.panTo(latlng);
 }
}

function up()
{
 map.clearOverlays();
 var lat = marker.getLatLng().lat();
 var lng = marker.getLatLng().lng();
 var latlng = new GLatLng((lat + 0.08),lng);
 //var icon01 = i_icon("img/icon62.png");
 //marker  = new GMarker(latlng,{icon:icon01});
 marker  = new GMarker(latlng);
 map.addOverlay(marker);
 line(latlng);
 out_panto(latlng);
 cre_arr(lat,lng);
}

function right()
{
 map.clearOverlays();
 var lat = marker.getLatLng().lat();
 var lng = marker.getLatLng().lng();
 var latlng = new GLatLng(lat,(lng + 0.08));
 //var icon01 = i_icon("img/icon62.png");
 //marker  = new GMarker(latlng,{icon:icon01});
 marker  = new GMarker(latlng);
 map.addOverlay(marker);
 line(latlng);
 out_panto(latlng);
 cre_arr(lat,lng);
}

function left()
{
 map.clearOverlays();
 var lat = marker.getLatLng().lat();
 var lng = marker.getLatLng().lng();
 var latlng = new GLatLng(lat,(lng - 0.08));
 //var icon01 = i_icon("img/icon62.png");
 //marker  = new GMarker(latlng,{icon:icon01});
 marker  = new GMarker(latlng);
 map.addOverlay(marker);
 line(latlng);
 out_panto(latlng);
 cre_arr(lat,lng);
}

function down()
{
 map.clearOverlays();
 var lat = marker.getLatLng().lat();
 var lng = marker.getLatLng().lng();
 var latlng = new GLatLng((lat - 0.08),lng);
 //var icon01 = i_icon("img/icon62.png");
 //marker  = new GMarker(latlng,{icon:icon01});
 marker  = new GMarker(latlng);
 map.addOverlay(marker);
 line(latlng);
 out_panto(latlng);
 cre_arr(lat,lng);
}

var run=0;
function cre_arr(lat,lng)
{
 var objDiv = document.getElementById("objDiv");
 var text = "arr["+ run +"] = new GLatLng("+lat+","+lng+")<br/>";
 objDiv.innerHTML += text;
 run ++;
}

ไฟล์ index.html

<HTML>
 <HEAD>
  <TITLE> google map</TITLE>
 <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAtXdWMLpEcIkWX8leMQ2VDhRPy7m0Y_j0naXG6P2DwVJc1O6ImBTQOdMKRSvB7KM6CSNKCNp0zOchUw"
            type="text/javascript"></script>
<script type="text/javascript" src="map.js" > </script> 
 </HEAD>

 <BODY onload="setup_map()">
<table>
<tr>
 <td>  
  <div id="map" style="width: 500px; height: 387px"></div> 
 </td>
 <td>
  <TABLE>
   <TR align="center">
    <TD></TD>
    <TD><INPUT TYPE="button" value="UP" onclick="up()"></TD>
    <TD></TD>
   </TR>
   <TR>
    <TD><INPUT TYPE="button" value="LEFT" onclick="left()"></TD>
    <TD></TD>
    <TD><INPUT TYPE="button" value="RIGHT" onclick="right()"></TD>
   </TR>
   <TR>
    <TD></TD>
    <TD><INPUT TYPE="button" value="DOWN" onclick="down()"></TD>
    <TD></TD>
   </TR> 
  </TABLE>
 </td>
</tr>
</table>

  <INPUT TYPE="hidden" id="hid_lat" NAME="hid_lat" value="0">
  <INPUT TYPE="hidden" id="hid_lng" NAME="hid_lng" value="0">

 <div id="objDiv"></div>

 </BODY>
</HTML>

เดี๋ยวผมจะมาอธิบายโค้ดทีหลังนะครับ
ถ้าใครยังไม่มีแผนที่ของ google map ให้ไปดูวิธีเรียกใช้ google map ได้ที่ลิงค์ด้านล่างนี้ครับ
การนำ Google Map มาใช้ใน 4 ขั้นตอน