สอบถามเรื่องการเปลี่ยนสี marker โดยใช้ค่าจาก database
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา สอบถามเรื่องการเปลี่ยนสี marker โดยใช้ค่าจาก database
สอบถามเรื่องการเปลี่ยนสี marker โดยใช้ค่าจาก database
Copy
อยากทราบว่าจะทำอย่างไรให้ รูป 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
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ