ตัวอย่างและวิธีการต่อไปนี้ เป็นแนวทางในการสร้าง animation แนะนำเส้นทาง ตามพิกัดใน google map ที่กำหนด แบบอัตโนมัติ โดยใช้วิธีการกำหนด พิกัดแนวเส้นทางเป็นตัวแปร array แล้วนำค่าพิกัด ดังกล่าวไปสร้างเส้น polyline เชื่่อมต่อระหว่างจุดเส้นทาง สามารถนำไปประยุกต์เพิ่มเติมได้
คำอธิบายแสดงไว้ในตัวอย่างโค้ด
ตัวอย่างโค้ด
<!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>Google Map API 3 - 01</title>
<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;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas {
position:relative;
width:550px;
height:400px;
margin:auto;
}
/* css สำหรับ div คลุม google map อีกที */
#contain_map {
position:relative;
width:550px;
height:400px;
margin:auto;
margin-top:50px;
}
</style>
</head>
<body>
<div id="contain_map">
<div id="map_canvas"></div>
</div>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var route_latlng=[];// กำหนดตัวแปร array สำหรับ เก็บ จุดพิกัดเส้นทาง
// เก็บ จุดพิกัดเส้นทาง หาได้จากหัวข้อ
route_latlng[0]="13.7617701333367,100.63734054565421";
route_latlng[1]="13.762353699970583,100.64193248748771";
route_latlng[2]="13.762728849180767,100.6456232070922";
route_latlng[3]="13.765938434495806,100.64536571502677";
route_latlng[4]="13.766313577956411,100.64789772033683";
route_latlng[5]="13.772440835950021,100.64712524414054";
route_latlng[6]="13.775025073483476,100.64519405364981";
route_latlng[7]="13.779193138322167,100.64429283142081";
route_latlng[8]="13.783736244298248,100.64738273620597";
route_latlng[9]="13.789571296636877,100.65133094787589";
var route_latlng_length=route_latlng.length; // // กำหนดตัวแปร เก็บความยาว array
var flightPath; // กำหนดตัวแปร สำหรับเก็บ object สร้าง Polyline
var flightPlanCoordinates;
var my_Marker=[];
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Latlng; // กำหนดตัวแปรสำหรับเก็บจุดเริ่มต้นของเส้นทางเมื่อโหลดครั้งแรก
function initialize() { // ฟังก์ชันแสดงแผนที่
GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
// กำหนดจุดเริ่มต้นของแผนที่
var myRouteLatLng=route_latlng[0].split(",");
my_Latlng = new GGM.LatLng(myRouteLatLng[0],myRouteLatLng[1]);
// กำหนดตำแหน่งปลายทาง สำหรับการโหลดครั้งแรก
var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
var my_DivObj=$("#map_canvas")[0];
// กำหนด Option ของแผนที่
var myOptions = {
zoom: 15, // กำหนดขนาดการ zoom
center: my_Latlng , // กำหนดจุดกึ่งกลาง จากตัวแปร my_Latlng
mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่ จากตัวแปร my_mapTypeId
};
map = new GGM.Map(my_DivObj,myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
my_Marker[0] = new GGM.Marker({ // สร้างตัว marker
position:my_Latlng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
});
if(map){ // เงื่่อนไขถ้ามีการสร้างแผนที่แล้ว
var start_myRouteLatLng=route_latlng[0].split(",");// ดึงค่าพิกัด เรีมต้น
flightPlanCoordinates = [ // กำหนดค่า พิกัดเริ่มต้นใน array สำหรับสร้างเส้น polyline
new GGM.LatLng(start_myRouteLatLng[0],start_myRouteLatLng[1])
];
flightPath = new GGM.Polyline({ // กำหนดรูปแบบของเส้น polyline ทีต้องการสร้าง
strokeColor: "#03C", // สีของ polylines
strokeOpacity: 1.0, // ความโปร่งใส
strokeWeight: 4 //ความหนาของเส้น polylines
});
var i_count=0; // กำหนดตัวแปร สำหรับเริ่มต้นนับการสร้างเส้น polyline
var animateS=setInterval(function(){ // ตั้งเวลาให้สร้างเส้น polyline ต่อเนื้องทุก 3 วินาที
i_count++; // เพิ่มค่าตัวนับ
if(i_count<route_latlng_length){ // ถ้ายังไม่ถึงตำแหน่งสุดท้าย ให้สร้างเส้น polyline ต่อ
var myRouteLatLng=route_latlng[i_count].split(","); // หาพิกัดถัดไป
map.setCenter(new GGM.LatLng(myRouteLatLng[0],myRouteLatLng[1])); // กำหนดจุดกึ่งกลางแผนที่
my_Marker[i_count] = new GGM.Marker({ // สร้างตัว marker
position:new GGM.LatLng(myRouteLatLng[0],myRouteLatLng[1]), // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map
});
// เชื่อมตำแหน่งในเส้น polyline จากตัวแปร array
flightPlanCoordinates.push(new GGM.LatLng(myRouteLatLng[0],myRouteLatLng[1]));
flightPath.setPath(flightPlanCoordinates); //สร้างเส้น path
flightPath.setMap(map); //นำเส้น path polyline ไปสร้างในแผนที่
}else{ // เงื่อนไขถ้าถึงจุดสุดท้ายแล้ว
flightPath.setMap(); // ลบเส้น polylines ออกจากแผนที่
for(i=1;i<route_latlng_length;i++){ // วนลูปลบตัว marker
my_Marker[i].setMap(); // ลบตัว marker
}
var flightPlanCoordinates_new=flightPlanCoordinates.shift(); // ดึงค่าจุดเริ่มต้น จาก array
map.setCenter(flightPlanCoordinates_new); // กำหนดแผนที่ไปที่จุดเริ่มต้น
flightPlanCoordinates=[]; // ล้างค่า array ที่ใช้สร้างเส้น polylines
flightPlanCoordinates[0]=flightPlanCoordinates_new; // กำหนดค่าเริ่มต้นใหม่
i_count=0; // เริ่มต้นตัวนับใหม่
// clearInterval(animateS); // เอาคอมเม้นส่วนนี้ออก ถ้าไม่ต้องการวนแสดงอีกครั้ง
}
},3000);
}
}
$(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&sensor=false&language=th&callback=initialize"
}).appendTo("body");
});
</script>
</body>
</html>
