ค้นหา marker ในแผนที่จากฐานข้อมูล แล้วพอกดดู infowindow ตรง marker มันแสดงแค่อันเดียวจากข้อมูลในฐานข้อมูลค่ะ
ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา ค้นหา marker ในแผนที่จากฐานข้อมูล แล้วพอกดดู infowindow ตรง marker มันแสดงแค่อันเดียวจากข้อมูลในฐานข้อมูลค่ะ
ค้นหา marker ในแผนที่จากฐานข้อมูล แล้วพอกดดู infowindow ตรง marker มันแสดงแค่อันเดียวจากข้อมูลในฐานข้อมูลค่ะ
Copy
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้ var image1; // ตัวแปรสำหรับเก็บรูป icons กำหนดเอง var infowindow=[]; // กำหนดตัวแปรสำหรับเก็บตัว popup แสดงรายละเอียดสถานที่ var infowindowTmp; // กำหนดตัวแปรสำหรับเก็บลำดับของ infowindow ที่เปิดล่าสุด var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น var my_Marker=[]; // กำหนดตัวแปร my_Marker แบบ array เพื่อเก็บค่าการกำหนดตำแหน่ง ปักหมุด var newCenterLatLon; // ำหนดตัวแปร newCenterLatLon เพื่อเก็บค้า หากค้นหาแล้วเจอสถานที่เดียว function initialize() { // ฟังก์ชันแสดงแผนที่ GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM // กำหนดจุดเริ่มต้นของแผนที่ var my_Latlng = new GGM.LatLng(16.782495,100.218922); // กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas var my_DivObj=$("#map_canvas")[0]; // กำหนด Option ของแผนที่ var myOptions = { zoom: 10, // กำหนดขนาดการ 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 } // เรียกใช้คุณสมบัติ ระบุตำแหน่ง ของ html 5 ถ้ามี if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(function(position){ var pos = new GGM.LatLng(position.coords.latitude,position.coords.longitude); /* var infowindow = new GGM.InfoWindow({ map: map, position: pos, content: "คุณอยู่ที่นี่." });*/ image1 = new GGM.MarkerImage("https://www.ninenik.com/demo/photo_avatar.php", // url ภาพ ใส่แบบเต็ม หรือแบบ path ก็ได้ new GGM.Size(50, 60), //กำหนดความกว้าง สูงของ icons new GGM.Point(0,0), // จุดเริ่มต้นของรูปภาพ ใช้ 0,0 new GGM.Point(25, 60) // จุดปลายของพิกัดเทียบกับรูป ปกติ (0,ความสูงของรูป) หรือ (ครึ่งหนึ่งความกว้างของรูป,ความสูงของรูป) ); var my_Marker = new GGM.Marker({ // สร้างตัว marker position: pos, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง icon: image1, map: map // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map }); var my_Point = my_Marker.getPosition(); // หาตำแหน่งของตัว marker เมื่อกดลากแล้วปล่อย map.panTo(my_Point); // ให้แผนที่แสดงไปที่ตัว marker // $("#lat_value").val(my_Point.lat()); // เอาค่า latitude ตัว marker แสดงใน textbox id=lat_value // $("#lon_value").val(my_Point.lng()); // เอาค่า longitude ตัว marker แสดงใน textbox id=lon_value // $("#zoom_value").val(map.getZoom()); // เอาขนาด zoom ของแผนที่แสดงใน textbox id=zoom_value map.setCenter(pos); },function() { // คำสั่งทำงาน ถ้า ระบบระบุตำแหน่ง geolocation ผิดพลาด หรือไม่ทำงาน }); }else{ // คำสั่งทำงาน ถ้า บราวเซอร์ ไม่สนับสนุน ระบุตำแหน่ง } $(function(){ $("#data_search").keyup(function(e){ if(e.keyCode==13){ // เมื่อกดปุ่ม enter ในช่องค้นหา search_map(); // ให้เรียกใช้ฟังก์ชั่นการค้นหา แบบ ajax } }); }); function search_map(){ // ฟังก์ชั่นการค้นหา แบบ ajax var i_marker=0; // กำหนดตัวแปร ไว้นับจำนวน marker หรือปักหมุด var data_found=0;// กำหนดตัวแปร ไว้นับจำนวนรายการที่ค้นจอ for(i=0;i<my_Marker.length;i++){ // วนหลูปเพื่อยกเลือก ตัว marker ทั้งหมด หรือล้างค่า ก่อนกำหนดใหม่ my_Marker[i].setMap(null);// คำสั่งในการยกเลิกตัว marker } $.ajax({ url:"genMarker2.php", // ใช้ ajax ใน jQuery เรียกใช้ไฟล์ xml type: "GET", // ส่งค่าข้อมูลแบบ POST ไปที่ไฟล์ genMarker.php data: { data_search :$("#data_search").val()}, //// รับค่า จากการ input text ชื่อ id เท่ากับ data_search dataType: "xml", success:function(xml){ // console.log(xml); $(xml).find('marker').each(function(){ // วนลูปดึงค่าข้อมูลมาสร้าง marker var markerID=$(this).attr("id");// นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน var markerName=$(this).find("name").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน var markerLat=$(this).find("latitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน var markerLng=$(this).find("longitude").text(); // นำค่าต่างๆ มาเก็บไว้ในตัวแปรไว้ใช้งาน var markerLatLng=new GGM.LatLng(markerLat,markerLng); my_Marker[i_marker] = new GGM.Marker({ // สร้างตัว marker position:markerLatLng, // กำหนดไว้ที่เดียวกับจุดกึ่งกลาง map: map, // กำหนดว่า marker นี้ใช้กับแผนที่ชื่อ instance ว่า map title:markerName // แสดง title เมื่อเอาเมาส์มาอยู่เหนือ }); // กรณีตัวอย่าง ดึง title ของตัว marker มาแสดง //infowindow[i] = new GGM.InfoWindow({// สร้าง infowindow ของแต่ละ marker เป็นแบบ array //content: my_Marker[i].getTitle() // ดึง title ในตัว marker มาแสดงใน infowindow //}); // กรณีนำไปประยุกต์ ดึงข้อมูลจากฐานข้อมูลมาแสดง infowindow[i] = new GGM.InfoWindow({ content:$.ajax({ url:'placeDetail2.php',//ใช้ ajax ใน jQuery ดึงข้อมูล data:{placeID :markerID},// ส่งค่าตัวแปร ไปดึงข้อมูลจากฐานข้อมูล async:false }).responseText }); GGM.event.addListener(my_Marker[i], 'click', function(){ // เมื่อคลิกตัว marker แต่ละตัว if(infowindowTmp){ // ให้ตรวจสอบว่ามี infowindow ตัวไหนเปิดอยู่หรือไม่ infowindow[infowindowTmp].close(); // ถ้ามีให้ปิด infowindow ที่เปิดอยู่ } infowindow[i].open(map,my_Marker[i]); // แสดง infowindow ของตัว marker ที่คลิก infowindowTmp=i; // เก็บ infowindow ที่เปิดไว้อ้างอิงใช้งาน }); i_marker++;// เพิ่มค่า เพื่อเก็บจำนวนตัว marker ทั้งหมด if(i_marker==1){ // เก็บค่าตำแหน่ง พักัด สำหรับใช้ ย้ายตำแหน่ง ตรงกลางแผนที่ไปที่ดังกล่าว กรณีพบข้อมูลเดียว newCenterLatLon=markerLatLng; } data_found++;// เก็บค่า เพื่อนับจำนวนรายการที่ค้นเจอทั้งหมด }); if(i_marker==1){ map.setCenter(newCenterLatLon);// ถ้าค้นเจอเพียงรายการเดียว ให้ย้ายตรงกลางแผนที่ไปที่ ตำแหน่งที่เจอ } if(i_marker>1){ // // ถ้าค้นเจอมากกว่า 1 ตำแหน่ง ให้ย้าย ตรงกลาง แผนที่ มาตำแหน่งเดิม ตอนแรก newCenterLatLon=new GGM.LatLng(16.782495,100.218922); map.setCenter(newCenterLatLon); } if(data_found==0){ // ถ้าไม่พบข้อมูลใดๆ ให้แสดงเตือน alert("ไม่พบข้อมูล ตามค้นหา"); $("#data_search").val(""); } } }); } $("button").click(function(){ var mapType=$(this).text(); map.setMapTypeId(eval("GGM.MapTypeId." mapType)); }); $(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: "http://maps.google.com/maps/api/js?key=AIzaSyDBq03x1U9s1ekqp6TgAKUgXsOHVzcyrxM&sensor=false&language=th&callback=initialize" }).appendTo("body"); }); </script>
<?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","1234"); // เชื่อมต่อ Server mysql_select_db("restaurant"); // ติดต่อฐานข้อมูล mysql_query("set character set utf8"); // กำหนดค่า character set ที่จะใช้แสดงผล // ดึงข้อมูลจากฐานข้อมูล ตามค่า id ของสถานที่ ที่ส่งมา $id = $_GET['placeID']; $q="SELECT * FROM restaurant_details WHERE res_id='$id' "; // $q = mysql_query($strSQL) or die ("Error Query [".$strSQL."]"); //while($rs=mysql_fetch_array($q)){ $qr=@mysql_query($q); $rs=@mysql_fetch_assoc($qr); ?> <table width="300" border="0" cellspacing="2" cellpadding="0"> <tr> <td width="10" rowspan="4"> <?php if(isset($rs['res_picture'])) { if (!empty($rs['res_picture'])) { echo '<img src="image/'.$rs['res_picture'].'" width="130" height="80"/>'; } } ?> </td> <td width="10"> </td> <td width="264"><?php echo $rs['res_name']; ?></td> </tr> <tr> <td> </td> <td>ที่ตั้ง </td> </tr> <tr> <td> </td> <td>รายละเอียด</td> </tr> <tr> <td> </td> <td><a class="button5 button5" href="indexSaleView.php?id=<?php echo $rs['res_id']; ?>" target="_blank">รายละเอียดเพิ่มเติม</a></td> </tr> </table> <?php //}//while($rs=mysql_fetch_array($qr)){ ?>
<?php //map.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","1234") or die("Cannot connect the Server"); mysql_select_db("restaurant") or die("Cannot select database"); mysql_query("set character set utf8"); echo '<?xml version="1.0" encoding="utf-8"?>'; // 6-7 บรรทัดแรกด้านบน เป็นการกำหนด ให้ไฟล์นี้ส่งออกเป็นไฟล์ แบบ xml // และการกำหนดการเชิ่อมต่อกับฐานข้อมูล ?> <markers> <?php $q_search=""; // กำหนดตัวแปร เพื่อรอรับการ ส่งคำสั่งตามเงื่อนไข การค้นหา $q_limit=""; // กำหนดตัวแปร เพื่อรอรับการ เลือกจำกัดข้อมูลที่ต้องการแสดง if(isset($_GET['data_search']) && $_GET['data_search']!=""){ // ถ้า มีการส่งค่า คำค้นหามา และค่านั้นไม่ใช่ค่าว่าง // กำหนด รูปแบบคำสั่ง sql ในตัวแปรที่สร้างไว้ตอนต้น $q_search=" AND res_type_name like '%".$_GET['data_search']."%' "; }else{ // ถ้าไม่มีการส่งค่า ไม่ให้แสดง ตำแหน่งในแผนที่ ให้กำหนด LIMIT 0 // แต่ถ้า ต้องการแสดงเริ่มต้น ให้กำหนดจำนวนตามต้องการ เช่น LIMIT 10 $q_limit=" LIMIT 0 "; } // ชุดคำสั่ง sql ในการดึงข้อมูล จากฐานข้อมูลมาแสดง $q="SELECT * FROM restaurant_details WHERE 1 $q_search ORDER BY res_id $q_limit "; $qr=mysql_query($q); while($rs=mysql_fetch_array($qr)){ ?> <marker id="<?=$rs['res_id']?>"> <name><?=$rs['res_type_name']== 1 ? "อาหารตามสั่ง": "";?> <?=$rs['res_type_name']== 2 ? "ก๋วยเตี๋ยว": "";?> <?=$rs['res_type_name']== 3 ? "ข้าวแกง": "";?> <?=$rs['res_type_name']== 4 ? "อาหารตามสั่ง": "";?> <?=$rs['res_type_name']== 5 ? "เบเกอรี่": "";?> <?=$rs['res_type_name']== 6 ? "ก๋วยเตี๋ยว": "";?> <?=$rs['res_type_name']== 7 ? "สถานบันเทิง": "";?> <?=$rs['res_type_name']== 8 ? "เบเกอรี่": "";?> <?=$rs['res_type_name']== 9 ? "ภัตราคาร": "";?> </name> <latitude><?=$rs['lat']?></latitude> <longitude><?=$rs['lng']?></longitude> </marker> <?php } ?> </markers>
ตามหัวข้อนะคะ คือต้องการให้กด marker แล้วแสดง infowindow ตามทุกตัว แต่ตอนนี้มันกดดูได้แค่ตัวเดียวที่เป็นข้อมูลตัวสุดท้ายของฐานขอมูล
Yauwared
223.207.248.xxx
14-11-2016
00:47:14
คำแนะนำ และการใช้งาน
สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก
- ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา
โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ