infowindows ข้อมูลแสดงซ้ำกันค่ะ
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา infowindows ข้อมูลแสดงซ้ำกันค่ะ
infowindows ข้อมูลแสดงซ้ำกันค่ะ
Copy
ดึงข้อมูลจากฐานข้อมูล แล้วแสดงข้อมูลซ้ำกันทุก infowindows ค่ะ


<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 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(16.744001, 100.194995); // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas var my_DivObj=$("#map_canvas")[0]; // กำหนด Option ของแผนที่ var myOptions = { zoom: 15, // กำหนดขนาดการ 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 // ใช้ ajax ดึงค่าจาก xml มาใช้งาน $.ajax({ url:"genMark.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 // }); infowindow[i] = new GGM.InfoWindow({ content:$.ajax({ url:'placeDetail.php',//ใช้ ajax ใน jQuery ดึงข้อมูล data:'placeID='+markerID,// ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล async:false }).responseText }); 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: "https://maps.googleapis.com/maps/api/js?key=AIzaSyB16sGmIekuGIvYOfNoW9T44377IU2d2Es & sensor=false&language=th&callback=initialize" }).appendTo("body"); }); </script>

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