ตัวอย่างและวิธีการต่อไปนี้ เป็นแนวทางในการสร้าง animation แนะนำเส้นทาง ตามพิกัดใน google map ที่กำหนด แบบอัตโนมัติ โดยใช้วิธีการกำหนด พิกัดแนวเส้นทางเป็นตัวแปร array แล้วนำค่าพิกัด ดังกล่าวไปสร้างเส้น polyline เชื่่อมต่อระหว่างจุดเส้นทาง สามารถนำไปประยุกต์เพิ่มเติมได้
คำอธิบายแสดงไว้ในตัวอย่างโค้ด
ตัวอย่างโค้ด
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<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; // // กำหนดตัวแปร เก็บความยาว arrayvar flightPath; // กำหนดตัวแปร สำหรับเก็บ object สร้าง Polylinevar 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> |
