|
 |
| |
พี่่ๆคับ ช่วยหน่อยคับ พอดีอยากจะรวมฟังชั้นการค้นหาเส้นทางรถ กับ ฟังชั้นการหาระยะทางละติจูดลองติจูด จากโค้ดพี่ดิว ทำยังไงคับ |
| |
 |
|
|
 |
 |
|
โค้ด php1
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="showDD" style="margin:auto;padding-top:5px;width:550px;">
<!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->
From:
<input name="namePlace" type="text" id="namePlace" size="60" />
<br />
To:
<input name="toPlace" type="text" id="toPlace" size="60" />
<input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
<input type="button" name="iClear" id="iClear" value="Clear" />
<hr />
<!-- <form> เก็บข้อมูลสำหรับนำไปบันทึกลงฐานข้อมูล หรือนำไปใช้อื่นๆ-->
<form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
From:
<input name="namePlaceGet" type="text" id="namePlaceGet" size="60" />
<br />
To:
<input name="toPlaceGet" type="text" id="toPlaceGet" size="60" /><br />
ละติจูด ลองติจูดเริ่มต้น
<input name="a" type="text" id="a" size="60" /><br />
lat1<input name="a1" type="text" id="a1" /><br />
lat2<input name="a2" type="text" id="a2" /><br />
ละติจูด ลองติจูดเริ่มต้น
<input name="b" type="text" id="b" size="60" /><br />
long1<input name="b1" type="text" id="b1" size="60" /><br />
long2<input name="b2" type="text" id="b2" size="60" /><br />
ระยะทางข้อความ
<input name="distance_text" type="text" id="distance_text" value="" size="17" />
ระยะทางตัวเลข
<input name="distance_value" type="text" id="distance_value" value="0" size="17" />
เมตร<br />
ระยะเวลาข้อความ
<input name="duration_text" type="text" id="duration_text" size="15" />
ระยะเวลาตัวเลข
<input name="duration_value" type="text" id="duration_value" value="0" size="17" />
วินาที
<input type="submit" name="button" id="button" value="บันทึก" />
<br />
* ระยะทางโดยประมาณ ระยะเวลา กรณีขับรถ โดยประมาณ
<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.0278829, 99.98043610000002);
// กำหนดตำแหน่งปลายทาง สำหรับการโหลดครั้งแรก
initialTo=new GGM.LatLng(14.0278829, 99.98043610000002);
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 distanceVal=results.routes[0].legs[0].distance.value;// ระยะทางตัวเลข
var durationText=results.routes[0].legs[0].duration.text; // ระยะเวลาข้อความ
var durationVal=results.routes[0].legs[0].duration.value; // ระยะเวลาตัวเลข
//เมื่อมีการเลื่อนหมุด
var startlatlng = results.routes[0].legs[0].start_location;
var startlat = results.routes[0].legs[0].start_location.lat();
var startlng = results.routes[0].legs[0].start_location.lng();
var endlatlng = results.routes[0].legs[0].end_location;
var endlat = results.routes[0].legs[0].end_location.lat();
var endlng = results.routes[0].legs[0].end_location.lng();
//เพิ่มข้อมูล ถ้ามีการเลื่อนหมุด
$("#a").val(startlatlng);
$("#a1").val(startlat);
$("#a2").val(startlng);
$("#b").val(endlatlng);
$("#b1").val(endlat);
$("#b2").val(endlng);
// นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
$("#namePlaceGet").val(addressStart);
$("#toPlaceGet").val(addressEnd);
$("#distance_text").val(distanceText);
$("#distance_value").val(distanceVal);
$("#duration_text").val(durationText);
$("#duration_value").val(durationVal);
});
}
$(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; // ระยะทางข้อความ
var distanceVal=results.routes[0].legs[0].distance.value;// ระยะทางตัวเลข
var durationText=results.routes[0].legs[0].duration.text; // ระยะเวลาข้อความ
var durationVal=results.routes[0].legs[0].duration.value; // ระยะเวลาตัวเลข
// นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
$("#namePlaceGet").val(addressStart);
$("#toPlaceGet").val(addressEnd);
$("#a").val(locaStart);
$("#a1").val(locaStart.lat());
$("#a2").val(locaStart.lng());
$("#b").val(locaEnd);
$("#b1").val(locaEnd.lat());
$("#b2").val(locaEnd.lng());
$("#distance_text").val(distanceText);
$("#distance_value").val(distanceVal);
$("#duration_text").val(durationText);
$("#duration_value").val(durationVal);
// ส่วนการกำหนดค่านี้ จะกำหนดไว้ที่ 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>
php2
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>Untitled Document</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 class="mapsection" >
<form onsubmit="calcRoute();return false;" >
<select id="travelmode">
<option value="ขับรถ" selected="selected" data-shortMode="c">DRIVING</option>
<option value="TRANSIT" data-shortMode="r" selected>TRANSIT</option>
<option value="WALKING" data-shortMode="w">WALKING</option>
<option value="BICYCLING" data-shortMode="b">BICYCLING</option>
</select>
<input type="text" id="start" value="????????"/>
<input type="text" id="end" value="?????????????????"/>
<button type="submit">GET DIRECTIONS</button> <div id="map_canvas" style="width:50%; height:550px;float;"> </div>
<div id="directionsPanel" style="float:right; max-width:395px; overflow:scroll; height: 415px; overflow-x: hidden; position:absolute; background:#FFF: 14px; top: 74px; left: 52px; width: 231px;"></div>
</form>
<script>
//define one global Object
var myMap = {}
//init
function initialize(){
//set up map options
var mapOptions = {
center: new google.maps.LatLng(13.761728449950002,100.6527900695800),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
};
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
//directions
var calcRoute = function() {
var start = document.getElementById("start").value,
end = document.getElementById("end").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!");
}
});
}
//script loader
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;
</script>
</body>
</html>
จะรวมทั้งสอง อัน นี้ เข้าด้วยกัน โดย ไม่ ให้ค่ามันซ้อนกัน ทำยังไงคับ
ถ้าพี่ดิวผ่านมาช่วยตอบหน่อยนะคับ ขอบคุณคับ
Tag : PHP, Ajax, jQuery
|
|
|
 |
 |
 |
 |
| Date :
2014-01-07 15:04:33 |
By :
komza |
View :
913 |
Reply :
4 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ถ้าครบปี ผมจะได้อีกกี่ชื่อแว้
ผมชื่อ เดี่ยว เด้อ บ่แหม่น ดิว
ผมน่ะ ไม่ค่อยอยากให้ทั้งโค้ด เพราะให้แล้วก็ถามกันต่อไม่จบสักที แต่ครั้งนี้ อนุโลมปีใหม่
<!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;
}
#directions-panel {
float: right;
height: 100%;
overflow: auto;
position: absolute;
top: 0;
width: 390px;
}
</style>
</head>
<body>
<div id="map_canvas"></div>
<div id="directions-panel"></div>
<div id="showDD" style="margin:auto;padding-top:5px;width:550px;">
<!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->
From:
<input name="namePlace" type="text" id="namePlace" size="60" />
<br />To:
<input name="toPlace" type="text" id="toPlace" size="60" />
<input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
<input type="button" name="iClear" id="iClear" value="Clear" />
<hr />
<!-- <form> เก็บข้อมูลสำหรับนำไปบันทึกลงฐานข้อมูล หรือนำไปใช้อื่นๆ-->
<form id="form_get_detailMap" name="form_get_detailMap" method="post" action="">
From:
<input name="namePlaceGet" type="text" id="namePlaceGet" size="60" />
<br />To:
<input name="toPlaceGet" type="text" id="toPlaceGet" size="60" />
<br />ละติจูด ลองติจูดเริ่มต้น
<input name="a" type="text" id="a" size="60" />
<br />lat1
<input name="a1" type="text" id="a1" />
<br />lat2
<input name="a2" type="text" id="a2" />
<br />ละติจูด ลองติจูดเริ่มต้น
<input name="b" type="text" id="b" size="60" />
<br />long1
<input name="b1" type="text" id="b1" size="60" />
<br />long2
<input name="b2" type="text" id="b2" size="60" />
<br />ระยะทางข้อความ
<input name="distance_text" type="text" id="distance_text" value="" size="17" />ระยะทางตัวเลข
<input name="distance_value" type="text" id="distance_value" value="0" size="17" />เมตร
<br />ระยะเวลาข้อความ
<input name="duration_text" type="text" id="duration_text" size="15" />ระยะเวลาตัวเลข
<input name="duration_value" type="text" id="duration_value" value="0" size="17" />วินาที
<input type="submit" name="button" id="button" value="บันทึก" />
<br />* ระยะทางโดยประมาณ ระยะเวลา กรณีขับรถ โดยประมาณ
<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 directionsDisplay;
var directionShow; // กำหนดตัวแปรสำหรับใช้งาน กับการสร้างเส้นทาง
var directionsService; // กำหนดตัวแปรสำหรับไว้เรียกใช้ข้อมูลเกี่ยวกับเส้นทาง
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Latlng; // กำหนดตัวแปรสำหรับเก็บจุดเริ่มต้นของเส้นทางเมื่อโหลดครั้งแรก
var initialTo; // กำหนดตัวแปรสำหรับเก็บจุดปลายทาง เมื่อโหลดครั้งแรก
var searchRoute; // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น ให้สามารถใช้งานจากส่วนอื่นๆ ได้
function initialize() { // ฟังก์ชันแสดงแผนที่
directionsDisplay = new google.maps.DirectionsRenderer();
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.0278829, 99.98043610000002);
// กำหนดตำแหน่งปลายทาง สำหรับการโหลดครั้งแรก
initialTo = new GGM.LatLng(14.0278829, 99.98043610000002);
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
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
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 distanceVal = results.routes[0].legs[0].distance.value; // ระยะทางตัวเลข
var durationText = results.routes[0].legs[0].duration.text; // ระยะเวลาข้อความ
var durationVal = results.routes[0].legs[0].duration.value; // ระยะเวลาตัวเลข
//เมื่อมีการเลื่อนหมุด
var startlatlng = results.routes[0].legs[0].start_location;
var startlat = results.routes[0].legs[0].start_location.lat();
var startlng = results.routes[0].legs[0].start_location.lng();
var endlatlng = results.routes[0].legs[0].end_location;
var endlat = results.routes[0].legs[0].end_location.lat();
var endlng = results.routes[0].legs[0].end_location.lng();
//เพิ่มข้อมูล ถ้ามีการเลื่อนหมุด
$("#a").val(startlatlng);
$("#a1").val(startlat);
$("#a2").val(startlng);
$("#b").val(endlatlng);
$("#b1").val(endlat);
$("#b2").val(endlng);
// นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
$("#namePlaceGet").val(addressStart);
$("#toPlaceGet").val(addressEnd);
$("#distance_text").val(distanceText);
$("#distance_value").val(distanceVal);
$("#duration_text").val(durationText);
$("#duration_value").val(durationVal);
var request = {
origin: startlatlng,
destination: endlatlng,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
});
}
$(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; // ระยะทางข้อความ
var distanceVal = results.routes[0].legs[0].distance.value; // ระยะทางตัวเลข
var durationText = results.routes[0].legs[0].duration.text; // ระยะเวลาข้อความ
var durationVal = results.routes[0].legs[0].duration.value; // ระยะเวลาตัวเลข
// นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
$("#namePlaceGet").val(addressStart);
$("#toPlaceGet").val(addressEnd);
$("#a").val(locaStart);
$("#a1").val(locaStart.lat());
$("#a2").val(locaStart.lng());
$("#b").val(locaEnd);
$("#b1").val(locaEnd.lat());
$("#b2").val(locaEnd.lng());
$("#distance_text").val(distanceText);
$("#distance_value").val(distanceVal);
$("#duration_text").val(durationText);
$("#duration_value").val(durationVal);
// ส่วนการกำหนดค่านี้ จะกำหนดไว้ที่ 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>
|
ประวัติการแก้ไข
2014-01-07 18:34:03
| |
|
|
| |
| Date :
2014-01-07 18:31:14 |
By :
deawx |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ขอบพระคุณ พี่ เดี่ยว มาก ครับบบ จะสอบ ละ อีก สอง อาทิต อาจจะรบกวนไปหน่อย ขอบพระคุณที่สละเวลามาให้ คือผมเขียนจาวาไมเป็นเลยอะคับ ขอบคุณพี่อีกครั้งละกัน ขอบคุณครับ
|
| |
|
|
| |
| Date :
2014-01-07 20:45:32 |
By :
komza |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
ไม่เป็นไรจ้า เอาใจช่วยเน่อ ว่าที่บัณฑิตทั้งหลาย
|
| |
|
|
| |
| Date :
2014-01-07 21:00:41 |
By :
deawx |
|
|
| |
|
|
|
|
|
| |
|
|
|
| |
|
|
|
| |
|
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>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="<?php echo $jqLib; ?>"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<script>
$(function() {
$( "#tabs" ).tabs();
$( ".moved" ).click(function(){
var next = $(this).attr("rel");
$( "#tabs" ).tabs({ active: next });
});
});
</script>
<div id="tabs">
<ul>
<li><a href="#tabs-1">หน้า 1</a></li>
<li><a href="#tabs-2">หน้า 2</a></li>
<li><a href="#tabs-3">หน้า 3</a></li>
<li><a href="#tabs-4">หน้า 4</a></li>
<li><a href="#tabs-5">หน้า 5</a></li>
</ul>
<form name="nisit_loan" method="post" action="add.php" enctype="multipart/form-data">
<div id="tabs-1">
<div class="entry">
<h2>รูปถ่าย</h2>
<p>
<script type="text/javascript">
$(function(){
Test = {
UpdatePreview: function(obj){
// if IE < 10 doesn't support FileReader
if(!window.FileReader){
// don't know how to proceed to assign src to image tag
} else {
var reader = new FileReader();
var target = null;
reader.onload = function(e) {
target = e.target || e.srcElement;
$("#pic1").prop("src", target.result);
};
reader.readAsDataURL(obj.files[0]);
}
}
};
});
</script>
<br>
<img id="pic1"src="#" alt="รูปภาพ" width="128" height="128" />
<br>
เลือกไฟล์ที่ต้องการ : <input type='file' name='browse' onchange='Test.UpdatePreview(this)' />
<table width="635" height="183"id="table_1" style="display:">
<tr>
<td width="170"><div align="right">ที่อยู่ปัจจุบัน บ้านเลขที่</div></td>
<td width="115"><input name="nisit_num_home2" type="text" id="nisit_num_home2" size="5" /></td>
<td width="150"><div align="right">อำเภอ/เขต </div></td>
<td width="180"><select id="selAmphur1" name="selAmphur1">
<option value=""> ------- เลือก ------ </option>
</select><span id="waitAmphur1"></span></td>
</tr>
<tr>
<td><div align="right">หมู่ที่</div></td>
<td><input name="nisit_moo2" type="text" id="nisit_moo2" size="5" /></td>
<td><div align="right">ตำบล/แขวง</div></td>
<td><select id="selTumbon1" name="selTumbon1">
<option value=""> ------- เลือก ------ </option>
</select><span id="waitTumbon1" ></span></td>
<input type="hidden" id="provinceHidden1" name="provinceHidden1" />
<input type="hidden" id="amphurHidden1" name="amphurHidden1" />
<input type="hidden" id="tumbonHidden1" name="tumbonHidden1" />
</tr>
<tr>
<td><div align="right">ตรอก/ซอย </div></td>
<td><input name="nisit_soy2" type="text" id="nisit_soy2" size="15" /></td>
<td><div align="right">รหัสไปรษณีย์</div></td>
<td><input type="text" name="nisit_code2" id="nisit_code2" /></td>
</tr>
<tr>
<td><div align="right">ถนน </div></td>
<td><input name="nisit_road2" type="text" id="nisit_road2" size="15" /></td>
<td><div align="right">โทรศัพท์</div></td>
<td><input type="text" name="nisit_numberphone2" id="nisit_numberphone2" /></td>
</tr>
<tr>
<td><div align="right">จังหวัด </div></td>
<td><select id="selProvince1" name="selProvince1">
<option value=""> ------- เลือก ------ </option>
<?php
$result = mysql_query("
SELECT
PROVINCE_ID,
PROVINCE_NAME
FROM
province
ORDER BY CONVERT(PROVINCE_NAME USING TIS620) ASC;
");
while($row = mysql_fetch_assoc($result)){
echo '<option value="', $row['PROVINCE_ID'], '">', $row['PROVINCE_NAME'],'</option>';
}
?>
</select></td>
<td> </td>
<td> </td>
</tr>
</table>
<div align="right">
<input type="button" class="moved" rel="1" value="ถัดไป" />
</div>
</p></div></div>
<br />
</p>
<div id="tabs-2">
<table width="635">
<tr>
<td width="174"><div align="right"> นิสิตอยู่ในความปกครองของ
ชื่อ </div></td>
<td width="144"><input type="text" name="patronize_name" id="patronize_name" /></td>
<td width="153"><div align="right">ที่อยู่ปัจจุบัน บ้านเลขที่ </div></td>
<td width="144"><input name="patronize_num_home" type="text" id="patronize_num_home" size="5" /></td>
</tr>
<tr>
<td><label for="old_father">
<div align="right">นามสกุล</div>
</label></td>
<td><input type="text" name="patronize_lastname" id="patronize_lastname" /></td>
<td><div align="right">หมู่ที่</div></td>
<td><input name="patronize_moo" type="text" id="patronize_moo" size="5" /></td>
</tr>
<tr>
<td><div align="right">อายุ </div></td>
<td><input name="patronize_old" type="text" id="patronize_old" size="10" /></td>
<td><div align="right">ตรอก/ซอย</div></td>
<td><input name="patronize_soy" type="text" id="patronize_soy" size="15" /></td>
</tr>
<tr>
<td><div align="right">สถานภาพ</div></td>
<td><select name="patronize_status" id="patronize_status">
<option value="non"> </option>
<option value="ยังมีชีวิต">ยังมีชีวิต</option>
<option value="ถึงแก่กรรม">ถึงแก่กรรม</option>
</select></td>
<td><div align="right">ถนน</div></td>
<td><input name="patronize_road" type="text" id="patronize_road" size="20" /></td>
</tr>
<tr>
<td><div align="right">จบการศึกษาขั้นสูงสุด</div></td>
<td><input type="text" name="patronize_max_study" id="patronize_max_study" /></td>
<td><div align="right">
<div align="right">จังหวัด</div>
</div></td>
<td><select id="selProvince4" name="selProvince4">
<option value=""> ------- เลือก ------ </option>
<?php
$result = mysql_query("
SELECT
PROVINCE_ID,
PROVINCE_NAME
FROM
province
ORDER BY CONVERT(PROVINCE_NAME USING TIS620) ASC;
");
while($row = mysql_fetch_assoc($result)){
echo '<option value="', $row['PROVINCE_ID'], '">', $row['PROVINCE_NAME'],'</option>';
}
?>
</select></td>
</tr>
<tr>
<td><div align="right">จากสถานศึกษา</div></td>
<td><input type="text" name="patronize_school" id="patronize_school" /></td>
<td><div align="right">อำเภอ/เขต</div></td>
<td><select id="selAmphur4" name="selAmphur4">
<option value=""> ------- เลือก ------ </option>
</select>
<span id="waitAmphur4"></span></td>
</tr>
<tr>
<td><div align="right">เลขบัตรประจำตัวประชาชน</div></td>
<td><input name="patronize_id_card" type="text" id="patronize_id_card" /></td>
<td><div align="right">ตำบล/แขวง</div></td>
<td><select id="selTumbon4" name="selTumbon4">
<option value=""> ------- เลือก ------ </option>
</select>
<span id="waitTumbon4" ></span></td>
<input type="hidden" id="provinceHidden4" name="provinceHidden4" />
<input type="hidden" id="amphurHidden4" name="amphurHidden4" />
<input type="hidden" id="tumbonHidden4" name="tumbonHidden4" />
</tr>
<tr>
<td><div align="right">เลขที่บัตรประจำตัวผู้เสียภาษี</div></td>
<td><input type="text" name="patronize_id_tax" id="patronize_id_tax" /></td>
<td><div align="right">รหัสไปรษณีย์</div></td>
<td><input type="text" name="patronize_code" id="patronize_code" /></td>
</tr>
<tr>
<td><div align="right">อาชีพ</div></td>
<td><select name="patronize_job" id="patronize_job">
<option value="non"></option>
<option value="รับราชการ">รับราชการ</option>
<option value="ผนักงานรัฐวิสาหกิจ">ผนักงานรัฐวิสาหกิจ</option>
<option value="ค้าขาย">ค้าขาย</option>
<option value="รับจ้าง">รับจ้าง</option>
<option value="เกษตรกร">เกษตรกร</option>
<option value="อื่นๆ">อื่นๆ</option>
</select></td>
<td><div align="right">โทรศัพท์</div></td>
<td><input type="text" name="patronize_numberphone" id="patronize_numberphone" /></td>
</tr>
<tr>
<td><div align="right">รายได้ปีละ</div></td>
<td><input name="patronize_revrnue" type="text" id="patronize_revrnue" size="10" />
บาท</td>
<td><div align="right">เกี่ยวข้องกับข้าพเจ้าโดยเป็น</div></td>
<td><input type="text" name="patronize_about" id="patronize_about" /></td>
</tr>
<tr>
<td><div align="right">ระบุเพิ่มเติมให้ชัดเจน</div></td>
<td><input type="text" name="patronize_expansion_job" id="patronize_expansion_job" /></td>
<td><div align="right"></div></td>
<td> </td>
</tr>
</table>
<div align="right">
<input type="button" class="moved" rel="0" value="ก่อนหน้า" />
<input type="button" class="moved" rel="2" value="ถัดไป" />
</div>
</div>
<div id="tabs-3">
<div align="right">
<p> </p>
<p>
<input type="button" class="moved" rel="1" value="ก่อนหน้า" />
<input type="button" class="moved" rel="3" value="ถัดไป" />
</p>
</div></div>
<div id="tabs-4">
<div class="entry">
<h2>แผนผังที่อยู่บ้าน</h2>
<br />
</div>
<label for="home_nisit"></label>
<div align="right">
<style type="text/css">
/* css กำหนดความกว้าง ความสูงของแผนที่ */
#map_canvas {
width: 600px;
height: 400px;
margin: auto;
margin-top: 50px;
}
#directions-panel { font-size:small;
width:600px;
margin:auto;
clear:both;
background-color:#F1FEE9;
}
/* css ในส่วนข้อมูลการแนะนำเส้นทาง เพิ่มเติม ถ้าต้องการกำหนด */
.adp-placemark{
background-color:#9C3;
}
.adp-summary{
}
.adp-directions{
}
}
</style>
<div id="google_map">
<div id="map_canvas"></div>
<div id="showDD" style="margin:auto; font-size:small;padding-top:5px;width:600px;">
<!--textbox กรอกชื่อสถานที่ และปุ่มสำหรับการค้นหา เอาไว้นอกแท็ก <form>-->
From:
<input name="namePlace" type="text" id="namePlace" size="30" />
To:
<input name="toPlace" type="text" id="toPlace" size="30" />
<br />
<input type="button" name="SearchPlace" id="SearchPlace" value="Search" />
<input type="button" name="iClear" id="iClear" value="Clear" />
<hr />
<!-- <form> เก็บข้อมูลสำหรับนำไปบันทึกลงฐานข้อมูล หรือนำไปใช้อื่นๆ-->
From:
<input name="namePlaceGet" type="text" id="namePlaceGet" size="30" />
To:
<input name="toPlaceGet" type="text" id="toPlaceGet" size="30" />
<br /> <br />
เริ่มต้น
<input name="a" type="text" id="a" size="30" />
<input type="hidden" name="a1" id="a1" />
<input type="hidden" name="a2" id="a2" />
ปลายทาง
<input name="b" type="text" id="b" size="30" />
<input type="hidden" name="b1" id="b1" />
<input type="hidden" name="b2" id="b2" />
<br />
<br />
ระยะทาง
<input name="distance_text" type="text" id="distance_text" value="" size="17" />
* ระยะทางโดยประมาณ <br />
<p id="myconsole"></p>
<div id="directions-panel"></div>
</div>
<script type="text/javascript">
var directionsDisplay;
var directionShow; // กำหนดตัวแปรสำหรับใช้งาน กับการสร้างเส้นทาง
var directionsService; // กำหนดตัวแปรสำหรับไว้เรียกใช้ข้อมูลเกี่ยวกับเส้นทาง
var map; // กำหนดตัวแปร map ไว้ด้านนอกฟังก์ชัน เพื่อให้สามารถเรียกใช้งาน จากส่วนอื่นได้
var GGM; // กำหนดตัวแปร GGM ไว้เก็บ google.maps Object จะได้เรียกใช้งานได้ง่ายขึ้น
var my_Latlng; // กำหนดตัวแปรสำหรับเก็บจุดเริ่มต้นของเส้นทางเมื่อโหลดครั้งแรก
var initialTo; // กำหนดตัวแปรสำหรับเก็บจุดปลายทาง เมื่อโหลดครั้งแรก
var searchRoute; // กำหนดตัวแปร ไว้เก็บฃื่อฟังก์ชั้น ให้สามารถใช้งานจากส่วนอื่นๆ ได้
function initialize() { // ฟังก์ชันแสดงแผนที่
directionsDisplay = new google.maps.DirectionsRenderer();
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.0278829, 99.98043610000002);
// กำหนดตำแหน่งปลายทาง สำหรับการโหลดครั้งแรก
initialTo = new GGM.LatLng(14.0278829, 99.98043610000002);
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
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('directions-panel'));
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 startlatlng = results.routes[0].legs[0].start_location;
var startlat = results.routes[0].legs[0].start_location.lat();
var startlng = results.routes[0].legs[0].start_location.lng();
var endlatlng = results.routes[0].legs[0].end_location;
var endlat = results.routes[0].legs[0].end_location.lat();
var endlng = results.routes[0].legs[0].end_location.lng();
//เพิ่มข้อมูล ถ้ามีการเลื่อนหมุด
$("#a").val(startlatlng);
$("#a1").val(startlat);
$("#a2").val(startlng);
$("#b").val(endlatlng);
$("#b1").val(endlat);
$("#b2").val(endlng);
// นำค่าจากตัวแปรไปแสดงใน textbox ที่ต้องการ
$("#namePlaceGet").val(addressStart);
$("#toPlaceGet").val(addressEnd);
$("#distance_text").val(distanceText);
var request = {
origin: startlatlng,
destination: endlatlng,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
});
}
$(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);
$("#a").val(locaStart);
$("#a1").val(locaStart.lat());
$("#a2").val(locaStart.lng());
$("#b").val(locaEnd);
$("#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("#google_map");
});
</script>
</div>
</div>
</div>
</form>
</body>
</html>
พี่ เดี่ยว คับ ผม ใช้ jqury tab กับ google map ก็เลยเกิด ปัญหา แต่ จริง ก็ รันได้ แล้ว คับ แต่ แผนที่ มันออกมาไม่ เต็ม มีวิธีแก้ไหมคับ
|
ประวัติการแก้ไข
2014-01-09 16:16:47
| |
|
|
| |
| Date :
2014-01-09 15:36:35 |
By :
komza |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 01
|
