สอบถามเรื่องการเปลี่ยนสี marker โดยใช้ค่าจาก database

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

สอบถามเรื่องการเปลี่ยนสี marker โดยใช้ค่าจาก database
อยากทราบว่าจะทำอย่างไรให้ รูป marker เปลี่ยนสี โดยการรับค่าจาก database ซึ่งมี 2 ค่า คือ 0 กับ 1 ถ้าค่าเป็น 0 ให้ marker แสดงเป็นสีเขียว ถ้าค่าเป็น 1 ให้ marker แสดงเป็นสีน้ำเงิน
<?php
session_start();
if($_SESSION['UserID'] == "")
{
echo "Please Login!";
exit();
} 

mysql_connect("localhost","root","psu123@");
mysql_select_db("project_db");
$sql = "SELECT * FROM member "; /* WHERE UserID = '".$_SESSION['UserID']."' */
$query = mysql_query($sql);
$objquery = mysql_fetch_array($query); 

?><section id="main" class="container">

<header>
<h2>Free WIFI</h2>
</header>

<div class="box">
 <div id="map_canvas"></div>


<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 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(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน         
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 แล้วเปลี่ยนสี
var result = "<?php print $objquery; ?>";
if(result == 1){ 
                    my_Marker[i] = new GGM.Marker({ // สร้างตัว marker  
                        position:markerLatLng[i],  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง    
icon: "http://www.mx7.com/i/a1f/fyUhlN.png", // รูป marker สีเขียว
                        map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map 
                        title:markerName[i] // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ
                    });
}else{
my_Marker[i] = new GGM.Marker({ // สร้างตัว marker   
                        position:markerLatLng[i],  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง
icon: "http://www.mx7.com/i/ac2/193Jur.png", // รูป marker สีน้ำเงิน
                        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];
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>  
  </div>



Fubfybravo 27-03-2016 01:31:12

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

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


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


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

 ความคิดเห็นที่ 1
ซึ่งตอนนี้เหมือนกับว่า ตรง บรรทัด ที่ 110 ไม่มีการส่งค่ามา ทำให้เข้าเงื่อนไข else ทำให้ขึ้นรูป marker สีน้ำเงิน 


fubfybravo 27-03-2016 01:36
 ความคิดเห็นที่ 2
เงื่อนไขที่กำหนดสี ให้ใส่เข้าไปในไฟล์ friend_list.php แล้วดึงค่ามาใช้ใน ่javascript กำหนดสีเหมือนค่าอื่น
ในโค้ด ตำกำหนดสีหรือ icon น่าจะอยู่ในชื่อ markerIcons อยู่แล้ว


ninenik 27-03-2016






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