Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > PHP > PHP Forum > ช่วยดูให้หน่อยนะคะ การประยุกต์ใช้งาน php & mySQL ใน Google maps

ช่วยดูให้หน่อยนะคะ การประยุกต์ใช้งาน php & mySQL ใน Google maps

เริ่มหัวข้อใหม่

BeesZa

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

สวัสดีคะ จากที่หนูมั่วมาหลายวันแล้ว ขอคำปรึกษาหน่อยนะคะ

คือหนูทำเกี่ยวกับ 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 : 1946

Reply : 10

No. 1

BeesZa

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

ว้า เงียบจัง

เอาแบบนี้ก็ได้คะ เกรงว่าพี่ๆจะเห็นว่าเกี่ยวกับกูเกิ้ลแมพ เลยไม่ค่อยตอบ

สมมุติว่า หนูมีข้อมูลพิกัดดังกล่าวในฐานข้อมูลอยู่แล้ว โดยอยู่ในตาราง route

และจะดึงข้อมูลจากฟิลด์ route_latlng แล้วหนูจะเรียกใช้ยังไงคะ

Code

function start() {
dirn.loadFromWaypoints([เรียกใช้ฟิลด์ route_latlng ตรงส่วนนี้คะ],{getPolyline:true,getSteps:true,locale:"Th"});
}
}

Date : 2009-11-20 17:13:25

By : KhemTiD

No. 2

PlaKriM

โพสกระทู้ ( 11,835 )
บทความ ( 10 )

เรียกใช้ยังไง ยังคำถามอยู่ ไอ้เราก็ไม่เคยทำ google maps ซะทีเคยแต่ปักหมุดน้อยๆ

Date : 2009-11-21 02:49:58

By : plakrim

No. 3

xbeginner01

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

ไม่ค่อยมีความรู้เกี่ยวกับกูเกิ้ลแมพแห่ะ แต่จะมาช่วยมั่วให้

ก่อนอื่น เราใส่ค่าผ่านตัวแปรแบบนี้ได้เปล่า
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

No. 4

BeesZa

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

แบบนั้นทำได้คะ แต่ว่าจะไม่ทำแบบนั้น จะทำแบบพิกัดรวมทีเดียว เหมือนกับที่หนูโพสไว้ที่หัวกระทู้นะคะ
โดยสมมุติว่า มีข้อมูล "@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

No. 5

BeesZa

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

ทำได้แล้วคะ

Code

<?
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 : 2009-11-21 09:50:17

By : KhemTiD

No. 6

BeesZa

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

ขอถามอีกนิดนะคะ

ถ้าหนูจะทำ listBox โดยให้เอาข้อมูลจากฟิลด์ route_name มาแสดงผลในตอนเราเลือก listBox และ
ค่าของ value จะเป็น route_latlng โดยเมื่อเราเลือกรายการ listBox แล้วกดปุ่ม start โปรแกรมก็จะทำการ
แสดงผลในส่วนของข้อมูลที่เลือก

ตอนนี้ มีแต่ปุ่ม start จะมาประยุกต์ใช้ยังไงหรอคะ

Date : 2009-11-21 10:31:19

By : KhemTiD

No. 7

xbeginner01

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

ลองเอา 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

No. 8

BeesZa

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

ขอบคุณมากคะ Ajax เลย เดี๋ยวจะลองเอาไปทำดูนะคะ

Date : 2009-11-21 11:52:27

By : KhemTiD

No. 9

คำหล้า

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

สนใจมั๊กๆๆ

Date : 2010-11-17 16:27:31

By : Monkey_m

No. 10

bts

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

ถ้าหนูจะทำ 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

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ช่วยดูให้หน่อยนะคะ การประยุกต์ใช้งาน php & mySQL ใน Google maps

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก