ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทางในการสร้าง overlays รูปแบบวงกลม
ในแผนที่ google map v3 โดยกำหนด ภายใต้เงื่อนไขอย่างง่าย
คือ ต้องการแสดงบริเวณโดยรอบ พิกัดที่กำหนด เป็นระยะห่างรัศมี 1 กิโลเมตร
สามารถ ไปประยุกต์ เพิ่มเติมได้ตามความเหมาะสม
ตัวอย่าง
คำอธิบายแสดงในโค้ดแบบเต็มด้านล่าง
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 | <!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 { width:550px; height:400px; margin:auto; margin-top:100px;}</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 mapCircle; // กำหนดตัวแปร สำหรับ เก็บ circle var my_Marker; // กำหนดตัวแปรสำหรับเก็บตัว markervar infowindow; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่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); 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 // เริ่มส่วนของการสร้าง marker my_Marker = new GGM.Marker({ // สร้างตัว marker position: my_Latlng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map// draggable:true, // กำหนดให้สามารถลากตัว marker นี้ได้// title:"คลิกเพื่อดูรายละเอียดของสถานที่!" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ }); // เริ่มส่วนของการส้ราง circle 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: my_Latlng, // ตำแหน่งศูนย์กลางของวลกลม ในที่นี้ใช้ตำแหน่งเดียวกับ ศูนย์กลางแผนที่ radius: 1000 // รัศมีวงกลม circle ทีสร้าง หน่ายเป็น เมตร }); // กำหนด event ให้กับตัวแผนที่ เมื่อมีการเปลี่ยนแปลงการ zoom GGM.event.addListener(map, "zoom_changed", function() {// $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value });}$(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> |
เนื้อหาที่เกี่ยวข้อง