ต้องทำยังไงครับ คลิกลิงค์หน้าใน infowindow ของหมุดที่ต้องการแล้ว แล้วมันไม่แสดงข้อมูลของหมุดนั้นๆในอีกหน้าครับ
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ต้องทำยังไงครับ คลิกลิงค์หน้าใน infowindow ของหมุดที่ต้องการแล้ว แล้วมันไม่แสดงข้อมูลของหมุดนั้นๆในอีกหน้าครับ
ต้องทำยังไงครับ คลิกลิงค์หน้าใน infowindow ของหมุดที่ต้องการแล้ว แล้วมันไม่แสดงข้อมูลของหมุดนั้นๆในอีกหน้าครับ
Copy
อยากทราบครับว่าต้องทำไง ตอนนี้คลิกที่ลิงค์ใน infowindow แล้ว มายังหน้าที่เราต้องการแล้ว แต่ข้อมูลไม่มาด้วยคับ อยากให้ข้อมูลของหมุดที่เราคลิกมาแสดงยังหน้าที่เราต้องการด้วย
อันนี้เป็นหน้าหลักนะคับ ตรง infowindow พอคลิกที่ เพิ่มเติม ก็จะลิงค์ไปอีกหน้านึง แต่พอลิงค์ไปแล้วกลับไม่ขึ้นข้อมูลเลยครับ
![]()
<a href=./infood.php?food_id=markerID[i]>เพิ่มเติม</a>
แล้วมันกลายเป็นไม่มีข้อมูลแสดงข้อมาเลยครับ
อันนี้เป็นหน้าที่ลิงค์ไปนะครับ ซึ่งมันไม่แสดงข้อมูลอะไรเลยครับ
อันนี้เป็นหน้าหลักนะคับ ตรง infowindow พอคลิกที่ เพิ่มเติม ก็จะลิงค์ไปอีกหน้านึง แต่พอลิงค์ไปแล้วกลับไม่ขึ้นข้อมูลเลยครับ
ส่วนของโค๊ดแสดงแมพ และตรง infowindow นะครับ
<!--ส่วน form.ข้อมูลร้านอาหาร -->
<!--google map api-->
<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®ion=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">
<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">
<?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">ประเภทร้านอาหาร :
<?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">อำเภอที่ตั้งร้าน :
<?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">ที่อยู่ร้าน หรือสถานที่ใกล้เคียงร้าน :
<?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">ช่วงเวลาเปิด-ปิด :
<?php echo $food_topen;?>น. - <?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">ช่วงราคา :
<?php echo $food_rate;?> บาท
</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">สถานะร้านอาหาร :
<?php echo $food_status;?>
</p>
</div>
</div>
<!--google map api-->
<br> <font color="#36648B">ปักหมุดร้านบนแผนที่ :</font><br>
<div id="map_canvas"></div>
<br> <font color="#36648B">Latitude :</font>
<input class="form-control" name="food_lat" type="text" id="food_lat" value="<?php echo $food_oldlat;?>">
<br> <font color="#36648B">Longitude :</font>
<input class="form-control" name="food_long" type="text" id="food_long" value="<?php echo $food_oldlong;?>">
<br> <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®ion=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"> -</p>
<?php }?>
<?php if($food_linkweb!=""){?>
<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>
ดีม.ดีม.ดีม. ดรีม.ทีม.
12-01-2018
23:45:48
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
สนับสนุนเว็บไซต์เรา จ่ายด้วย 
Author Ninenik Narkdee
2024 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ