สร้าง animation แนะนำเส้นทาง ใน google map อย่างง่าย
02 October 2010ตัวอย่างและวิธีการต่อไปนี้ เป็นแนวทางในการสร้าง 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: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
}).appendTo("body");
});
</script>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
13 Oct 08 คำสั่ง SQL BETWEEN อ่าน 11009 17 Oct 08 แสดงตัวอย่างรูป ก่อน upload image preview berfore upload อ่าน 10654 26 Dec 10 แนะนำ PHP Simple HTML DOM Parser สำหรับ ดึงข้อมูล เฉพาะส่วนที่ต้องการ อ่าน 3910 20 Oct 10 สร้าง video playlist ของ jwplayer jquery plugin ด้วย xml และการใช้งาน อ่าน 4209 07 Jul 10 เทคนิค php ดึงข้อมูล comment จาก facebook มาใช้งาน อ่าน 6408 25 Sep 08 ดึงข้อมูลจากฐานข้อมูลใส่ List Box อ่าน 6516 18 Oct 08 รู้จักการใช้งานฟังก์ขัน after() ใน jquery อ่าน 3046 19 Mar 11 การสร้างปุ่ม ล็อกอิน เว็บไซต์ แบบไม่แสดงรูป ด้วย facebook อ่าน 2589 22 Mar 09 สร้างฟังก์ชันโชว์รูปภาพขนาดใหญ่ด้วย javascript แบบง่าย อ่าน 5411 04 Jan 10 ดึงไฟล์ xml (rss) ไฟล์แบบ cross domain มาแสดงด้วย ajax ใน jQuery อย่างง่าย อ่าน 4238 02 Oct 10 สร้าง animation แนะนำเส้นทาง ใน google map อย่างง่าย อ่าน 3206 25 Sep 08 ใช้ PHP สร้าง Javascript อย่างง่าย อ่าน 4725 04 May 10 ประยุกต์ ใช้งาน php และ ajax ใน jQuery แสดงผลลัพธ์ คล้าย twitter อ่าน 3819 20 Aug 10 การสร้าง popup ที่แตกต่าง ด้วยวิธี showModalDialog อ่าน 6032 03 Jun 09 สร้างระบบ slide เลื่อนซ้าย ขวา ด้วย jquery อย่างง่าย อ่าน 14664 17 Sep 10 กำหนด infowindow ให้กับตัว marker จำนวนมาก ใน google map อ่าน 3816 08 Nov 09 เทคนิค CSS แสดงข้อมูลแบ่งเป็น คอลัมน์ แทนการใช้ตาราง Table อ่าน 8791 28 Nov 09 เทคนิค php ค้นหาข้อมูล และ hilight กรณี keyword มากกว่า 1 ค่า อ่าน 3627 28 Oct 10 เริ่มต้นใช้งาน jquery ui autocomplete อย่างง่าย อ่าน 5498 08 Jun 09 วิธีการสร้าง preloading images โหลดรูปภาพ ด้วย javascript อย่างง่าย อ่าน 7190