Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,038

HOME > กระทู้สำหรับภาษาต่าง ๆ > รบกวนถามพี่ ๆ ชาว thaicreate ครับ (เกี่ยวกับ google map api ทำงานร่วมกับ ajax)



รบกวนถามพี่ ๆ ชาว thaicreate ครับ (เกี่ยวกับ google map api ทำงานร่วมกับ ajax)

 
Topic : 066324



โพสกระทู้ ( 6 )
บทความ ( 0 )



สถานะออฟไลน์



คือผมทำโปรเจคเกี่ยวกับการจองร้านอาหารภายในจังหวัด
ทีนี้มันติดอยู่ว่าผมทำการแสดงสถานะของร้านอาหารบน google map
โดยใช้จุดมาร์คสี เพื่อแสดงสถานะของร้านอาหาร
โดย สีแดง = เต็ม เหลือง=ใกล้เต็ม เขียว= ว่าง
โดยจะให้สถานะของร้านที่ว่า แสดงแบบ real-time (1 นาที อัพเดททีนึงอ่ะครับ)
ก็เลยไปใช้ ajax ซึ่งผมไม่มีความรู้เลย
ก็ได้ศึกษามาจากเว็บนี้ครับ (โค้ดก๊อบมาทั้งดุ้นเลย --")
ก็ลองนำมาใส่ในเว็บดู
ปรากฏว่าเว็บมันก็รีเฟรชได้
แต่นาน ๆ ไปมันเริ่มอืดขึ้นเรื่อย ๆ จนค้างเลย
ผมไม่แน่ใจว่าผมเขียน event ถูกหลักการรึป่าว (ซึ่งผมแนใจว่ามันไม่ถูก ถ้าถูกคงไม่ค้างหรอก --")

รบกวนพี่ ๆ หรือผู้รู้ช่วยแนะแนวทางหน่อยอ่ะครับ
หรือช่วยชี้ทางสว่างให้หน่อยครับ
ตอนนี้มืดแปดด้านล่ะครับ (นั่งแก้มาสามวันล่ะ --")

ปล.โค้ดอาจจะดูงง ๆ และก็ออกจะยาวไปหน่อยนะครับ พอดีผมมือใหม่พึ่งเคยศึกษา javascritp+ajax (ทำไมมันยากจังเลยเนี่ย T_T)

หน้าเว็บ (search.php)
Code (PHP)
001.<HTML>
002.<title>ตัวอย่างการแสดงสถานะบน google map</title>
003.<script src= "http://maps.google.com/maps?file=api&;v=2&key=ABQIAAAAKaJQ6galA0QmFhNdQzYuwRQnaT__a1y-hZdnJBN4Ggj_4W3wVRTkKlGxp0EJvRTbiAqcn-FCYSTDog" type="text/javascript" ></script>
004.<script type="text/javascript">
005. 
006.    var circle = null;
007.    var circle2 = null;
008.    var map;
009.    var geocoder;
010.    var bb;
011.    var bounds = new GLatLngBounds();
012.    var t_map;
013. 
014.    var iconRed = new GIcon();
015.    iconRed.image = 'picture/red_button_down.png';
017.    iconRed.iconSize = new GSize(20, 22);
018.    iconRed.shadowSize = new GSize(1, 1);
019.    iconRed.iconAnchor = new GPoint(12, 8);
020.    iconRed.infoWindowAnchor = new GPoint(5, 1);
021. 
022.    var icongreen = new GIcon();
023.    icongreen.image = 'picture/green_button_down.png';
025.    icongreen.iconSize = new GSize(20, 22);
026.    icongreen.shadowSize = new GSize(1, 1);
027.    icongreen.iconAnchor = new GPoint(12, 8);
028.    icongreen.infoWindowAnchor = new GPoint(5, 1);
029. 
030.    var iconyellow = new GIcon();
031.    iconyellow.image = 'picture/yellow_button_down.png';
032.    iconyellow.image.mouseover = 'picture/yellow_button_up.png';
034.    iconyellow.iconSize = new GSize(20, 22);
035.    iconyellow.shadowSize = new GSize(1, 1);
036.    iconyellow.iconAnchor = new GPoint(12, 8);
037.    iconyellow.infoWindowAnchor = new GPoint(5, 1);
038. 
039.    var customIcons = [];
040.    customIcons["F"] = iconRed;
041.    customIcons["N"] = iconyellow;
042.    customIcons["E"] = icongreen;
043. 
044.    var status2 = [];
045.    status2["F"] = 'เต็ม';
046.    status2["N"] = 'ใกล้เต็ม';
047.    status2["E"] = 'ว่าง';
048. 
049.    function load()
050.    {
051. 
052.      if (GBrowserIsCompatible())
053.      {
054.             
055.            map = new GMap2(document.getElementById("mapnaja"));
056.            geocoder = new GClientGeocoder();
057.            map.addMapType(G_PHYSICAL_MAP);
058.            map.addControl(new GLargeMapControl());
059.            map.addControl(new GMapTypeControl());
060.            map.setCenter(new GLatLng(18.77849,100.787819), 13);
061. 
062. 
063.            GDownloadUrl("ConvertXML.php", function(data) {
064.            var xml = GXml.parse(data);
065.            var markers = xml.documentElement.getElementsByTagName("marker");
066.            var sidebar2 = document.getElementById('sidebar2');
067.            sidebar2.innerHTML = '';
068.             
069.            if (markers.length == 0)
070.            {
071.              sidebar2.innerHTML = 'No results found.';
072.              return;
073.            }
074. 
075.            var bounds = new GLatLngBounds();
076. 
077.            for (var i = 0; i < markers.length; i++)
078.            {
079. 
080.            var name = markers[i].getAttribute("name");
081.            var address = markers[i].getAttribute("address");
082.            var status = markers[i].getAttribute("status");
083.            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
084.                                    parseFloat(markers[i].getAttribute("lng")));
085.            var marker = createMarker(point, name, address, status);
086.            map.addOverlay(marker);
087. 
088.            var sidebarEntry = createSidebarEntry(marker, name, address,status);
089.            sidebar2.appendChild(sidebarEntry);
090.            bounds.extend(point);
091.         
092.            }
093.            });
094.     }
095.                function refresh(){   //รีเฟรชข้อมูลแบบ real-time
096.                    doCallAjax('id_res')
097.                    var clear = setTimeout("load();",5000);   // refresh ทุก ๆ 30 วินาที
098. 
099.                    GEvent.addListener(map, "click", function() {    // กำหนดเหตุการณ์เมื่อทำการคลิกบนแผนที่ แล้วหยุดการรีเฟรชข้อมูล
100.                    clearTimeout(clear);
101.                    });
102. 
103.     
104.                    GEvent.addListener(map, "mouseout", function() {  // กำหนดเหตุการณ์เมื่อทำการเลื่อนเม้าส์ออกจากแผนที่ แล้วทำการรีเฟรชข้อมูลต่อ               
105.                    setTimeout("load();",5000);
106.                    });
107. 
108.            }
109.     
110.    refresh();
111. 
112.    }
113. 
114.           function createMarker(point, name, address, status)
115.           {
116. 
117.           var marker = new GMarker(point, customIcons[status]);
118.           var html = "<table width=300><tr><td>"+"<b>ชื่อสถานที่ : " + name + "</b> <br/>ที่อยู่ : " + address+"<br>สถานะ : "+ status2[status]+"</td></tr></table>";
119.          
120.           GEvent.addListener(marker, 'click', function() { 
121.           marker.openInfoWindowHtml(html);    
122.           });
123.            
124.           return marker;
125.           }
126.             
127. 
128.          function createSidebarEntry(marker, name, address,status)
129.          {
130. 
131.              var div = document.createElement('div');
132.              var html = "<b>ชื่อ : " + name + "</b> <br/>ที่อยู่ : " + address +"</br><b>สถานะ : "+ status2[status]+"</b><br/> ------------------------------";
133.              div.innerHTML = html;
134.              div.style.cursor = 'pointer';
135.              div.style.marginBottom = '5px';
136.             
137. 
138.              GEvent.addDomListener(div, 'click', function() {
139.                GEvent.trigger(marker, 'click');
140.              });
141. 
142.              GEvent.addDomListener(div, 'mouseover', function() {
143.                div.style.backgroundColor = '#eee';
144.                div.style.color='red';
145.              });
146. 
147.              GEvent.addDomListener(div, 'mouseout', function() {
148.                div.style.backgroundColor = '#fff';
149.                div.style.color='black';
150.              });
151. 
152.              return div;
153. 
154.         }
155. 
156.    </script>
157. 
158.<script type="text/javascript">
159.var HttPRequest = false;
160. 
161.       function doCallAjax(Sort) {
162.          HttPRequest = false;
163.          if (window.XMLHttpRequest) { // Mozilla, Safari,...
164.             HttPRequest = new XMLHttpRequest();
165.             if (HttPRequest.overrideMimeType) {
166.                HttPRequest.overrideMimeType('text/html');
167.             }
168.          } else if (window.ActiveXObject) { // IE
169.             try {
170.                HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
171.             } catch (e) {
172.                try {
173.                   HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
174.                } catch (e) {}
175.             }
176.          }
177.           
178.          if (!HttPRequest) {
179.             alert('Cannot create XMLHTTP instance');
180.             return false;
181.          }
182.     
183.            var url = 'ConvertXML.php';
184.            var pmeters = 'mySort='+Sort;
185.            HttPRequest.open('POST',url,true);
186. 
187.            HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
188.            HttPRequest.setRequestHeader("Content-length", pmeters.length);
189.            HttPRequest.setRequestHeader("Connection", "close");
190.            HttPRequest.send(pmeters);
191.                     
192.            HttPRequest.onreadystatechange = function()
193.            {
194.                 if(HttPRequest.readyState == 3)  // Loading Request
195.                  {
196.                   document.getElementById("mySpan").innerHTML = "Now is Loading...";
197.                  }
198. 
199.                 if(HttPRequest.readyState == 4) // Return Request
200.                  {
201.                   document.getElementById("mySpan").innerHTML = HttPRequest.responseText;
202.                  }
203.            }
204.       }
205. 
206.</script>
207. 
208.<BODY onload="load()" onunload="GUnload()">
209. 
210. <table border="1">
211.      <tr>
212.        <td height="402"> <div id="mapnaja" style="width: 600px; height: 400px"></div> <div id="message"></div></td>
213.        <td width="180" height="402" valign="top">ข้อมูลร้านอาหาร<div id="sidebar2" style="overflow: auto; height: 362px; font-size: 11px; color: #000"></div> </td>   
214.      </tr>
215. </table>
216. 
217. <form>
218.    <p class="style3">*
219.      <label for="label"></label>
220.      <input type="image" name="imageField2" src="picture/red_button_down.png" id="label" height="25" width="25" />สถานะของร้านเต็ม<br/>
221. 
222. 
223.    *<label for="label2"></label>
224.     <input type="image" name="imageField3" src="picture/green_button_down.png" id="label2" height="25" width="25"/>สถานะของร้านว่าง </br>
225. 
226. 
227.    *<label for="label2"></label>
228.     <input type="image" name="imageField3" src="picture/yellow_button_down.png" id="label2" height="25" width="25"/>สถานะของร้านใกล้เต็ม </p>
229. 
230. </form>
231.   
232. <span id="mySpan"></span>
233. </BODY>
234. 
235.</HTML>




Tag : MySQL, HTML/CSS, JavaScript, Ajax


Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2011-09-10 20:51:36 By : Pokoaguri View : 1209 Reply : 2
 

 

No. 1



โพสกระทู้ ( 6 )
บทความ ( 0 )



สถานะออฟไลน์


หน้าแปลงข้อมูลจาก database เป็น xml (ให้หน้า search.php เอาไปจัดการต่อ)
Code (PHP)
01.<?php
02. 
03.require("ConnectDatabase.php");
04. 
05. 
06.function parseToXML($htmlStr)
07.{
08. 
09.$xmlStr=str_replace('<','&lt;',$htmlStr);
10. 
11.$xmlStr=str_replace('>','&gt;',$xmlStr);
12. 
13.$xmlStr=str_replace('"','&quot;',$xmlStr);
14. 
15.$xmlStr=str_replace("'",'&#39;',$xmlStr);
16. 
17.$xmlStr=str_replace("&",'&amp;',$xmlStr);
18. 
19.return $xmlStr;
20. 
21.}
22. 
23. 
24.$connection=mysql_connect ($hostname, $username, $password);
25. 
26.mysql_query("SET NAMES UTF8",$connection);
27.if (!$connection) {
28. 
29.  die('Not connected : ' . mysql_error());
30.}
31. 
32. 
33.$db_selected = mysql_select_db($database, $connection);
34.if (!$db_selected) {
35. 
36.  die ('Can\'t use db : ' . mysql_error());
37. 
38.}
39. 
40. 
41. 
42.$query = "SELECT * FROM restaurant WHERE 1";
43. 
44.$result = mysql_query($query);
45. 
46.if (!$result) {
47. 
48.  die('Invalid query: ' . mysql_error());
49. 
50.}
51. 
52. 
53.header("Content-type: text/xml");
54. 
55. 
56.// Start XML file, echo parent node
57. 
58.echo '<restaurant>';
59. 
60. 
61.// Iterate through the rows, printing XML nodes for each
62. 
63.while ($row = @mysql_fetch_assoc($result)){
64. 
65.  // ADD TO XML DOCUMENT NODE
66. 
67.  echo '<marker ';
68.  echo 'id="' . parseToXML($row['id_res']) . '" ';
69.  echo 'name="' . parseToXML($row['name_res']) . '" ';
70.  echo 'address="' . parseToXML($row['address_res']) . '" ';
71.  echo 'tel="' . parseToXML($row['tel_res']) . '" ';
72.  echo 'owner="' . parseToXML($row['id_owner']) . '" ';
73. 
74. 
75.  echo 'status="' . $row['status_res'] . '" ';
76.  echo 'lat="' . $row['latitude'] . '" ';
77.  echo 'lng="' . $row['longitude'] . '" ';
78.  echo 'open="' . $row['open'] . '" ';
79.  echo 'close="' . $row['close'] . '" ';
80.  echo 'amount="' . $row['amount_res'] . '" ';
81.  echo '/>';
82.     
83.}
84. 
85.// End XML file
86. 
87.echo '</restaurant>';
88. 
89. 
90. 
91.?>

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2011-09-10 20:53:42 By : Pokoaguri
 


 

No. 2



โพสกระทู้ ( 48 )
บทความ ( 0 )



สถานะออฟไลน์


ลองไปศึกษาดูครับ

http://newsirius13.thport.com/exp.html#%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%AA%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%87%20Marker%20%E0%B8%88%E0%B8%B2%E0%B8%81%E0%B8%90%E0%B8%B2%E0%B8%99%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-02-09 12:49:33 By : aobbie_p
 


   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : รบกวนถามพี่ ๆ ชาว thaicreate ครับ (เกี่ยวกับ google map api ทำงานร่วมกับ ajax)
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 05
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2025 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่