|
 |
รบกวนถามพี่ ๆ ชาว thaicreate ครับ (เกี่ยวกับ google map api ทำงานร่วมกับ ajax) |
| |
 |
|
|
 |
 |
|
คือผมทำโปรเจคเกี่ยวกับการจองร้านอาหารภายในจังหวัด
ทีนี้มันติดอยู่ว่าผมทำการแสดงสถานะของร้านอาหารบน 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
|
|
|
 |
 |
 |
 |
| Date :
2011-09-10 20:51:36 |
By :
Pokoaguri |
View :
1197 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
หน้าแปลงข้อมูลจาก database เป็น xml (ให้หน้า search.php เอาไปจัดการต่อ)
Code (PHP)
<?php
require("ConnectDatabase.php");
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','<',$htmlStr);
$xmlStr=str_replace('>','>',$xmlStr);
$xmlStr=str_replace('"','"',$xmlStr);
$xmlStr=str_replace("'",''',$xmlStr);
$xmlStr=str_replace("&",'&',$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 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ลองไปศึกษาดูครับ
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 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 00
|
