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,027

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)
<HTML>
<title>ตัวอย่างการแสดงสถานะบน google map</title>
<script src= "http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAKaJQ6galA0QmFhNdQzYuwRQnaT__a1y-hZdnJBN4Ggj_4W3wVRTkKlGxp0EJvRTbiAqcn-FCYSTDog" type="text/javascript" ></script>
<script type="text/javascript">

	var circle = null;
	var circle2 = null;
	var map;
	var geocoder;
	var bb;
	var bounds = new GLatLngBounds();
	var t_map;

	var iconRed = new GIcon(); 
    iconRed.image = 'picture/red_button_down.png';
    iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconRed.iconSize = new GSize(20, 22);
    iconRed.shadowSize = new GSize(1, 1);
    iconRed.iconAnchor = new GPoint(12, 8);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

	var icongreen = new GIcon(); 
    icongreen.image = 'picture/green_button_down.png';
    icongreen.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    icongreen.iconSize = new GSize(20, 22);
    icongreen.shadowSize = new GSize(1, 1);
    icongreen.iconAnchor = new GPoint(12, 8);
    icongreen.infoWindowAnchor = new GPoint(5, 1);

    var iconyellow = new GIcon(); 
    iconyellow.image = 'picture/yellow_button_down.png';
	iconyellow.image.mouseover = 'picture/yellow_button_up.png';
    iconyellow.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
    iconyellow.iconSize = new GSize(20, 22);
    iconyellow.shadowSize = new GSize(1, 1);
    iconyellow.iconAnchor = new GPoint(12, 8);
    iconyellow.infoWindowAnchor = new GPoint(5, 1);

	var customIcons = [];
    customIcons["F"] = iconRed;
	customIcons["N"] = iconyellow;
    customIcons["E"] = icongreen;

	var status2 = [];
    status2["F"] = 'เต็ม';
	status2["N"] = 'ใกล้เต็ม';
    status2["E"] = 'ว่าง';

	function load() 
	{

      if (GBrowserIsCompatible()) 
	  {
			
			map = new GMap2(document.getElementById("mapnaja"));
			geocoder = new GClientGeocoder();
			map.addMapType(G_PHYSICAL_MAP); 
			map.addControl(new GLargeMapControl());
			map.addControl(new GMapTypeControl());
			map.setCenter(new GLatLng(18.77849,100.787819), 13);


            GDownloadUrl("ConvertXML.php", function(data) {
			var xml = GXml.parse(data);
			var markers = xml.documentElement.getElementsByTagName("marker");
		    var sidebar2 = document.getElementById('sidebar2');
            sidebar2.innerHTML = '';
			
			if (markers.length == 0) 
			{
			  sidebar2.innerHTML = 'No results found.';
			  return;
			}

		    var bounds = new GLatLngBounds();

            for (var i = 0; i < markers.length; i++) 
			{

            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var status = markers[i].getAttribute("status");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, status);
            map.addOverlay(marker);

            var sidebarEntry = createSidebarEntry(marker, name, address,status);
            sidebar2.appendChild(sidebarEntry);
            bounds.extend(point);
		
            }
			});
	 }
	 			function refresh(){   //รีเฟรชข้อมูลแบบ real-time
					doCallAjax('id_res')
					var clear = setTimeout("load();",5000);   // refresh ทุก ๆ 30 วินาที

					GEvent.addListener(map, "click", function() {    // กำหนดเหตุการณ์เมื่อทำการคลิกบนแผนที่ แล้วหยุดการรีเฟรชข้อมูล
					clearTimeout(clear);
					});

	
					GEvent.addListener(map, "mouseout", function() {  // กำหนดเหตุการณ์เมื่อทำการเลื่อนเม้าส์ออกจากแผนที่ แล้วทำการรีเฟรชข้อมูลต่อ				  
					setTimeout("load();",5000);
					});

			}
	
	refresh();

	}

		   function createMarker(point, name, address, status)
		   {

		   var marker = new GMarker(point, customIcons[status]);
		   var html = "<table width=300><tr><td>"+"<b>ชื่อสถานที่ : " + name + "</b> <br/>ที่อยู่ : " + address+"<br>สถานะ : "+ status2[status]+"</td></tr></table>";
		 
		   GEvent.addListener(marker, 'click', function() {	 
		   marker.openInfoWindowHtml(html);		
		   });
		   
		   return marker;
		   }
			

		  function createSidebarEntry(marker, name, address,status) 
		  {

			  var div = document.createElement('div');
			  var html = "<b>ชื่อ : " + name + "</b> <br/>ที่อยู่ : " + address +"</br><b>สถานะ : "+ status2[status]+"</b><br/> ------------------------------";
			  div.innerHTML = html;
			  div.style.cursor = 'pointer';
			  div.style.marginBottom = '5px';
			

			  GEvent.addDomListener(div, 'click', function() {
				GEvent.trigger(marker, 'click');
			  });

			  GEvent.addDomListener(div, 'mouseover', function() {
				div.style.backgroundColor = '#eee';
				div.style.color='red';
			  });

			  GEvent.addDomListener(div, 'mouseout', function() {
				div.style.backgroundColor = '#fff';
				div.style.color='black';
			  });

			  return div;

		 }

	</script>

<script type="text/javascript"> 
var HttPRequest = false;

	   function doCallAjax(Sort) {
		  HttPRequest = false;
		  if (window.XMLHttpRequest) { // Mozilla, Safari,...
			 HttPRequest = new XMLHttpRequest();
			 if (HttPRequest.overrideMimeType) {
				HttPRequest.overrideMimeType('text/html');
			 }
		  } else if (window.ActiveXObject) { // IE
			 try {
				HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
			 } catch (e) {
				try {
				   HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			 }
		  } 
		  
		  if (!HttPRequest) {
			 alert('Cannot create XMLHTTP instance');
			 return false;
		  }
	
			var url = 'ConvertXML.php';
			var pmeters = 'mySort='+Sort;
			HttPRequest.open('POST',url,true);

			HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			HttPRequest.setRequestHeader("Content-length", pmeters.length);
			HttPRequest.setRequestHeader("Connection", "close");
			HttPRequest.send(pmeters);
					
			HttPRequest.onreadystatechange = function()
			{
				 if(HttPRequest.readyState == 3)  // Loading Request
				  {
				   document.getElementById("mySpan").innerHTML = "Now is Loading...";
				  }

				 if(HttPRequest.readyState == 4) // Return Request
				  {
				   document.getElementById("mySpan").innerHTML = HttPRequest.responseText;
				  }
			}
	   }

</script>

<BODY onload="load()" onunload="GUnload()">

 <table border="1"> 
	  <tr>
        <td height="402"> <div id="mapnaja" style="width: 600px; height: 400px"></div> <div id="message"></div></td>
		<td width="180" height="402" valign="top">ข้อมูลร้านอาหาร<div id="sidebar2" style="overflow: auto; height: 362px; font-size: 11px; color: #000"></div> </td>	
      </tr> 
 </table>

 <form>
    <p class="style3">*
      <label for="label"></label>
      <input type="image" name="imageField2" src="picture/red_button_down.png" id="label" height="25" width="25" />สถานะของร้านเต็ม<br/>


	*<label for="label2"></label>
	 <input type="image" name="imageField3" src="picture/green_button_down.png" id="label2" height="25" width="25"/>สถานะของร้านว่าง </br>


	*<label for="label2"></label>
	 <input type="image" name="imageField3" src="picture/yellow_button_down.png" id="label2" height="25" width="25"/>สถานะของร้านใกล้เต็ม </p>

 </form>
  
 <span id="mySpan"></span>
 </BODY>

</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 : 1150 Reply : 2
 

 

No. 1



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



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


หน้าแปลงข้อมูลจาก database เป็น xml (ให้หน้า search.php เอาไปจัดการต่อ)
Code (PHP)
<?php

require("ConnectDatabase.php");


function parseToXML($htmlStr)
{ 

$xmlStr=str_replace('<','&lt;',$htmlStr); 

$xmlStr=str_replace('>','&gt;',$xmlStr); 

$xmlStr=str_replace('"','&quot;',$xmlStr); 

$xmlStr=str_replace("'",'&#39;',$xmlStr); 

$xmlStr=str_replace("&",'&amp;',$xmlStr); 

return $xmlStr; 

} 


$connection=mysql_connect ($hostname, $username, $password);

mysql_query("SET NAMES UTF8",$connection); 
if (!$connection) {

  die('Not connected : ' . mysql_error());
}


$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {

  die ('Can\'t use db : ' . mysql_error());

}



$query = "SELECT * FROM restaurant WHERE 1";

$result = mysql_query($query);

if (!$result) {

  die('Invalid query: ' . mysql_error());

}


header("Content-type: text/xml");


// Start XML file, echo parent node

echo '<restaurant>';


// Iterate through the rows, printing XML nodes for each

while ($row = @mysql_fetch_assoc($result)){

  // ADD TO XML DOCUMENT NODE

  echo '<marker ';
  echo 'id="' . parseToXML($row['id_res']) . '" ';
  echo 'name="' . parseToXML($row['name_res']) . '" ';
  echo 'address="' . parseToXML($row['address_res']) . '" ';
  echo 'tel="' . parseToXML($row['tel_res']) . '" ';
  echo 'owner="' . parseToXML($row['id_owner']) . '" ';


  echo 'status="' . $row['status_res'] . '" ';
  echo 'lat="' . $row['latitude'] . '" ';
  echo 'lng="' . $row['longitude'] . '" ';
  echo 'open="' . $row['open'] . '" ';
  echo 'close="' . $row['close'] . '" ';
  echo 'amount="' . $row['amount_res'] . '" ';
  echo '/>';
	
}

// End XML file

echo '</restaurant>';



?>


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
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-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่