PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum


infowindows ข้อมูลแสดงซ้ำกันค่ะ

infowindows ข้อมูลแสดงซ้ำกันค่ะ
ดึงข้อมูลจากฐานข้อมูล แล้วแสดงข้อมูลซ้ำกันทุก 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>


โดย:  Phimchanok Nonhin IP: 223.207.249.xxx วันที่: 22-12-2016 เวลา: 02:22:30

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 8
 ขอบคุณนะคะพี่ 


โดย:  Phimchanok Nonhin IP: 223.207.249.xxx วันที่: 22-12-2016 เวลา: 14:34:47
 ความคิดเห็นที่ 7
อาจจะเป็นกับรูปแบบการใช้งานคำสั่ง query ลองดูเนื้อหานี้เป็นแนวทาง
 
การใช้งาน SQL INNER JOIN 
 
แล้วเอาคำสั่งไปทดสอบใน phpmyadmin สมมติค่าเข้าไป 
เพื่อเช็คว่าค่าที่ได้จากคิวรี่ เป้นค่าที่ถูกต้องไหม
หรือเป็นค่าที่ซ้ำกัน หรืออื่นๆ แล้วปรับให้ถูกต้องตามต้องการ


โดย:  Ninenik IP: 14.207.169.xxx วันที่: 22-12-2016
 ความคิดเห็นที่ 6


ช่วยดูโค้ด SELECT ให้หน่อยนะคะ 
เลือกมาตารางเดียว จะแสดง infowindows แบบตัวอย่างภาพบนค่ะ
      $q="SELECT *
           FROM data
           WHERE 1 AND id_data='".$_GET['placeID']."'";

แต่ถ้าใช้ SELECT สองตาราง จะแสดง infowindows ซ้ำกันค่ะ

        $q="SELECT *
           FROM data as A
           INNER JOIN gmap as B ON A.idgmap = B.idgmap
           WHERE 1 AND date(start_day) AND date(start_day)<=date_add(curdate(),interval 3 day) && date(end_day)>=curdate()
           ORDER BY A.idgmap, B.idgmap AND id_data='".$_GET['placeID']."'";


โดย:  Phimchanok Nonhin IP: 223.207.249.xxx วันที่: 22-12-2016 เวลา: 13:17:14
 ความคิดเห็นที่ 5
ต้องฝึกการ debug javascript ลองดูเนื้อหานี้เป็นแนวทาง
 
การใช้งาน console log เพื่อ debug javascript ใน chrome firefox และ ie 
 
เวลาทดสอบรันไฟล์ placeDetail.php ต้องส่งค่าตัวแปรไปตามโครงสร้างของโค้ด
 
เช่น http://localhost/placeDetail.php?placeID=ค่าที่ต้องการทดสอบ
 
ถ้ามีข้อมูลมา แสดงว่าถ้าข้อมูลส่งมาถูกต้อง ค่าก็จะถูกต้อง ปัญหาก็นาจะเป็นตอนการส่งข้อมูล
 
ต้องฝึกการ debug ตามลิ้งค์ด้านบน


โดย:  Ninenik IP: 14.207.169.xxx วันที่: 22-12-2016
 ความคิดเห็นที่ 4
มันขึ้นเหมือนเดิมอะค่ะ รูปนี้ลองรันไฟล์ placeDetail ยังไม่ได้เลือกอะไร แต่ไฟล์ xml ไม่มีปัญหาอะไรค่ะ





โดย:  Phimchanok Nonhin IP: 223.207.249.xxx วันที่: 22-12-2016 เวลา: 10:02:51
 ความคิดเห็นที่ 3
ตัวแปร markerID ที่กำหนดให้ใช้เป้นคัวของตัวแปร placeID ต้องเป็นรูปแบบ array ตามค่า
ที่กำหนดแต่เริ่ม
 
data:'placeID='+markerID,// ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล
 
ค่าจากด้านบน
 
markerID[i]=$(this).attr("id");// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน
 
ดังนั้นค่าที่ส่ง จะต้องเป็น 
 
 
data:'placeID='+markerID[i];


โดย:  Ninenik IP: 14.207.169.xxx วันที่: 22-12-2016
 ความคิดเห็นที่ 2
อันนี้ไฟล์ placeDetail.php ค่ะ

        <?php
        header("Content-type:text/html; charset=UTF-8");
        header("Cache-Control: no-store, no-cache, must-revalidate");
        header("Cache-Control: post-check=0, pre-check=0", false);
        // เชื่อมต่อกับฐานข้อมูล
        $link=mysql_connect("localhost","root","1801"); // เชื่อมต่อ Server
        mysql_select_db("activitys");  // ติดต่อฐานข้อมูล
        mysql_query("set character set utf8"); // กำหนดค่า character set ที่จะใช้แสดงผล
        // ดึงข้อมูลจากฐานข้อมูล ตามค่า id ของสถานที่ ที่ส่งมา
        $q="SELECT *
           FROM data as A
           INNER JOIN gmap as B ON A.idgmap = B.idgmap
           WHERE 1 AND date(start_day) AND date(start_day)<=date_add(curdate(),interval 3 day) && date(end_day)>=curdate()
           ORDER BY A.idgmap, B.idgmap AND id_data='".$_GET['placeID']."'";
        $qr=@mysql_query($q);
        $rs=@mysql_fetch_assoc($qr);
        ?>
        <!--จัดรูปแบบ ที่ต้องการแสดงตามต้องการ -->
        <table width="300" border="0" cellspacing="2" cellpadding="0">


          <tr>
            <td width="10">&nbsp;</td>
            <td width="264">สถานที่ : <?php echo $rs['name_map']; ?></td>
          </tr>

          <tr>
            <td>&nbsp;</td>
            <td><a class="button5 button5" href="show.php?id=<?php echo $rs['id_data']; ?>"
             target="_blank">รายละเอียดเพิ่มเติม</a></td>
          </tr>

        </table>
อันนี้ไฟล์ xml genMark.php
<?php
header("Content-type:text/xml; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
mysql_connect("localhost","root","1801") or die("Cannot connect the Server");
mysql_select_db("activitys") or die("Cannot select database");
mysql_query("set character set utf8");
echo '<?xml version="1.0" encoding="utf-8"?>';
?>
<markers>
<?php
$q=" SELECT *
   FROM data as A
   INNER JOIN gmap as B ON A.idgmap = B.idgmap
   WHERE 1 AND date(start_day) AND date(start_day)<=date_add(curdate(),interval 3 day) && date(end_day)>=curdate()
   ORDER BY A.idgmap, B.idgmap";
$qr=mysql_query($q);
while($rs=mysql_fetch_array($qr)){
?>
    <marker id="<?=$rs['id_data']?>">
        <name><?=$rs['name']?></name>
        <latitude><?=$rs['lat']?></latitude>
        <longitude><?=$rs['lng']?></longitude>
        <lastdate><?=$rs['start_day']?></lastdate>
        <icon><?=$rs['icon']?></icon>

    </marker>
<?php } ?>
</markers>


โดย:  Phimchanok Nonhin IP: 223.207.249.xxx วันที่: 22-12-2016 เวลา: 02:41:41
 ความคิดเห็นที่ 1


โดย:  Phimchanok Nonhin IP: 223.207.249.xxx วันที่: 22-12-2016 เวลา: 02:24:54