Forgot Password ??

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

	Registered : 109,027

HOME > PHP > PHP Forum > ช่วยหน่อยคับ อยากให้แสดงเส้นทางที่ผ่าน แต่ไม่ยออมออกสักที รวมโค้ดกันมั่วเลยแสดงละติจู ลองติจูดแตไม่แสดง สถานที่ผ่าน

ช่วยหน่อยคับ อยากให้แสดงเส้นทางที่ผ่าน แต่ไม่ยออมออกสักที รวมโค้ดกันมั่วเลยแสดงละติจู ลองติจูดแตไม่แสดง สถานที่ผ่าน

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

komza

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

ช่วยหน่อยคับ อยากให้แสดงเส้นทางที่ผ่าน แต่ไม่ยออมออกสักที รวมโค้ดกันมั่วเลยแสดงละติจู ลองติจูดแตไม่แสดง สถานที่ผ่าน และเก็บสถานที่ผ่านใน db ได้ด้วย ขอบคุณคับ

Code (PHP)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Google Map API 3 - 01</title>
<style type="text/css">
html { height: 100% }
body { 
	height:100%;
	margin:0;padding:0;
	font-family:tahoma, "Microsoft Sans Serif", sans-serif, Verdana;
	font-size:12px;
}
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas { 
	width:550px;
	height:400px;
	margin:auto;
	margin-top:50px;
}
</style>


</head>

<body>
  <div id="map_canvas">
   
  </div> 
  <div id="directionsPanel" style="float:right; max-width:395px; overflow:scroll; height: 415px; overflow-x: hidden; position:absolute; background:#FFF: 14px; top: 53px; left: 820px; width: 231px;"></div>
 <div id="showDD" style="margin:auto;padding-top:5px;width:550px;">  
<!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->

From: 
<input name="namePlace" type="text" id="namePlace" size="30"  readonly="readonly"/>
To:
<input name="toPlace" type="text" id="toPlace" size="30" />
<br />
<!--  <form> เก็บข้อมูลสำหรับนำไปบันทึกลงฐานข้อมูล หรือนำไปใช้อื่นๆ-->
<form id="form_get_detailMap" name="form_get_detailMap" method="post" action="" onsubmit="calcRoute();return false;">
  <p>
    <input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
    <input type="button" name="iClear" id="iClear" value="Clear" />
    </p>
  <hr />
  <p>From:
    <input name="namePlaceGet" type="text" id="namePlaceGet" size="60" />
</p>
  <p>ละติจูด ลองติจูดเริ่มต้น <br />
    lat1
    <input name="a1" type="text" id="a1"  />
    <br />
    lat2
    <input name="a2" type="text" id="a2"   />
    </p>
  <p>To:
  <input name="toPlaceGet" type="text" id="toPlaceGet" size="60" /><br /><br />
    ละติจูด ลองติจูดเริ่มต้น<br />
  
    long1
    <input name="b1" type="text" id="b1" size="60" /><br />
    long2<input name="b2" type="text" id="b2" size="60" /><br />
    <select id="travelmode">
        <option value="DRIVING" selected="selected" data-shortMode="c">ขับรถ</option>
      </select>
    ระยะทางข้อความ  
    <input name="distance_text" type="text" id="distance_text" value="" size="17" />
    ระยะทางตัวเลข 
    เมตร<br />
    ระยะเวลาข้อความ
    
    ระยะเวลาตัวเลข
    วินาที
    <input type="submit" name="button" id="button" value="บันทึก" />  
    <br />
    * ระยะทางโดยประมาณ ระยะเวลา กรณีขับรถ โดยประมาณ
    </p>
  </p>
  <p id="myconsole"></p>
</form>  
</div> 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> 
<script type="text/javascript">
var directionShow; // กำหนดตัวแปรสำหรับใช้งาน กับการสร้างเส้นทาง
var directionsService; // กำหนดตัวแปรสำหรับไว้เรียกใช้ข้อมูลเกี่ยวกับเส้นทาง
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Latlng; // กำหนดตัวแปรสำหรับเก็บจุดเริ่มต้นของเส้นทางเมื่อโหลดครั้งแรก
var initialTo; // กำหนดตัวแปรสำหรับเก็บจุดปลายทาง เมื่อโหลดครั้งแรก
var searchRoute; // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น ให้สามารถใช้งานจากส่วนอื่นๆ ได้
function initialize() { // ฟังก์ชันแสดงแผนที่
	GGM=new Object(google.maps); // เก็บตัวแปร google.maps Object ไว้ในตัวแปร GGM
	directionShow=new  GGM.DirectionsRenderer({draggable:true});
	directionsService = new GGM.DirectionsService();
	// กำหนดจุดเริ่มต้นของแผนที่
	my_Latlng  = new GGM.LatLng(14.0275468,99.97984870000005);
	// กำหนดตำแหน่งปลายทาง สำหรับการโหลดครั้งแรก
	initialTo=new GGM.LatLng(13.8199149,100.06213009999999); 
	var my_mapTypeId=GGM.MapTypeId.ROADMAP; // กำหนดรูปแบบแผนที่ที่แสดง
	// กำหนด DOM object ที่จะเอาแผนที่ไปแสดง ที่นี้คือ div id=map_canvas
	var my_DivObj=$("#map_canvas")[0];
	// กำหนด Option ของแผนที่
	var myOptions = {
		zoom: 13, // กำหนดขนาดการ zoom
		center: my_Latlng , // กำหนดจุดกึ่งกลาง จากตัวแปร my_Latlng
		mapTypeId:my_mapTypeId // กำหนดรูปแบบแผนที่ จากตัวแปร my_mapTypeId
	};
	
	
	map = new GGM.Map(my_DivObj,myOptions); // สร้างแผนที่และเก็บตัวแปรไว้ในชื่อ map
	directionShow.setMap(map); // กำหนดว่า จะให้มีการสร้างเส้นทางในแผนที่ที่ชื่อ map
	

	if(map){ // เงื่่อนไขถ้ามีการสร้างแผนที่แล้ว
		 searchRoute(my_Latlng,initialTo); // ให้เรียกใช้ฟังก์ชัน สร้างเส้นทาง
		 
		 
		 
		 
	}
	
	// กำหนด event ให้กับเส้นทาง กรณีเมื่อมีการเปลี่ยนแปลง 
	GGM.event.addListener(directionShow, 'directions_changed', function() {
   
		var results=directionShow.directions; // เรียกใช้งานข้อมูลเส้นทางใหม่ 
		// นำข้อมูลต่างๆ มาเก็บในตัวแปรไว้ใช้งาน
		var addressStart=results.routes[0].legs[0].start_address; // สถานที่เริ่มต้น
		var addressEnd=results.routes[0].legs[0].end_address;// สถานที่ปลายทาง
		var distanceText=results.routes[0].legs[0].distance.text; // ระยะทางข้อความ
      //เมื่อมีการเลื่อนหมุด
        var startlat =  results.routes[0].legs[0].start_location.lat();
        var startlng =  results.routes[0].legs[0].start_location.lng();
        var endlat =  results.routes[0].legs[0].end_location.lat();
        var endlng =  results.routes[0].legs[0].end_location.lng();       
      //เพิ่มข้อมูล ถ้ามีการเลื่อนหมุด
				$("#a1").val(startlat);
                $("#a2").val(startlng);
                $("#b1").val(endlat);
                $("#b2").val(endlng);
      
		// นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
		$ ("#namePlace").val(addressStart);
		$("#namePlaceGet").val(addressStart);
		$("#toPlaceGet").val(addressEnd);
		$("#distance_text").val(distanceText);
      
      
      
      
      
	});
	
	var myMap = {} ;
 var rendererOptions = {draggable: true};
 
        myMap.map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        myMap.directionsService = new google.maps.DirectionsService();
        myMap.directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
        myMap.directionsDisplay.setMap(myMap.map);
        myMap.directionsDisplay.setPanel(document.getElementById("directionsPanel"));  //end init  

}
	var calcRoute = function() {
        var start = document.getElementById("namePlace").value,
        end = document.getElementById("toPlace").value,
        request = { origin:start,  destination:end, durationInTraffic :true, transitOptions: { departureTime:  new Date() },
          provideRouteAlternatives : true,
          travelMode: document.getElementById("travelmode").value };
        myMap.directionsService.route(request, function(result, status) {
          if(status == google.maps.DirectionsStatus.OK) {
            myMap.directionsDisplay.setDirections(result);
          }else{
           alert("something went wrong!");
          }
        });

      }
	  var loadScript = function() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize";
        document.body.appendChild(script);
      }
      window.onload = loadScript;
	  










$(function(){
	// ส่วนของฟังก์ชัน สำหรับการสร้างเส้นทาง
	searchRoute=function(FromPlace,ToPlace){ // ฟังก์ชัน สำหรับการสร้างเส้นทาง
		if(!FromPlace && !ToPlace){ // ถ้าไม่ได้ส่งค่าเริ่มต้นมา ให้ใฃ้ค่าจากการค้นหา
			var FromPlace=$("#namePlace").val();// รับค่าชื่อสถานที่เริ่มต้น
			var ToPlace=$("#toPlace").val(); // รับค่าชื่อสถานที่ปลายทาง
		}
		// กำหนด option สำหรับส่งค่าไปให้ google ค้นหาข้อมูล
		var request={
			origin:FromPlace, // สถานที่เริ่มต้น
			destination:ToPlace, // สถานที่ปลายทาง
			travelMode: GGM.DirectionsTravelMode.DRIVING // กรณีการเดินทางโดยรถยนต์
		};
		// ส่งคำร้องขอ จะคืนค่ามาเป็นสถานะ และผลลัพธ์
		directionsService.route(request, function(results, status){
			if(status==GGM.DirectionsStatus.OK){ // ถ้าสามารถค้นหา และสร้างเส้นทางได้
				directionShow.setDirections(results); // สร้างเส้นทางจากผลลัพธ์
				// นำข้อมูลต่างๆ มาเก็บในตัวแปรไว้ใช้งาน 
				var addressStart=results.routes[0].legs[0].start_address; // สถานที่เริ่มต้น
				var addressEnd=results.routes[0].legs[0].end_address;// สถานที่ปลายทาง
				
				var locaStart=results.routes[0].legs[0].start_location; // สถานที่เริ่มต้น
				var locaEnd=results.routes[0].legs[0].end_location;
				
				var distanceText=results.routes[0].legs[0].distance.text; // ระยะทางข้อความ
				// นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
				$("#namePlaceGet").val(addressStart);
				$("#toPlaceGet").val(addressEnd);
				$("#a1").val(locaStart.lat());
                $("#a2").val(locaStart.lng());
                $("#b1").val(locaEnd.lat());
                $("#b2").val(locaEnd.lng());
								
				$("#distance_text").val(distanceText);
				// ส่วนการกำหนดค่านี้ จะกำหนดไว้ที่ event direction changed ที่เดียวเลย ก็ได้
			}else{
				// กรณีไม่พบเส้นทาง หรือไม่สามารถสร้างเส้นทางได้
				// โค้ดตามต้องการ ในทีนี้ ปล่อยว่าง
			}
		});
	}
	
	// ส่วนควบคุมปุ่มคำสั่งใช้งานฟังก์ชัน
	$("#SearchPlace").click(function(){ // เมื่อคลิกที่ปุ่ม id=SearchPlace 
		searchRoute();	// เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
	});

	$("#namePlace,#toPlace").keyup(function(event){ // เมื่อพิมพ์คำค้นหาในกล่องค้นหา
		if(event.keyCode==13 && $(this).val()!=""){	// 	ตรวจสอบปุ่มถ้ากด ถ้าเป็นปุ่ม Enter 
			searchRoute();		// เรียกใช้งานฟังก์ชัน ค้นหาเส้นทาง
		}		
	}); 
	
	$("#iClear").click(function(){
		$("#namePlace,#toPlace").val(""); // ล้างค่าข้อมูล สำหรับพิมพ์คำค้นหาใหม่
	});
	
});




$(function(){
	// โหลด สคริป google map api เมื่อเว็บโหลดเรียบร้อยแล้ว
	// ค่าตัวแปร ที่ส่งไปในไฟล์ google map api
	// v=3.2&sensor=false&language=th&callback=initialize
	//	v เวอร์ชัน่ 3.2
	//	sensor กำหนดให้สามารถแสดงตำแหน่งทำเปิดแผนที่อยู่ได้ เหมาะสำหรับมือถือ ปกติใช้ false
	//	language ภาษา th ,en เป็นต้น
	//	callback ให้เรียกใช้ฟังก์ชันแสดง แผนที่ initialize	
	$("<script/>", {
	  "type": "text/javascript",
	  src: "http://maps.google.com/maps/api/js?v=3.2&sensor=false&language=th&callback=initialize"
	}).appendTo("body");	
});
</script>  
</body>
</html>

Tag : PHP, Ajax, jQuery, WebService

Date : 2014-01-07 17:44:59

By : komza

View : 709

Reply : 5

No. 1

deawx

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

ผมตอบไปที่กระทู้แรกแล้วนะครับ

Date : 2014-01-07 18:36:22

By : deawx

No. 2

komza

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

พี่เดียวคับ ทำไมมันใช้ร่วมกับ สคริปอื่นไม่ได้ อะ คับ

Date : 2014-01-08 17:57:56

By : komza

No. 3

deawx

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

ไม่ทราบครับ. มโน โค้ดอื่นไม่ถูกครับ ว่าทำไมไม่ได้
สงสัยว่าเป็นโค้ดเทพแน่ๆ โค้ดให้เดา ผมก้อจนปัญญาครับ

Date : 2014-01-08 18:13:01

By : deawx

No. 4

komza

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

คับ ขอบคุณ คับ

Date : 2014-01-08 18:21:02

By : komza

No. 5

deawx

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

แล้วที่บอกว่าสคริปอื่น คือสคริปอะไร เอามาลงด้วย ... นั่นคือความหมายที่ผมพูดครับ

Date : 2014-01-08 19:12:23

By : deawx

ค้นหาข้อมูล

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

Re : ช่วยหน่อยคับ อยากให้แสดงเส้นทางที่ผ่าน แต่ไม่ยออมออกสักที รวมโค้ดกันมั่วเลยแสดงละติจู ลองติจูดแตไม่แสดง สถานที่ผ่าน

รายละเอียด

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

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

Notice

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

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

โดย

อีเมล์

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