จากเนื้อหาในตอนที่ 4 เมื่อเราสามารถแสดง icons ระบุตำแหน่ง
ของเพื่อน ใน google map ได้แล้ว ต่อไปมาดูว่า ต้องการให้คลิก แต่ละ icons
แล้วแสดงข้อมูลของแต่ละคน ที่เราเก็บค่ามาแล้ว เช่น ชื่อ วันที่เวลา พิกัด
โดยแสดงเป็นแบบ infowindow จะทำได้อย่างไร
แต่เนื่องจากเนื้อหาในตอนที่ 4
แสดงพิกัด จาก xml ไฟล์ ใน google map ตอนที่ 4
https://www.ninenik.com/content.php?arti_id=482 via @ninenik
เราต้องการเพียงแสดง ข้อมูล icons พิกัด ตำแหน่งเพื่อนในแผนที่เท่านั้น
จึงไม่ได้กำหนด ตัวแปรระบุ icons ของแต่ละตัว เป็น array จึงให้ไม่สามารถ
จัดการ icons แต่ละรายการได้
ดังนั้นในตอนที่ 5 จะมีการประยุกต์ จากเนื้อหาในตอนที่ 4
โดยจะมีการประกาศตัวแปร แต่ละตัวเป็นแบบ array เป็นประมาณนี้
1 2 3 4 5 6 7 8 9 10 11 12 | var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่ var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array var markerID=[]; // ประกาศเป็น arrray สำหรับเก็บค่า idvar markerName=[]; // ประกาศเป็น arrray สำหรับเก็บค่า namevar markerLat=[]; // ประกาศเป็น arrray สำหรับเก็บ latitudevar markerLng=[]; // ประกาศเป็น arrray สำหรับเก็บ longitudevar markerDate=[]; // ประกาศเป็น arrray สำหรับเก็บ datetimevar narkerIcons=[]; // ประกาศเป็น arrray สำหรับเก็บ iconvar markerLatLng=[]; // ประกาศเป็น arrray สำหรับเก็บ พิกัดในรูปแบบของ google mapvar contentData=[]; // ประกาศเป็น arrray สำหรับเก็บ เนื้อหาของแต่ละ iconvar image1=[]; // ประกาศเป็น arrray สำหรับเก็บ icons ในรูปแบบของ google map |
และตัวแปรที่มีการกำหนดเป็น array แล้ว จะไม่มีการกำหนด var นำหน้าอีก
โดยจะใช้รูปแบบ เช่น my_Marker[i] เพื่อระบุ แต่ละรายการ เป็นต้น
การปรับจากเนื้อหา ตอนที่ 4 จะเป็นการเปลี่ยนแค่ตัวแปร
และมีการเพิ่มโค้ด
- สร้างเนื้อหา infowindow ของแต่ละ icon
- การคลิก แต่ละรายการ icons และแสดง
ตัวอย่าง ทดสอบโดยการ คลิกที่ icon แต่ละตัว
ไฟล์ แผนที่ ตัวอย่างกำหนดชื่อเป็น my_friend_location.php
คำอธิบายแสดงในโค้ด
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 142 143 144 145 146 147 148 149 | <!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 - Friend 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:650px; height:500px; margin:auto; margin-top:50px;}</style></head><body> <div id="map_canvas"></div> <script type="text/javascript">var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้นvar infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่ var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array var markerID=[]; // ประกาศเป็น arrray สำหรับเก็บค่า idvar markerName=[]; // ประกาศเป็น arrray สำหรับเก็บค่า namevar markerLat=[]; // ประกาศเป็น arrray สำหรับเก็บ latitudevar markerLng=[]; // ประกาศเป็น arrray สำหรับเก็บ longitudevar markerDate=[]; // ประกาศเป็น arrray สำหรับเก็บ datetimevar narkerIcons=[]; // ประกาศเป็น arrray สำหรับเก็บ iconvar markerLatLng=[]; // ประกาศเป็น arrray สำหรับเก็บ พิกัดในรูปแบบของ google mapvar contentData=[]; // ประกาศเป็น arrray สำหรับเก็บ เนื้อหาของแต่ละ iconvar image1=[]; // ประกาศเป็น arrray สำหรับเก็บ icons ในรูปแบบของ google mapfunction 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: 12, // กำหนดขนาดการ 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 // เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(function(position){ var myPosition_lat=position.coords.latitude; // เก็บค่าตำแหน่ง latitude ปัจจุบัน var myPosition_lon=position.coords.longitude; // เก็บค่าตำแหน่ง longitude ปัจจุบัน // สรัาง LatLng ตำแหน่ง สำหรับ google map var pos = new GGM.LatLng(position.coords.latitude,position.coords.longitude); map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน map.setCenter(pos); // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน $.post("save_location.php",{ // ส่งค่าตำแหน่งปัจจุบัน บันทึกลงฐานข้อมูล myPosition_lat:myPosition_lat, // ส่งค่า latitude myPosition_lon:myPosition_lon // ส่งค่า longitude },function(){ map.panTo(pos); // เลื่อนแผนที่ไปตำแหน่งปัจจุบัน map.setCenter(pos); // กำหนดจุดกลางของแผนที่เป็น ตำแหน่งปัจจุบัน }); },function() { // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน }); }else{ // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง } // ใช้ ajax ดึงค่าจาก xml มาใช้งาน $.ajax({ url:"friend_list.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml dataType: "xml", success:function(xml){ $(xml).find("marker").each(function(i){ // วนลูปดึงค่าข้อมูลมาสร้าง marker markerID[i]=$(this).attr("id");// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน markerName[i]=$(this).find("name").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน markerLat[i]=$(this).find("latitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน markerLng[i]=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน markerDate[i]=$(this).find("lastdate").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน narkerIcons[i]=$(this).find("icon").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน markerLatLng[i]=new GGM.LatLng(markerLat[i],markerLng[i]); image1[i] = new GGM.MarkerImage(narkerIcons[i], // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้ new GGM.Size(50, 60), //กำหนดความกว้าง สูงของ icons new GGM.Point(0,0), // จุดเริ่มต้นของรูปภาพ ใช้ 0,0 new GGM.Point(25, 60) // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป) ); my_Marker[i] = new GGM.Marker({ // สร้างตัว marker position:markerLatLng[i], // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง icon: image1[i], // เปลี่ยนเป็น icon ตามรูปภาพที่ดึงจาก xml map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map title:markerName[i] // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ }); // จัดรูปแบบ เนื้อหาใน infowndow contentData[i]=markerName[i]+"<br/>"+markerDate[i]+"<br/>"+markerLat[i]+","+markerLng[i]; infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array content: contentData[i] // แสดงเนื้อหา ของแต่ละ icons }); GGM.event.addListener(my_Marker[i], "click", function(){ // เมื่อคลิกตัว marker แต่ละตัว if(infowindowTmp!=null){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่ infowindow[infowindowTmp].close(); // ถ้ามีให้ปิด infowindow ที่เปิดอยู่ } infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน }); // 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> |
เนื้อหาที่เกี่ยวข้อง