สร้าง animation แนะนำเส้นทาง ใน google map อย่างง่าย

02 October 2010 เขียนเมื่อ 12 ปีก่อน โดย Ninenik Narkdee

animation แนะนำเส้นทาง google map

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ animation แนะนำเส้นทาง google map

ตัวอย่างและวิธีการต่อไปนี้ เป็นแนวทางในการสร้าง 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>

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ