สอบถามวิธีทำให้ Marker บางจุดหายไปโดยดึงค่าจาก database

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามวิธีทำให้ Marker บางจุดหายไปโดยดึงค่าจาก database

สอบถามวิธีทำให้ Marker บางจุดหายไปโดยดึงค่าจาก database
อยากทราบว่าพอจะมีวิธีใดที่ทำให้ Marker หายไปโดยการดึงค่ามาจาก database 
<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

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )

 ความคิดเห็นที่ 1
ถ้าไม่แสดงแต่แรก ก็ใช้วิธีตอนดึงจากฐานข้อมูล ก็เลือกว่าไม่ต้องดึงรายการไหนมาแสดง
ส่วนถ้าดึงจากฐานข้อมูลแล้ว แต่ไม่ต้องการแสดงบางอิน
ให้สร้างสถานะเงื่อนไขในฐานข้อมูล แล้วกำหนดว่าแสดงหรือไม่ เช่น 0 หรือ 1
แล้วส่งค่ามากับ xml แล้วกำหนด เป็น if else แสดงหรือไม่ตามต้องการ


ninenik 02-05-2016






เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ