สร้างเส้นทาง เพื่อ หาระยะทาง ใน google map ด้วย jQuery
21 April 2010ตัวอย่าง พร้อมโค้ดด้านล่าง เป็นการสร้างแผนที่ ให้สามารถหาเส้นทาง โดยการลากตัว 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&v=2&key=ABQIAAAAcNvUk-nhOGHxtqYjlYDTRRQIRG6yKtEoODg8BfMKCyHqWgeYjhTbSKxVXskDpcNKx0i7Msr1-E1jhg&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>
บทความในหมวดที่่น่าสนใจ อื่นๆ
อ่าน 6994
04 Jun 09
สร้างเมนูย่อย ให้กับข้อความ เมื่อนำเม๊าท์ไปชี้ mouseover ด้วย css และ jquery อย่างง่าย
อ่าน 6958
04 Mar 09
ใช้ jQuery ย้ายค่าระหว่าง multiple list box อย่างง่าย
อ่าน 6889
14 Nov 08
สร้างป้ายโฆษณาเลื่อนตามจอภาพ ด้วย jquery ได้ในไม่กี่บรรทัด
อ่าน 6854
29 Mar 10
สร้างฟอร์ม ดึง พิกัด ค่า latitude และ longitude จาก google map
อ่าน 6662
09 Sep 10
Google map API v.3 กับ jQuery ลากจุดหา พิกัด ค่า latitude และ longitude
อ่าน 6456
25 Sep 08
Jquery javascript library มาแรง
อ่าน 6384
25 Sep 08
มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 1
อ่าน 6167
01 Feb 09
สร้างกล่องแจ้งข้อความ คล้าย MSN ด้วย jQuery
อ่าน 6022
10 Sep 10
ค้นหา พิกัด ค่า latitude และ longitude ใน Google Map จากฃื่อสถานที่
อ่าน 5752
17 Aug 09
สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย
อ่าน 5624
03 Nov 10
การเพิ่ม ลบ แก้ไข แบ่งหน้า ข้อมูล ด้วย jquery ajax อย่างง่าย
อ่าน 5502
25 Sep 08
เริ่มต้นกับ jquery
อ่าน 5475
26 Feb 09
การกำหนดให้ input text เลื่อนโฟกัส focus เองอัตโนมัติ ด้วย jQuery
อ่าน 5174
30 Oct 10
การเลื่อน jQuery UI tab อัตโนมัติ ตามเวลาที่กำหนด
อ่าน 5142
บทความคนเข้าอ่านวันนี้
31 Jul 10 เทคนิค ประยุกต์ใช้ ajax ใน jQuery ร่วมกับ iframe กับการอัพโหลดรูป อ่าน 4364 17 Nov 08 ตรวจสอบฟอร์ม form ก่อน submit ด้วย jquery อ่าน 9331 18 Jun 10 การใช้งาน live และ die ใน jQuery 1.4 อ่าน 3040 25 Sep 08 ทบทวนคำสั่ง sql อ่าน 9149 14 Mar 09 ค้นหาข้อความในหน้าเว็บเพจอย่างง่ายด้วย jQuery อ่าน 2567 02 Mar 10 ประยุกต์ แปลเนื้อหา ในเว็บไซต์ด้วย google translater api สำหรับ php อ่าน 1161 12 Nov 10 ประยุกต์ php ฟังก์ชัน time() อย่างง่าย กับการแสดง เงื่อนไข ช่วงเวลา อ่าน 2331 29 Jul 10 สั่ง print preview ใน IE และ ประยุกต์กับ บราวเซอร์ อื่น อ่าน 3257 25 Sep 08 รู้จักฟังก์ชันสำหรับการ random อ่าน 2681 15 Oct 08 สร้างลิ้งค์มีรูปภาพแสดงนามสกุลไฟล์ อ่าน 2663 15 Feb 09 สร้างเมนู Accordion อย่างง่ายแบบที่ 2 ด้วย jQuery อ่าน 4439 17 Feb 09 การแปลงค่าตัวเลข ให้อยู่ในรูปแบบจำนวนเงิน มี comma ด้วย javascript อ่าน 2939 29 Dec 10 เพิ่มเติม การใช้งาน popup แบบ showModalDialog อย่างสมบูรณ์ อ่าน 4125 08 Oct 08 คำสั่ง SQL DISTINCT อ่าน 4892 04 Nov 08 สร้าง RSS บทความหรือข่าวสาร ด้วย PHP อ่าน 3103 06 Jun 09 ใช้ css กำหนด media print ให้ ไม่แสดง ปุ่มสั่งพิมพ์ print หน้าเอกสารที่ต้องการ อ่าน 3471 13 May 09 แก้ไขการตัดข้อความด้วย substrใน php แล้วมีรูปสี่เหลี่ยม อ่าน 2732 20 Mar 10 ใช้ jQuery สร้าง การเลื่อนโฟกัส ของ textbox ด้วยลูกศร บนแป้นพิมพ์ คีบอร์ด keyboard อ่าน 3001 04 Oct 08 SQL คืออะไร อ่าน 7496 30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 4513