รู้จักการสร้าง polylines ใน google map v3 ตอนที่ 1
jQuery :
โค้ดและตัวอย่างต่อไปนี้ เป็นแนวทางการสร้างเส้น polylines ในแผนที่
โดยการลากเลือกจุดเริ่มต้นด้วย marker แล้วสร้างเส้น polylines ตาม
ตำแหน่งที่ปักหมุด มีตัวอย่างการลบ เส้น polylines ออกจากแผนที่
ดูคำอธิบายในโค้ดประกอบ
<!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 { width:550px; height:400px; margin:auto;/* margin-top:100px;*/}#map_control_tool{ position:relative; width:550px; margin:auto; margin-top:5px; background-color:#F1F7E6;}</style>
</head>
<body>
<div style="margin:auto;width:600px;padding-top:50px;"> <div id="map_canvas"></div> <div id="map_control_tool"> <input type="button" name="button" id="button" value="Clear Map Polylines" onclick="clearMapPolylines();" /> </div></div> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript">var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้นvar arr_path=[]; // กำหนดตัวแปรสำหรับเก็บค่าอาเรย์ ตำแหน่ง pathvar makePolyline; // กำหนดตัวแปร ฟังก์ชั่น สร้างเส้น polylinesvar objPolylines=[]; // กำหนดตัวแปรสำหรับเก็บค่า object ของ polylinesfunction initialize() { // ฟังก์ชันแสดงแผนที่ GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM // กำหนดจุดเริ่มต้นของแผนที่ var my_Latlng = new GGM.LatLng(13.761728449950002,100.6527900695800); var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas var my_DivObj=$("#map_canvas")[0]; // กำหนด Option ของแผนที่ var myOptions = { zoom: 13, // กำหนดขนาดการ zoom center: my_Latlng , // กำหนดจุดกึ่งกลาง mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่ }; map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map var my_Marker = new GGM.Marker({ // สร้างตัว marker position: my_Latlng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้ title:"คลิกลากเพื่อหาตำแหน่งจุดที่ต้องการ!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ }); // กำหนด event ให้กับตัว marker เมื่อสิ้นสุดการลากตัว marker ให้ทำงานอะไร GGM.event.addListener(my_Marker, "dragend", function() { var my_Point = my_Marker.getPosition(); // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย arr_path.push(my_Point); // เพิ่มค่าตำแหน่ง จากตัว marker ตำแหน่งล่าสุด map.panTo(my_Point); // ให้แผนที่แสดงไปที่ตัว marker ล่าสุด makePolyline(arr_path); // ส่งค่าตำแหน่งใน array ไปสร้างเส้น polylines ในแผนที่// console.log(arr_path); });
// กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom GGM.event.addListener(map, "zoom_changed", function() { $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value });
}
makePolyline=function(arr_path){// console.log(arr_path.length); var i=arr_path.length-1; objPolylines[i] = new GGM.Polyline({ // กำหนดรูปแบบของเส้น polylines path: arr_path,// array ตำแหน่งที่เก็บค่า lat,lon strokeColor: "#FF0000", // สี strokeOpacity: 1.0, // ความโปร่งใส strokeWeight: 2 //ความหน้าของเส้น }); objPolylines[i].setMap(map); // สร้างเส้น polylines ในแผนที่// console.log(arr_path);// console.log(objPolylines);}clearMapPolylines=function(){ arr_path=[]; for(i=0;i<objPolylines.length;i++){// console.log(i); objPolylines[i].setMap(null); }
// console.log(arr_path);}$(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>
