สอบถามวิธีทำให้ Marker บางจุดหายไปโดยดึงค่าจาก database
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามวิธีทำให้ Marker บางจุดหายไปโดยดึงค่าจาก database
สอบถามวิธีทำให้ Marker บางจุดหายไปโดยดึงค่าจาก database
Copy
อยากทราบว่าพอจะมีวิธีใดที่ทำให้ Marker หายไปโดยการดึงค่ามาจาก database
หน้า friend_list.php
<script src="http://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 จะได้เรียกใช้งานได้ง่ายขึ้น var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่ var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด var my_Marker=[]; // กำหนดตัวแปรสำหรับเก็บตัว marker เป็นตัวแปร array var markerID=[]; // ประกาศเป็น arrray สำหรับเก็บค่า id var markerName=[]; // ประกาศเป็น arrray สำหรับเก็บค่า name var markerSSID=[]; // เธเธฃเธฐเธเธฒเธจเน€เธเนเธ arrray เธชเธณเธซเธฃเธฑเธเน€เธเนเธเธเนเธฒ SSID var markerPassword=[]; // เธเธฃเธฐเธเธฒเธจเน€เธเนเธ arrray เธชเธณเธซเธฃเธฑเธเน€เธเนเธเธเนเธฒ password var markerLocation=[]; // เธเธฃเธฐเธเธฒเธจเน€เธเนเธ arrray เธชเธณเธซเธฃเธฑเธเน€เธเนเธเธเนเธฒ location var markerStatus=[]; // เธเธฃเธฐเธเธฒเธจเน€เธเนเธ arrray เธชเธณเธซเธฃเธฑเธเน€เธเนเธเธเนเธฒ location var markerLat=[]; // ประกาศเป็น arrray สำหรับเก็บ latitude var markerLng=[]; // ประกาศเป็น arrray สำหรับเก็บ longitude var markerDate=[];// ประกาศเป็น arrray สำหรับเก็บ datetime var markerDiff=[];// ประกาศเป็น arrray สำหรับเก็บ diff var narkerIcons=[]; // ประกาศเป็น arrray สำหรับเก็บ icon var markerLatLng=[]; // ประกาศเป็น arrray สำหรับเก็บ พิกัดในรูปแบบของ google map var contentData=[]; // ประกาศเป็น arrray สำหรับเก็บ เนื้อหาของแต่ละ icon var image1=[]; // ประกาศเป็น arrray สำหรับเก็บ icons ในรูปแบบของ google map 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]; // กำหนดขนาดการ zoom 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("",{ // ส่งค่าตำแหน่งปัจจุบัน บันทึกลงฐานข้อมูล 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(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน markerSSID[i]=$(this).find("ssid").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน markerPassword[i]=$(this).find("password").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน markerLocation[i]=$(this).find("location").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน markerStatus[i]=$(this).find("status").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน markerLat[i]=$(this).find("latitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน markerLng[i]=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน markerDate[i]=$(this).find("lastdate").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน markerDiff[i]=$(this).find("diff").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,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป) ); // ---------------- รับค่าจาก database แล้วเปลี่ยนสี my_Marker[i] = new GGM.Marker({ // สร้างตัว marker position:markerLatLng[i], // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง icon: narkerIcons[i], // เปลี่ยนเป็น icon ตามรูปภาพที่ดึงจาก xml xml map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map title:markerName[i] // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ }); // จัดรูปแบบ เนื้อหาใน infowndow contentData[i]=markerStatus[i]+"<hr>"+"Username:"+markerName[i]+"<br/>"+"Location Name::"+markerLocation[i]+"<br/>"+"SSID Name: "+markerSSID[i]+"<br/>"+"Password:"+markerPassword[i]+"<br/>"+"LastUpdate:"+markerDate[i]+"<br/>"+"Different Time:"+markerDiff[i]+"<br/>"; 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: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize" }).appendTo("body"); }); </script>
หน้า friend_list.php
<markers> <?php $q="SELECT device_data. * , user_position. * ,member.* FROM user_position INNER JOIN device_data on device_data.user_id = user_position.user_id INNER JOIN member on user_position.user_id = member.UserID"; $qr=mysql_query($q); while($rs=mysql_fetch_array($qr)){ if($rs['LoginStatus'] == 1){ $rs['LoginStatus'] = "Online"; $rs['user_icons'] = "http://www.mx7.com/i/a1f/fyUhlN.png"; }elseif($rs['LoginStatus'] == 0){ $rs['LoginStatus'] = "Offline"; $rs['user_icons'] = "http://www.mx7.com/i/ac2/193Jur.png"; }else{ $rs['LoginStatus'] = "XXXXX"; $rs['user_icons'] = "http://www.mx7.com/i/ac2/193Jur.png"; } ?> <marker id="<?=$rs['user_position_id']?>"> <status><?php echo $rs['LoginStatus']?></status> <name><?=$rs['Username']?></name> <location><?=$rs['location_name']?></location> <ssid><?=$rs['ssid']?></ssid> <password><?php echo $rs['password']?></password> <latitude><?=$rs['user_latitude']?></latitude> <longitude><?=$rs['user_logitude']?></longitude> <lastdate><?=$rs['LastUpdate']?></lastdate> <diff><?=$rs['diff_time']?></diff> <icon><?=$rs['user_icons']?></icon> </marker> <?php } ?> </markers>
Fubfybravo
02-05-2016
15:16:55
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ