infowindow แสดงข้อมูลซ้ำกัน

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

infowindow แสดงข้อมูลซ้ำกัน
infowindow แสดงข้อมูลซ้ำกันค่ะ ไม่รู้ว่าผิดตรงไหน ก็ประยุกต์มาใช้ 
รบกวนช่วยดูโค้ดหน่อยค่ะ
ขอบคุณค่ะ


อันนี้เป็นโค้ดที่ใช้แสดง หน้าแผนที่ค่ะ มีฟอร์มการเสิร์ชด้วย

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   
.
.
.
  
<body>

<div id="form_search_data">  
      <form id="form_search_map_data" name="form_search_map_data" method="post" action="">  
        <input type="text" name="data_search" id="data_search" value="<?=$_POST['data_search']?>" style="width:300px;" />  
        <input type="submit" name="bt_search" id="bt_search" value="Search" />  
      </form>  
    </div>    
  <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; 
var GGM;  
var infowindow=[]; 
var infowindowTmp;     
var my_Marker=[];     
var markerID=[]; 
var markerName=[];   
var markerLat=[]; 
var markerLng=[]; 
var markerLatLng=[]; 
var contentData=[]; 
var obj_marker; 
function initialize() { 
    GGM=new Object(google.maps);   
    // กำหนดจุดเริ่มต้นของแผนที่  
    var my_Latlng  = new GGM.LatLng(13.730470,100.569901);  
    // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas  
    var my_DivObj=$("#map_canvas")[0];   
    // กำหนด Option ของแผนที่  
    var myOptions = {  
        zoom: 15,
        center: my_Latlng , // กำหนดจุดกึ่งกลาง  
        mapTypeId:GGM.MapTypeId.ROADMAP, 
        mapTypeControlOptions:{ 
            position:GGM.ControlPosition.TOP, 
            style:GGM.MapTypeControlStyle.DROPDOWN_MENU   
        }  
    };  
    map = new GGM.Map(my_DivObj,myOptions);
  

    
    $.ajax({  
		url:"genMarker.php", 
        type: "GET",   
        data: { data_search : "<?=$_POST['data_search']?>"}, 
        dataType: "xml",  
        success:function(xml) { 
     
            $(xml).find("marker").each(function(i){    
                    markerID[i]=$(this).attr("id");        
                    markerName[i]=$(this).find("name").text();
					markerLng[i]=$(this).find("longitude").text();
					markerLatLng[i]=new GGM.LatLng(markerLat,markerLng);
					markerLat[i]=$(this).find("latitude").text();
                    markerLat[i]=$(this).find("latitude").text();      
                    markerLng[i]=$(this).find("longitude").text();                 
                    markerLatLng[i]=new GGM.LatLng(markerLat[i],markerLng[i]);    
                    my_Marker[i] = new GGM.Marker({     
                        position:markerLatLng[i],     
                        map: map,     
                        title:markerName[i]    
						
                    });    
                    
                    //contentData[i]=markerName[i];  
                    infowindow[i] = new GGM.InfoWindow({    
					content:$.ajax({    
						url:'detail_form_info.php',
						data:'id='+markerID, 
						async:false
						}).responseText    
					});                                    
  
                    GGM.event.addListener(my_Marker[i], "click", function(){ 
                        if(infowindowTmp!=null){ 
                            infowindow[infowindowTmp].close(); 
                        }    
                        infowindow[i].open(map,my_Marker[i]); 
                        infowindowTmp=i; /    
                    });                      
                      
                  //console.log($(this).find("id").text());    
            });    
        }       
    });
	
  
}  
$(function(){  
  
    $("<script/>", {  
      "type": "text/javascript",  
      src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"  
    }).appendTo("body");      
});  
</script>    
</body>  
</html> 
 
ส่วนอันนี้เป็นหน้า genMarker.php ใช้กำหนดตำแหน่งให้ตัว marker
<?php  
include ('_connect.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);         
?>  
 <?php 
			$ResID=$_GET['id']; //******
			//echo $AccomID;
			$query="SELECT * FROM Residence WHERE 1 $q_search ORDER BY ResID  $q_limit ";
			//echo $query; 
			include('_connect.php');
			
			$result=mysql_query($query);
			$row=mysql_fetch_array($result);
			//การประกาศตัวแปร
			$ResTypeID=$row["ResTypeID"];
			$ResName=$row["ResName"];
			$ResAddress=$row["ResAddress"];
			$ResSoi=$row["ResSoi"];	
			$res_lat=$_POST["res_lat"];
 			$res_lon=$_POST["res_lon"];
			
			//$query_ResType="SELECT * FROM ResType"; //คำสั่งSelect
//			$result_ResType=mysql_query($query_ResType); //รับค่า
//			
			
			?>
<table width="300" border="0" cellspacing="2" cellpadding="0">  
  <tr>  
    <td width="10" rowspan="4">  
    <img src="http://www.thetalentjungle.com/hospitality_blog/media/1/20080216-w-hotel-residences-doha.jpg"  
     width="130" height="80">  
    </td>  
    <td width="10">&nbsp;</td>  
    <td width="264"><?=$ResName?></td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td><?=$ResAddress?></td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td>รายละเอียด</td>  
  </tr>  
  <tr>  
    <td>&nbsp;</td>  
    <td><a href="http://www.thetalentjungle.com/hospitality_blog/media/1/20080216-w-hotel-residences-doha.jpg"  
     target="_blank">ลิ้งค์อ่านเพิ่ม</a></td>  
  </tr>  
</table>


Bpsweett 110.168.229.xxx 14-02-2015 11:44:32

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

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


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


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

 ความคิดเห็นที่ 11
จัดรูปแบบไฟล์ detail_form_info.php ใหม่ แล้วก็ใช้ค่า id ที่ได้ไปเป็นเงื่อนไขในการดึงข้อมูล
จากฐานข้อมูล เหมือนดึงข้อมูลจากฐานข้อมูลมาแสดงแบบปกติ ตามค่า id ที่ส่งมา  


ninenik 1.47.208.xxx 14-02-2015
 ความคิดเห็นที่ 12
มีตัวอย่างมั้ยคะ 
ดูจาก  
https://www.ninenik.com/content.php?arti_id=328 

คือไม่รู้จะเอาค่า id ที่ส่งมา ใส่ยังไง รบกสนขอแนวทางหน่อยค่ะ





bpsweett 110.168.229.xxx 14-02-2015 19:09
 ความคิดเห็นที่ 13
ตั้งโจทย์ให้กับปัญหา แล้วไล่แก้ทีละจุต

เช่น
1 เราต้องการแสดงอะไรใน infowindow
2 แล้วข้อมูลที่แสดงเอามาจากไหน สมมติดึงมาจากฐานข้อมูล
3 เขียนคำสั่งเรียกข้อมูลมาแสดง ดูเงื่อนไขว่าต้องการค่าอะไร มาเป็นเงื่อนไขในการแสดงข้อมูล
เช่น ต้องการแสดงชื่อจังหวัด จะส่ง id ของจังหวัดมา แล้วไป query หาชื่อจังหวัดในฐานข้อมูลมาแสดง
4 ส่งค่าที่ต้องการไปให้กับไฟล์ที่จะใช้เป็น infowindow

ถ้าเรียบเรียงกระบวนตรงนี้ไม่ได้ อันนี้ก็ยาก 

ตัวแนวทาง สมมตั เรามีฐานข้อมูลชื่อ จังหวัดในประเทศทไย ตาราง province
province_id   province_name
1                      กรุงเทพฯ

เงื่อนไขเราต้องการแสดงชื่อจังหวัด จากค่า id ที่ส่งมา  ไฟล์ detail_form_info.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);         
mysql_connect("localhost","root","test") or die("Cannot connect the Server");  
mysql_select_db("test") or die("Cannot select database");  
mysql_query("set character set utf8");  

if(isset(.$_GET['id']) && $_GET['id']!=""){
    $q="SELECT * FROM province WHERE province_id='".$_GET['id']."' ";
    $qr=mysql_query($q);
    $rs=mysql_fetch_array($qr);
?>
<table>
    <tr>
        <td><?=$rs['province_name']?></td>
    </tr>
</table>

<?php
} 
?>


เมื่อเงื่อนของไฟล์ detail_form_info.php  คือรับค่า id ของจังหวัดมา แล้วไปค้นหาข้อมูลมาแสดง
ดังนั้นไฟล์ ที่เรียกใช้ ajax ก็ต้องส่งค่า id ของจังหวัดไป

อ้างอิงโค้ดที่แนะนำด้านล่าง การส่งค่า id จังหวัดไป

//contentData[i]=markerName[i];    
                    infowindow[i] = new GGM.InfoWindow({      
                    content:$.ajax({      
                        url:'detail_form_info.php',  
                        data:'id='+markerID[i],   
                        async:false  
                        }).responseText      
                    });    


เงื่อนไขมีเท่านี้ คงต้องทำความเข้าไปเอง 



ninenik 1.47.82.xxx 14-02-2015
 ความคิดเห็นที่ 14
ขอบคุณมากๆเลยค่ะ


bpsweett 110.168.229.xxx 15-02-2015 00:42






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