 |
ช่วยดูให้หน่อยนะคะ การประยุกต์ใช้งาน php & mySQL ใน Google maps |
| |
 |
|
|
 |
 |
|
สวัสดีคะ จากที่หนูมั่วมาหลายวันแล้ว ขอคำปรึกษาหน่อยนะคะ
คือหนูทำเกี่ยวกับ Google maps api โดยในโค้ดดังกล่าวจะเป็นการทำรถวิ่งบนแผนที่ โดยวิ่งตามพิกัดที่เรากำหนด
แต่หนูจะเอามาประยุกต์ใช้กับ php&mySQL โดยสามารถเพิ่มข้อมูลพิกัดลงฐานข้อมูลได้ และสามารถเรียกใช้งานได้
โดยในโค้ดนี้จะเป็นการระบุพิกัดไปตรงๆเลย จึงขอคำแนะนำในการประยุกต์ใช้หน่อยคะ เพราะหนูอ่านการสอนแล้ว
ก็ยังทำไม่ได้ ยังงงๆนะคะ
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=tis620"/>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw" type="text/javascript"></script>
<script src="epoly.js" type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="controls">
<form onsubmit="start();return false" action="#">
<br />
<input type="button" value="Pause" onclick="togglePause()" id="pauseBtn" />
<input type="submit" value="Start" />
<input type="button" value="Reload page" onclick="location.reload()" id="reloadBtn" />
</form>
</div>
<div id="map" style="width: 700px; height: 500px"></div>
<div id="step"> </div>
<div id="distance">เมตร: 0.00</div>
<script type="text/javascript">
//<![CDATA[
var map, paused=false, continueStep;
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(0,0),2);
map.setCenter(new GLatLng(0,0),2);
map.setUIToDefault()
var dirn = new GDirections();
var step = 5; // metres
var tick = 100; // milliseconds
var poly;
var poly2;
var lastVertex = 0;
var eol;
var car = new GIcon();
car.image="caricon.png"
car.iconSize=new GSize(32,18);
car.iconAnchor=new GPoint(16,9);
var marker;
var k=0;
var stepnum=0;
var speed = "";
function updatePoly(d) {
// Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow
if (poly2.getVertexCount() > 20) {
poly2=new GPolyline([poly.getVertex(lastVertex-1)]);
map.addOverlay(poly2)
}
if (poly.GetIndexAtDistance(d) < lastVertex+2) {
if (poly2.getVertexCount()>1) {
poly2.deleteVertex(poly2.getVertexCount()-1)
}
poly2.insertVertex(poly2.getVertexCount(),poly.GetPointAtDistance(d));
} else {
poly2.insertVertex(poly2.getVertexCount(),poly.getVertex(lastVertex++));
}
}
function animate(d) {
if (d>eol) {
document.getElementById("step").innerHTML = "<b>สิ้นสุดการเดินทาง<\/b>";
document.getElementById("distance").innerHTML = "Miles: "+(d/1609.344).toFixed(2);
document.getElementById('pauseBtn').style.display='none';
return;
}
var p = poly.GetPointAtDistance(d);
if (k++>=180/step) {
map.panTo(p);
k=0;
}
marker.setPoint(p);
document.getElementById("distance").innerHTML = "Miles: "+(d/1609.344).toFixed(2)+speed;
if (stepnum+1 < dirn.getRoute(0).getNumSteps()) {
if (dirn.getRoute(0).getStep(stepnum).getPolylineIndex() < poly.GetIndexAtDistance(d)) {
stepnum++;
var steptext = dirn.getRoute(0).getStep(stepnum).getDescriptionHtml();
document.getElementById("step").innerHTML = "<b>เส้นทางต่อไป:<\/b> "+steptext;
var stepdist = dirn.getRoute(0).getStep(stepnum-1).getDistance().meters;
var steptime = dirn.getRoute(0).getStep(stepnum-1).getDuration().seconds;
var stepspeed = ((stepdist/steptime) * 2.24).toFixed(0);
step = stepspeed/2.5;
speed = "<br>Current speed: " + stepspeed +" mph";
}
} else {
if (dirn.getRoute(0).getStep(stepnum).getPolylineIndex() < poly.GetIndexAtDistance(d)) {
document.getElementById("step").innerHTML = "<b>Next: Arrive at your destination<\/b>";
}
}
updatePoly(d);
if(!paused){
setTimeout("animate("+(d+step)+")", tick);
} else {
continueStep=d+step; // store next step so we know where to continue from
}
}
GEvent.addListener(dirn,"load", function() {
document.getElementById("controls");
poly=dirn.getPolyline();
eol=poly.Distance();
map.setCenter(poly.getVertex(0),17);
map.addOverlay(new GMarker(poly.getVertex(0),G_START_ICON));
map.addOverlay(new GMarker(poly.getVertex(poly.getVertexCount()-1),G_END_ICON));
marker = new GMarker(poly.getVertex(0),{icon:car});
map.addOverlay(marker);
var steptext = dirn.getRoute(0).getStep(stepnum).getDescriptionHtml();
document.getElementById("step").innerHTML = steptext;
poly2 = new GPolyline([poly.getVertex(0)]);
map.addOverlay(poly2);
setTimeout("animate(0)",2000); // Allow time for the initial map display
});
GEvent.addListener(dirn,"error", function() {
alert("Location(s) not recognised. Code: "+dirn.getStatus().code);
});
//ส่วนของฟังก์ชั่นกำหนดพิกัดที่จะให้รถวิ่ง โดยส่วนนี้จะให้เรียก พิกัด"@7.00291276518498,100.45857667922974","@6.996480846584178,100.46344757080078","@6.998610630772067,100.4889178276062" จากฐานข้อมูลได้
function start() {
dirn.loadFromWaypoints(["@7.00291276518498,100.45857667922974","@6.996480846584178,100.46344757080078","@6.998610630772067,100.4889178276062"],{getPolyline:true,getSteps:true,locale:"Th"});
}
}
//ฟังก์ชั่นทำให้รถหยุดจอด
function togglePause(){
if (paused){
paused=false;
document.getElementById('pauseBtn').value='Pause';
setTimeout("animate("+(continueStep)+")", tick);
} else {
paused=true;
document.getElementById('pauseBtn').value='Continue';
}
}
</script>
</body>
</html>
ในนี้จะทำแบบว่า มีฟิลด์ 3 ฟิลด์ มี route_id route_name route_latlng โดยเราสามารถเพิ่มข้อมูลดังกล่าว
ผ่านฟอร์ม (ตอนนี้เอาแบบพิมพ์ไปเฉยๆก่อน แต่ที่หนูจะทำคือคลิ๊กพิกัดบนแผนที่ได้เลย) และสามารถเรียกใช้ได้
อาจจะเป็นการคลิ๊กที่ชื่อของเส้นทาง(route_name) แล้วให้รันไปยังฟังชั่นที่มีค่าของพิกัด(route_latlng) นั้นๆ
ช่วยหน่อยนะคะ งงมาหลายวันแล้ว
Tag : - - - -
|
|
|
 |
 |
 |
 |
| Date :
2009-11-20 15:44:59 |
By :
KhemTiD |
View :
1981 |
Reply :
10 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
เรียกใช้ยังไง ยังคำถามอยู่ ไอ้เราก็ไม่เคยทำ google maps ซะทีเคยแต่ปักหมุดน้อยๆ
|
| |
|
|
| |
| Date :
2009-11-21 02:49:58 |
By :
plakrim |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ไม่ค่อยมีความรู้เกี่ยวกับกูเกิ้ลแมพแห่ะ แต่จะมาช่วยมั่วให้
ก่อนอื่น เราใส่ค่าผ่านตัวแปรแบบนี้ได้เปล่า
var pos1= "@7.00291276518498,100.45857667922974";
var pos2="@6.996480846584178,100.46344757080078";
var pos3 ="@6.998610630772067,100.4889178276062";
function start() {
dirn.loadFromWaypoints([pos1,pos2,pos3],{getPolyline:true,getSteps:true,locale:"Th"});
}
}
ถ้าทำได้ก็ไม่น่าจะมีปัญหาการดึงข้อมูลจากฐานข้อมูลน่ะ ใช้ ajax มาช่วยหน่อยก็คงทำได้แหล่ะ
แต่ถ้าผ่านตัวแปรไม่ได้นิคงยากแห่ะ
|
| |
|
|
| |
| Date :
2009-11-21 08:57:02 |
By :
xbeginner01 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
แบบนั้นทำได้คะ แต่ว่าจะไม่ทำแบบนั้น จะทำแบบพิกัดรวมทีเดียว เหมือนกับที่หนูโพสไว้ที่หัวกระทู้นะคะ
โดยสมมุติว่า มีข้อมูล "@7.00291276518498,100.45857667922974","@6.996480846584178,100.46344757080078","@6.998610630772067,100.4889178276062" อยู่ในฐานข้อมูลของฟิลด์ route_latlng ของตาราง route อยู่แล้ว
คือหนูแค่อยากรู้ว่า จะดึงค่าในฐานข้อมูลมาใช้งานอย่างไร แค่นั้นเองคะ พี่ๆทำ php บ่อย ก็น่าจะใช้เหมือนกัน
เพียงแต่ หนูไม่เคยทำ php เลยเข้ามาถามคะ
|
| |
|
|
| |
| Date :
2009-11-21 09:37:41 |
By :
KhemTiD |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอถามอีกนิดนะคะ
ถ้าหนูจะทำ listBox โดยให้เอาข้อมูลจากฟิลด์ route_name มาแสดงผลในตอนเราเลือก listBox และ
ค่าของ value จะเป็น route_latlng โดยเมื่อเราเลือกรายการ listBox แล้วกดปุ่ม start โปรแกรมก็จะทำการ
แสดงผลในส่วนของข้อมูลที่เลือก
ตอนนี้ มีแต่ปุ่ม start จะมาประยุกต์ใช้ยังไงหรอคะ
|
| |
|
|
| |
| Date :
2009-11-21 10:31:19 |
By :
KhemTiD |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ลองเอา Ajax มาช่วยดูครับ
ตัวอย่าง ลองไปประยุกต์ดู
Code (PHP)
<html>
<head>
<title>ThaiCreate.Com Ajax Tutorial</title>
</head>
<script language="JavaScript">
var HttPRequest = false;
function doCallAjax() {
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 = 'getway.php';
var name=document.getElementById('name');
var pmeters = 'name='+name.options[name.selectedIndex].value;
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 == 4) // Return Request
{
var route =HttPRequest.responseText; //รับค่า echo จาก getway.php
dirn.loadFromWaypoints([route],{getPolyline:true,getSteps:true,locale:"Th"}); //แสดงเส้นทาง
}
}
/*
HttPRequest.onreadystatechange = call function .... // Call other function
*/
}
</script>
<body>
<select id="name">
<option value="1">route 1</option>
<option value="2">route 2</option>
</select>
<input name="btnButton" id="btnButton" type="button" value="Click" onClick="JavaScript:doCallAjax();">
<br>
<span id="mySpan"></span>
</body>
</html>
getway(PHP)
<?php
require "connect.php";
$name=$_POST[name];
$sql ="select * from tblmap where route_name='$name' ";
$result=mysql_query($sql);
$num =mysql_num_rows($result);
$res=mysql_fetch_array($result);
if($num!=0){
echo $res[route_latlng ]; //ข้อมูลที่ถูก echo จะถูกส่งไปยัง index.php
}
|
| |
|
|
| |
| Date :
2009-11-21 11:15:03 |
By :
xbeginner01 |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบคุณมากคะ Ajax เลย เดี๋ยวจะลองเอาไปทำดูนะคะ
|
| |
|
|
| |
| Date :
2009-11-21 11:52:27 |
By :
KhemTiD |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
สนใจมั๊กๆๆ
|
| |
|
|
| |
| Date :
2010-11-17 16:27:31 |
By :
Monkey_m |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ถ้าหนูจะทำ listBox โดยให้เอาข้อมูลจากฟิลด์ route_name มาแสดงผลในตอนเราเลือก listBox และ
ค่าของ value จะเป็น route_latlng โดยเมื่อเราเลือกรายการ listBox แล้วกดปุ่ม start โปรแกรมก็จะทำการ
แสดงผลในส่วนของข้อมูลที่เลือก
ตอนนี้ มีแต่ปุ่ม start จะมาประยุกต์ใช้ยังไงหรอคะ
ตอบครับ
พอโชว์ list แล้ว คุณก็ action ไปหน้าที่ทำรถวิ่งครับ
โดยมันจะส่ง route_id ตาม listbox ที่คุณเลือก
จากนั้นคุณก้เขียน sql where ตาม route_id
Code (PHP)
$sql="selcet * from rout where route_id='$route_id_from_listbox' ";
จากนั้นก็ดึงข้อมูล route_latlng ตามที่คุณเขียนครับ
Code (PHP)
<?
while($objResult = mysql_fetch_array($objQuery))
{
?>
function start() {
dirn.loadFromWaypoints([<?=$objResult["route_latlng"];?>],{getPolyline:true,getSteps:true,locale:"Th"});
}
}
function togglePause(){
if (paused){
paused=false;
document.getElementById('pauseBtn').value='Pause';
setTimeout("animate("+(continueStep)+")", tick);
} else {
paused=true;
document.getElementById('pauseBtn').value='Continue';
}
}
<?
}
?>
<?
mysql_close($objConnect);
?>
ประเด็นต่อไปทำไงให้รับค่าพิกัดตามเส้นทางที่คุณว่าแล้วบันทึกลงฐานข้อมูล ออกแบบอินพุตยังไงดี ท้าทายดีครับ 
|
| |
|
|
| |
| Date :
2010-11-17 20:39:20 |
By :
narubet |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
