ตัวอย่างนี้ จะเป็นการประยุกต์ใช้ วงกลม circle สำหรับ กรณีที่มี
marker จำนวนมากหรือ ต้องการสร้าง วงกลม circle จำนวนมาก
โดยในตัวอย่าง เป็นการปรับเพิ่มเติม จากเนื้อหาเดิม คือ
สร้าง ตัว marker ระบุตำแหน่ง ใน google map จำนวนมาก จาก xml ไฟล์
โดยจากเนื้อหาเขา จะเป็นวิธีการสร้าง marker บน google map จำนวนมาก จากไฟล์
xml ที่ดึงข้อมูลมาจากฐานข้อมูล ซึ่งผลลัพธ์ที่ได้ คือจะได้จุด marker จำนวนมากบน
google map
ต่อมาเรา จะสร้าง วงกลม circle ให้กับแต่ละจุด marker โดยในที่นี้จะกำหนด รัศมี
ระยะ 50 กิโลเมตร และรูปแบบของวงกลม circle เหมือนกันทั้งหมด ยกเว้น ตำแหน่ง
จุดศูนย์กลาง ที่จะยึดตาม ตำแหน่งของจุด marker (กรณีเอาไปใช้งาน สามารถประยุกต์
ปรับเปลี่ยนได้ตามความเหมาะสม)
ตัวอย่าง
คำอธิบายแสดงในโค้ดทั้งหมด ไม่เข้าใจ กลับไปอ่านเนื้อหาที่เกี่ยวข้อง ตามลิ้งค์ด้าน
บนได้เลย
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 | <!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</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:650px; height:500px; margin:auto; margin-top:50px;}</style></head><body> <div id="map_canvas"></div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript">var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้นfunction initialize() { // ฟังก์ชันแสดงแผนที่ GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM // กำหนดจุดเริ่มต้นของแผนที่ var my_Latlng = new GGM.LatLng(13.761728449950002,100.6527900695800); // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas var my_DivObj=$("#map_canvas")[0]; // กำหนด Option ของแผนที่ var myOptions = { zoom: 7, // กำหนดขนาดการ zoom center: my_Latlng , // กำหนดจุดกึ่งกลาง mapTypeId:GGM.MapTypeId.ROADMAP, // กำหนดรูปแบบแผนที่ mapTypeControlOptions:{ // การจัดรูปแบบส่วนควบคุมประเภทแผนที่ position:GGM.ControlPosition.TOP, // จัดตำแหน่ง style:GGM.MapTypeControlStyle.DROPDOWN_MENU // จัดรูปแบบ style } }; map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map $.ajax({ url:"genMarker.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml dataType: "xml", success:function(xml){ $(xml).find('marker').each(function(){ // วนลูปดึงค่าข้อมูลมาสร้าง marker var markerID=$(this).attr("id");// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน var markerName=$(this).find("name").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน var markerLat=$(this).find("latitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน var markerLng=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน var markerLatLng=new GGM.LatLng(markerLat,markerLng); var my_Marker = new GGM.Marker({ // สร้างตัว marker position:markerLatLng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ }); // เริ่มส่วนของการส้ราง circle var mapCircle = new GGM.Circle({ // สร้างตัว circle strokeColor: "#CC0000", // สีของเส้นสัมผัส หรือสีขอบโดยรอบ strokeOpacity: 0.8, // ความโปร่งใส ของสีขอบโดยรอบ กำหนดจาก 0.0 - 0.1 strokeWeight: 1, // ความหนาของสีขอบโดยรอบ เป็นหน่วย pixel fillColor: "#FF0000", // สีของวงกลม circle fillOpacity: 0.35, // ความโปร่งใส กำหนดจาก 0.0 - 0.1 map: map, // กำหนดว่า circle นี้ใช้กับแผนที่ชื่อ instance ว่า map center: markerLatLng, // ตำแหน่งศูนย์กลางของวลกลม ในที่นี้ใช้ตำแหน่งเดียวกับ ตัว marker radius: 50000 // รัศมีวงกลม circle ทีสร้าง หน่ายเป็น เมตร }); // console.log($(this).find("id").text()); }); } }); }$(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> |
เนื้อหาที่เกี่ยวข้อง