PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


ต้องทำยังไงครับ คลิกลิงค์หน้าใน infowindow ของหมุดที่ต้องการแล้ว แล้วมันไม่แสดงข้อมูลของหมุดนั้นๆในอีกหน้าครับ

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

ต้องทำยังไงครับ คลิกลิงค์หน้าใน infowindow ของหมุดที่ต้องการแล้ว แล้วมันไม่แสดงข้อมูลของหมุดนั้นๆในอีกหน้าครับ
อยากทราบครับว่าต้องทำไง ตอนนี้คลิกที่ลิงค์ใน infowindow แล้ว มายังหน้าที่เราต้องการแล้ว แต่ข้อมูลไม่มาด้วยคับ อยากให้ข้อมูลของหมุดที่เราคลิกมาแสดงยังหน้าที่เราต้องการด้วย 

อันนี้เป็นหน้าหลักนะคับ ตรง infowindow พอคลิกที่ เพิ่มเติม ก็จะลิงค์ไปอีกหน้านึง แต่พอลิงค์ไปแล้วกลับไม่ขึ้นข้อมูลเลยครับ

ส่วนของโค๊ดแสดงแมพ และตรง infowindow นะครับ
<!--ส่วน form.ข้อมูลร้านอาหาร -->
					<!--google map api-->
						&nbsp;<font color="#36648B">แผนที่ร้านอาหารทั้งหมด :</font><br><br>
						
						<div id="map_canvas"></div>
						<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 markerDistrict=[];  // ประกาศเป็น arrray สำหรับเก็บค่า district
							var markerTopen=[];  // ประกาศเป็น arrray สำหรับเก็บค่า Topen
							var markerTclose=[];  // ประกาศเป็น arrray สำหรับเก็บค่า Tclose
							var markerStatus=[];  // ประกาศเป็น arrray สำหรับเก็บค่า status
							var markerLat=[]; // ประกาศเป็น arrray สำหรับเก็บ latitude
							var markerLng=[]; // ประกาศเป็น arrray สำหรับเก็บ longitude
							var markerLatLng=[]; // ประกาศเป็น arrray สำหรับเก็บ พิกัดในรูปแบบของ google map
							var contentData=[]; // ประกาศเป็น arrray สำหรับเก็บ เนื้อหาของแต่ละร้าน
							function initialize() { // ฟังก์ชันแสดงแผนที่
								GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
								// กำหนดจุดเริ่มต้นของแผนที่
								var my_Latlng  = new GGM.LatLng(13.743053546032764,102.33232498168945);
								// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
								var my_DivObj=$("#map_canvas")[0]; 
								// กำหนด Option ของแผนที่
								var myOptions = {
									zoom: 9, // กำหนดขนาดการ 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:"json.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(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน      
												markerDistrict[i]=$(this).find("distname").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน      
												markerTopen[i]=$(this).find("topen").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน      
												markerTclose[i]=$(this).find("tclose").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน      
												markerStatus[i]=$(this).find("status").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({ // สร้างตัว marker  
													position:markerLatLng[i],  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
													map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map  
													title:markerName[i] // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
												});  
												 
												// จัดรูปแบบ เนื้อหาใน infowndow
												contentData[i]="ชื่อร้าน : "+markerName[i]+"<br>อำเภอที่ตั้ง : "+markerDistrict[i]+"<br/>เวลาเปิด-ปิด : "+markerTopen[i]+" - "+markerTclose[i]+" น.<br/>สถานะ : "+markerStatus[i]+"<br>"+"<a href=./infood.php?food_id=markerID[i]>เพิ่มเติม</a>";
												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(){
								$("<script/>", {
								  "type": "text/javascript",
								  src: "//maps.google.com/maps/api/js?key=&language=th&region=TH&v=3.2&sensor=false&callback=initialize" 
								}).appendTo("body");    
							});
						</script> 
						<!--google map api-->
ตรงส่วนของ contentData ผมลองแก้ในส่วนของลิงค์
        <a href=./infood.php?food_id=markerID[i]>เพิ่มเติม</a> 
แล้วมันกลายเป็นไม่มีข้อมูลแสดงข้อมาเลยครับ

อันนี้เป็นหน้าที่ลิงค์ไปนะครับ ซึ่งมันไม่แสดงข้อมูลอะไรเลยครับ
<?php
include(".db.php");
date_default_timezone_set("asia/bangkok");
?>
<?php
// 3 บรรทัดนี้้ สำหรับป้องกันการ cache จำค่าเก่าตอนทพสอบ คงไว้ หรือเอาออกได้
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);   
?>
<html><head>
			<title>ข้อมูลร้านอาหาร</title>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
            <script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
            <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
            <link href="news.css" rel="stylesheet" type="text/css">
            <link rel="shortcut icon" href="icon.png">
			<!--ปุ่ม scroll-->
			<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
			<script type="text/javascript" src="scrolltopcontrol.js"></script>
        </head><body>
                <!--ส่วนหัวข่าวสาร-->
                <div class="container">
					<div class="row">
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">&nbsp;&nbsp;
							<a href="./food.php" class="btn btn-sm btn-primary"><i class="fa fa-fw fa-lg fa-angle-left"></i>ย้อนกลับ</a>
						</div>
					</div>
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        <h4 class="text-center text-primary">ข้อมูลร้านอาหาร</h4>
                        <hr>
                    </div>
                </div>
                <!--เนื้อหาข่าวสาร-->
				
					<?php 
						$food_id=$_GET['food_id'];
						$sql = "select * from food left join district on district.district_id = food.district_id where food_id='$food_id';";
						//echo " เช็คคำสั่ง ".$sql;
						
						$result = $mysqli->query($sql) or die($mysqli->error.__LINE__);
						while($row = mysqli_fetch_array($result)) { 
							$food_id=$row['food_id'];
							$food_name=$row['food_name'];
							$food_data=$row['food_data'];				
							$food_type=$row['food_type'];				
							$food_locat=$row['food_locat'];				
							$food_topen=$row['food_topen'];				
							$food_tclose=$row['food_tclose'];				
							$food_rate=$row['food_rate'];				
							$food_status=$row['food_status'];				
							$food_lat=$row['food_lat'];				
							$food_long=$row['food_long'];				
							$food_zoom=$row['food_zoom'];				
							$food_image1=$row['food_image'];
							$food_image2=$row['food_image2'];
							$food_image3=$row['food_image3'];
							$food_image4=$row['food_image4'];
							$food_image5=$row['food_image5'];
							$food_linkweb=$row['food_linkweb'];
							$food_showdate=$row['food_showdate'];
							$district_id=$row['district_id'];
							$district_name=$row['district_name'];
											
					?>        
					
					<table class="table">
						<div class="container">
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <h4><i class="fa fa-fw fa-cutlery"></i>
                                        <?php echo $food_name;?>
                                    </h4>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <p class="text-justify text-primary">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <?php echo $food_data;?>
                                    </p>
                                </div>
                            </div>
							<div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <p class="text-justify text-primary">ประเภทร้านอาหาร :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <?php echo $food_type;?>
                                    </p>
                                </div>
                            </div>
							<div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <p class="text-justify text-primary">อำเภอที่ตั้งร้าน :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <?php echo $district_name;?>
                                    </p>
                                </div>
                            </div>
							<div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <p class="text-justify text-primary">ที่อยู่ร้าน หรือสถานที่ใกล้เคียงร้าน :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <?php echo $food_locat;?>
                                    </p>
                                </div>
                            </div>
							<div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <p class="text-justify text-primary">ช่วงเวลาเปิด-ปิด :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <?php echo $food_topen;?>น.&nbsp;-&nbsp;<?php echo $food_tclose;?>น.
                                    </p>
                                </div>
                            </div>
							<div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <p class="text-justify text-primary">ช่วงราคา :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <?php echo $food_rate;?>&nbsp;บาท
                                    </p>
                                </div>
                            </div>
							<div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                    <p class="text-justify text-primary">สถานะร้านอาหาร :&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <?php echo $food_status;?>
                                    </p>
                                </div>
                            </div>
						<!--google map api-->
						<br>&nbsp;<font color="#36648B">ปักหมุดร้านบนแผนที่ :</font><br>	
						
						<div id="map_canvas"></div>
							<br>&nbsp;<font color="#36648B">Latitude :</font> 
								<input class="form-control" name="food_lat" type="text" id="food_lat" value="<?php echo $food_oldlat;?>">  
							<br>&nbsp;<font color="#36648B">Longitude :</font>   
								<input class="form-control" name="food_long" type="text" id="food_long" value="<?php echo $food_oldlong;?>">  
							<br>&nbsp;<font color="#36648B">Zoom :</font>
								<input class="form-control" name="food_zoom" type="text" id="food_zoom" value="<?php echo $food_oldzoom;?>">  
						
						<script type="text/javascript">
							var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
							var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น

							// ฟังก์ชันสำหรับสร้างแผนที่ ใน tab ที่ 2 ใช้ชื่อว่า initialize()
							function initialize() { // ฟังก์ชันแสดงแผนที่  
								GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM  
								// กำหนดจุดเริ่มต้นของแผนที่  
								var my_Latlng  = new GGM.LatLng(<?php echo $food_lat;?>,<?php echo $food_long;?>);  
								var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง  
								// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas  
								var my_DivObj=$("#map_canvas")[0];   
								// กำหนด Option ของแผนที่  
								var myOptions = {  
									zoom: <?php echo $food_zoom;?>, // กำหนดขนาดการ zoom  
									center: my_Latlng , // กำหนดจุดกึ่งกลาง  
									mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่  
								};  
								map = new GGM.Map(my_DivObj,myOptions);// สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map  
								   
								var my_Marker = new GGM.Marker({ // สร้างตัว marker  
									position: my_Latlng,  // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง  
									map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map   
									title:"ตำแหน่งร้านอาหารที่ท่านเลือก" // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ  
								});  
							}
							$(function(){
								$("<script/>", {  
								  "type": "text/javascript",  
								  src: "//maps.google.com/maps/api/js?key=&language=th&region=TH&v=3.2&sensor=true&callback=initialize" 
								}).appendTo("body");        
							});
						</script>
						<!--google map api-->
							<div class="row">
								<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
									<h5>
										<i class="fa fa-fw fa-external-link"></i>แหล่งที่มา : 
									</h5>
									<?php if($food_linkweb==""){?>
										<p class="text-primary">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -</p>
									<?php }?>
									<?php if($food_linkweb!=""){?>
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="text-primary" target="_blank" href="<?php echo $food_linkweb;?>"><?php echo $food_linkweb;?></a>
									<?php }?>
                            <br><br>
                            <div class="row">
								<div class="col-lg-2 col-md-2 hidden-sm hidden-xs"></div>
                                <div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
								<?php if($food_image1==""){?>
									
								<?php }?>
								<?php if($food_image1!=""){?>
                                    <img src="fileimagefood/<?php echo $food_image1;?>" class="center-block img-responsive img-rounded" >
								<?php }?>
								<?php if($food_image2==""){?>
									
								<?php }?>
								<?php if($food_image2!=""){?>
									<br>
									<img src="fileimagefood/<?php echo $food_image2;?>" class="center-block img-responsive img-rounded" >
								<?php }?>
								<?php if($food_image3==""){?>
									
								<?php }?>
								<?php if($food_image3!=""){?>
									<br>
									<img src="fileimagefood/<?php echo $food_image3;?>" class="center-block img-responsive img-rounded" >
								<?php }?>
								<?php if($food_image4==""){?>
									
								<?php }?>
								<?php if($food_image4!=""){?>
									<br>
									<img src="fileimagefood/<?php echo $food_image4;?>" class="center-block img-responsive img-rounded" >
								<?php }?>
								<?php if($food_image5==""){?>
									
								<?php }?>
								<?php if($food_image5!=""){?>
									<br>
									<img src="fileimagefood/<?php echo $food_image5;?>" class="center-block img-responsive img-rounded" >
								<?php }?>
								</div>
								<div class="col-lg-2 col-md-2 hidden-sm hidden-xs"></div>
							</div><hr>
                        </div>
						<?php
						}
						$mysqli->close();
						?>
                    </table>
					
		<!--ส่วนท้าย-->
		<?php include( "./footer.php");?>
</body>
</html>




โดย:  ดีม.ดีม.ดีม. ดรีม.ทีม. IP: 223.24.181.xxx วันที่: 12-01-2018 เวลา: 23:45:48

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 1
น่าจะอยู่ในไฟล์ contentData กำหนดให้ส่งค่าอาจจะไม่ถูกต้อง ถ้าส่งค่าถูกต้อง ต้องมี id ส่งไปด้วย
แต่ถ้าส่งค่าไปใน url ถูกต้อง แล้วไฟล์ที่แสดงข้อมูล ไม่มีอะไรออกมา ก็ต้องเช็คที่การคิวรี่ การรับค่าที่ไฟล์แสดงข้อมูล
ต้องลองไล่ดู


โดย:  Ninenik IP: 223.24.181.xxx วันที่: 12-01-2018
 ความคิดเห็นที่ 2
ผมลองเช็คดูในส่วน contentdata โดยเพิ่มโค๊ดแสดงไอดีเข้าไป ไอดีมานะครับ ตามรูป

ใน infowindow ก็แสดงค่าไอดีถูกต้องนะครับ ตามรูป


แต่ผมเขียนตรง <a href='./infood.php?food_id=marker[i]'>เพิิ่มเติม</a>
ค่าไอดีไม่มาให้ครับ รบกวนช่วยหน่อยครับ 


โดย:  ดีม.ดีม.ดีม. ดรีม.ทีม. IP: 58.10.52.xxx วันที่: 14-01-2018 เวลา: 12:06:31
 ความคิดเห็นที่ 3
น่าจะประมาณนี้

<a href=\'./infood.php?food_id="+marker[i]+"\'>



โดย:  Ninenik IP: 223.24.160.xxx วันที่: 14-01-2018
 ความคิดเห็นที่ 4
ได้แล้วครับ ขอบคุณครับ  


โดย:  ดีม.ดีม.ดีม. ดรีม.ทีม. IP: 58.10.52.xxx วันที่: 14-01-2018 เวลา: 22:41:42