PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

สร้างเส้นทาง เพื่อ หาระยะทาง ใน google map ด้วย jQuery

21 April 2010 By


ตัวอย่าง พร้อมโค้ดด้านล่าง เป็นการสร้างแผนที่ ให้สามารถหาเส้นทาง โดยการลากตัว mark ในแผนที่
เมื่อมีการลาก เพื่อเปลี่ยนตำแหน่ง ตัว mark ตำแหน่งในแผนที่ จะมีการสร้าง เส้นทาง จากตำแหน่งตัว mark
เริ่มต้น กับ ตำแหน่งตัว mark ที่เลื่อน แล้วให้ส่งค่า ระยะทางเป็น กิโลเมตร มาเก็บไว้ใน textbox เพื่อนำไปบันทึก
ลงฐานข้อมูล หรือประยุกต์ใช้อื่นๆ ต่อไป และหากต้องการหาระยะทางของตำแหน่งใหม่ ให้กดที่ปุ่ม ยกเลิก
เพื่อกำหนดจุดใหม่

 
ระยะทาง กม.
<!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></title>
<style type="text/css">
html{
	padding:0px;
	margin:0px;
}
div#map_canvas{
	margin:auto;
	width:600px;
	height:550px;
	overflow:hidden;
}
div#route{
	width: 250px;
	height:380px;
	border:1px solid black;
	position:relative;
	float:left;
	font-size:12px;
	background-color:#F4F4F4;	
	overflow:auto;
	display:none;
}
</style>

</head>

<body>

<div id="map_canvas">
</div> 

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAcNvUk-nhOGHxtqYjlYDTRRQIRG6yKtEoODg8BfMKCyHqWgeYjhTbSKxVXskDpcNKx0i7Msr1-E1jhg&amp;hl=th" type="text/javascript"></script>
<script type="text/javascript"> 
var directions; // สร้างตัวแปรสำหรับกำหนดเส้นทาง
function initialize() { 
  if (GBrowserIsCompatible()) { 
	var map = new GMap2(document.getElementById("map_canvas")); 	
	var center = new GLatLng(13.77436,100.53458); // การกำหนดจุดเริ่มต้น
	map.setCenter(center, 13);  // เลข 13 คือค่า zoom  สามารถปรับตามต้องการ 
	map.setUIToDefault(); 
	
	var marker = new GMarker(center, {draggable: false});  // สร้างตัว mark เริ่มต้น
    map.addOverlay(marker);
	
	var markerGoTo = new GMarker(center, {draggable: true}); // สร้างตัว mark อีกอัน
	map.addOverlay(markerGoTo);
	directions = new GDirections(map);	
	var directOpt= { "preserveViewport": true, "getSteps": true ,"getPolyline":true};	// กำหนดรูปแบบของส้นทาง

	GEvent.addListener(markerGoTo, "dragend", function() {
		var point = markerGoTo.getPoint(); // หาตำแหน่างเมื่อหยุดการลากตัว mark
		directions.load("from: "+point+" to:13.77436,100.53458 ",directOpt); // สร้างเส้นทาง
	});
	GEvent.addListener(directions, "load", function() {
		var drivingDistanceKilometers = directions.getDistance().meters / 1000;		// หาระยะทางเป็น กิโลเมตร
		$("#distanceDrive").val(drivingDistanceKilometers); // นำค่าที่ได้ไปใส่ใน textbox 
	});		 	
	 
  } 
} 
</script> 
<script type="text/javascript" src="../jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	initialize();
	$(document.body).unload(function(){
			GUnload();
	});
	$("#Reset").click(function(){
		directions.clear(); // ลบเส้นทางจากแผนที่
	});	
});
</script>
<div id="showDD" style="margin:auto;padding-top:5px;width:600px;">
  <form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
    ระยะทาง
    <input name="distanceDrive" type="text" id="distanceDrive" value="0" />
    กม.
    <input type="submit" name="button" id="button" value="บันทึก" />
    <input type="button" name="Reset" id="Reset" value="ยกเลิก เพื่อกำหนดจุดใหม่" />
  </form>
</div>
</body>
</html>

 


Tags:: ระยะทาง เส้นทาง google map



หมายเหตุ: บทความในลำดับต่อไปที่เกี่ยวกับ google map จะเรียกใช้งานร่วมกับ jQuery เสมอ

เนื้อหาในส่วนนี้ เป็นเนื้อหาเก่า ใช้งานกับ google map api v2
แนะนำให้อ่านเนื้อหาใหม่ ที่ใช้งาน google map api v3 ได้ที่ 
 
http://www.ninenik.com/Google_map_API_v.3_กับ_jQuery_ลากจุดหา_พิกัด_ค่า_latitude_และ_longitude_-326.html

-------------------------------------

DirectionsService DirectionsRenderer ค้นหา และสร้าง เส้นทางใน google map




URL สำหรับอ้างอิง