|
|
|
ถามเกี่ยวกับการแก้ไขโค้ด google map api ในการกำหนดจุดและคำนวณระยะทางคับ |
|
|
|
|
|
|
|
ตอนนี้ทำโปรเจ็คส่งอาจารย์คับ แต่เหมือนจะงงๆ เพราะไม่ค่อยสันทัด php สักเท่าไหร่
จะทำเกี่ยวกับ การวัดความเร็วอินเตอร์ โดยวัดจากโหนด แล้วคลิกที่บ้านลูกค้า เพื่อดูระยะทาง(เน็ตวิ่งตามสายเคเบิ้ล) แล้วคำนวณออกมาว่า จะมีความเร็วเน็ตอยู่ที่เท่าไร?
ค้นหาในเว็บอยู่วันสองวันก็ได้ code ตัวนี้มา คือ กำหนดจุด แล้วลากไปยังจุดที่เราต้องการ ระบบก็จะคำนวณระยะทางมาให้
คำถามเพื่อปรับแก้โค้ด คือ
1. ต้องการกำหนดจุดมากกว่า 1 จุด(จะมีทั้งหมดประมาณ 44 โหนด)จะทำยังไง? แต่จิงๆ มีไฟล์ excel อยู่จะใช้ประโยชน์อะไรได้บ้าง?
2. ต้องการคำนวณออกมาว่า ระยะทางไม่เกิน 5 กิโลเมตร จะโชว์ว่า ความเร็วอินเตอร์เน็ตเต็ม 5 MB แต่ถ้ามากกว่านั้นก็ลดความเร็วลงมา แต่ทั้งหมดไม่เกิน 10 กิโลเมตร(ระยะสัญญาณแค่ 10 กิโลเมตร)
รบกวนผู้รู้ด้วยค๊าบบบ
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></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=ABQIAAAAiOY-qJhvEGWCj2x02oGhIxSv-Bmf33CSQVJOyrsioyUisQmXPBR71ZNe7krWOuOacdYjjIo-SdmqlQ" 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(6.614771,100.066507); // การกำหนดจุดเริ่มต้น
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: 6.614771,100.066507",directOpt); // สร้างเส้นทาง
});
GEvent.addListener(directions, "load", function() {
var drivingDistanceKilometers = directions.getDistance().meters / 1000; // หาระยะทางเป็น กิโลเมตร
$("#distanceDrive").val(drivingDistanceKilometers); // นำค่าที่ได้ไปใส่ใน textbox
var drivingDistanceMb = directions.getDistance().meters / 100; // หาความเร็วเป็น MB อันนี้มั่วๆ คับ
$("#distanceMb").val(drivingDistanceMb); // นำค่าที่ได้ไปใส่ใน 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="">
Distance
<input name="distanceDrive" type="text" id="distanceDrive" value="0" />
Km.
speed
<input name="distanceMb" type="text" id="distanceMb" value="0" />
MB
<input type="submit" name="button" id="button" value="Save" />
<input type="button" name="Reset" id="Reset" value="Cancel to start again" />
</form>
</div>
</body>
</html>
download jquery-1.4.1.min.js ได้ที่ http://www.4shared.com/document/tV1D8bIz/jquery-141min.html
download data ได้ที่ http://www.4shared.com/file/GIisPg_K/data_tot_1.html
Tag : PHP, JavaScript, Excel (Excel.Application)
|
|
|
|
|
|
Date :
2010-09-02 03:41:55 |
By :
chinjung |
View :
8120 |
Reply :
9 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ท่านต้องทำการเพิ่มพิกัดลงใน DB ก่อนครับ
จะทำการเพิ่มทีละจุด หรือจะทำการเพิ่มครั้งเดียว โดยการ import ก็ได้ ส่วน mainpoint ค่อยมาคำนวนผ่าน mysql ตามสูตรหาพื้นที่ ครับ ถ้ากำหนดโดยจุดลากแบบนี้ ท่านต้องใช้สูตรคำนวนใหม่ครับ
ถ้าเกิน 10000 เมตร ให้ alert ว่าสัญญาณไปไม่ถึง
แต่ผมงงตรงที่ ถ้าสัญญาณไปตามสาย ถ้าสายยาวแล้วขด ๆ กันอยู่ มันได้นับไม๊
ถ้าสายที่วิ่ง ไปวกที่ถนน แล้ววกกลับมาที่เดิมก่อนวกไปอีกทีไปบ้านลูกค้า
แล้วว Google map มันไม่รู้ว่าสายเราวก มันก็คำนวนตามเส้นทางของมัน แล้วเราก็ได้ค่าที่ผผิดพลาดอ่ะนะครับ
|
|
|
|
|
Date :
2010-09-02 11:11:37 |
By :
deawx |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
เอาพิกัดทั้งหมดลงใน db ให้หมดก่อนอ่ะครับ
เรื่องการคำนวนต่าง ๆ ก็ไม่ยากอะไรเลยหละครับ
|
|
|
|
|
Date :
2010-09-02 15:42:25 |
By :
deawx |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
พิกัดเนี่ยสามารถใช้เป็นฐานข้อมูล *.csv ได้ใช่ไหมคับ
|
|
|
|
|
Date :
2010-09-02 15:56:04 |
By :
ngpalm27 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ได้ครับผม ถ้าข้อมูล csv มี lat long และก็ชื่อสถานที่ ก็สามารถนำเข้า db ได้หละครับ เพื่อใช้งานขั้นต่อไป
|
|
|
|
|
Date :
2010-09-02 17:58:33 |
By :
deawx |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ล่าสุดได้แก้ไขโค้ดคำนวณระยะทางและความแรงของสัญญาณได้แล้วคับ
แต่พิกัดมันเยอะ เลยอยากทำลง db แต่ใช้คำสั่งไม่เป็นอ่ะคับ แต่เคยเห็นบางเว็บก็เขียนลง text file
ยังไงรบกวนช่วยนำเสนอคำสั่งเพื่อดึงพิกัดและข้อมูลจาก db ผ่าน google map ด้วยคับ
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></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=ABQIAAAAiOY-qJhvEGWCj2x02oGhIxSv-Bmf33CSQVJOyrsioyUisQmXPBR71ZNe7krWOuOacdYjjIo-SdmqlQ" 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 Array();
center[0] = new GLatLng(6.614771,100.066507); // á˹ش
center[1] = new GLatLng(6.618911,100.071759); // á˹ش
center[2] = new GLatLng(6.623067,100.072918); // á˹ش
center[3] = new GLatLng(6.608648,100.064142); // á˹ش
center[4] = new GLatLng(6.638222,100.072339); // á˹ش
center[5] = new GLatLng(6.651202,100.075729); // á˹ش
center[6] = new GLatLng(6.642207,100.073476); // á˹ش
center[7] = new GLatLng(6.645703,100.074463); // á˹ش
center[8] = new GLatLng(6.653908,100.076995); // á˹ش
center[9] = new GLatLng(6.670532,100.08472); // á˹ش
map.setCenter(center[0], 13); // Ţ 13 ͤ zoom öѺͧ
map.setUIToDefault();
directions = new GDirections(map);
var directOpt= { "preserveViewport": false, "getSteps": true ,"getPolyline":true}; // ˹ٻẺͧ鹷ҧ
var marker = Array();
var markerGoTo = Array();
function Line(m1, m2) {
this.m1 = m1;
this.m2 = m2;
}
Line.prototype.increment = function() {
directions.load("from: "+this.m1.getPoint()+" to: "+this.m2.getPoint(),directOpt);
}
var i=0;
for(i=0;i<10;i++){
marker[i] = new GMarker(center[i], {draggable: false}); // ҧ mark
map.addOverlay(marker[i]);
markerGoTo[i] = new GMarker(center[i], {draggable: true}); // ҧ mark աѹ
map.addOverlay(markerGoTo[i]);
GEvent.bind(markerGoTo[i], "dragend",line = new Line(markerGoTo[i], marker[i]), line.increment );
}
GEvent.addListener(directions, "load", function() {
var drivingDistanceKilometers = directions.getDistance().meters / 1000; // зҧ
$("#distanceDrive").val(drivingDistanceKilometers); // Ӥҷ textbox
var drivingDistanceMb = directions.getDistance().meters / 100; // Ҥ MB ѹ Ѻ
$("#distanceMb").val(drivingDistanceMb); // Ӥҷ textbox
if(document.form_get_detailMap.distanceDrive.value <= 3.7 ){
document.form_get_detailMap.distanceMb.value = 6.1;
}else{
document.form_get_detailMap.distanceMb.value = 2;
}
});
}
}
</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="">
Distance
<input name="distanceDrive" type="text" id="distanceDrive" value="0" />
Km.
speed
<input name="distanceMb" type="text" id="distanceMb" value="0" />
MB
<input type="submit" name="button" id="button" value="Save" />
<input type="button" name="Reset" id="Reset" value="Cancel to start again" />
</form>
</div>
</body>
</html>
|
|
|
|
|
Date :
2010-09-08 00:48:18 |
By :
chinjung |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ผมเคยทำเมื่อปีที่แล้วนะ ไม่ค่อยรู้อะไรมาก..
[font=Verdana]ยังไงรบกวนช่วยนำเสนอคำสั่งเพื่อดึงพิกัดและข้อมูลจาก db ผ่าน google map ด้วยคับ[/font]
1 ตอนอัพเดทข้อมูลขึ้นไป จะสร้าง xml ไว้เพื่อจะเรียกใช้ในเวลาต่อมา..
อีกอย่างไม่ทราบว่าขอบเขตงานกว้างแค่ไหนซับซ้อนไหม?? ถ้าซับซ้อน ขอมูลพิกัดเยอะ จะทำให้ ในแมพมองไม่เห็นอะไรเลย..
2 ในส่วนของการดึงข้อมูลลงมาจากดาต้าเบส..
ก็ไม่ยากนะครับอยู่ที่ตอนคุณเขียนตัว อัพเดทพิกัดลงไปมากกว่า ว่าละเอียดมาน้อยแค่ไหน หรือทำอย่างไร ผ่านฟอม หรือ sql ดั้มลงไป
3 ถ้าคุณผ่านฟอม ผมว่าส่วนที่เหลือคงไม่ยากแล้ว.. สู้ๆครับ
ปล. มีอะไรก็สอบถามมาได้นะครับ ^^
|
|
|
|
|
Date :
2010-09-08 01:53:52 |
By :
อาร์ม |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ขอโค้ดกับdbได้ไหมครับ
ผมกำลังทำอยู่เหมือนกันครับ
|
|
|
|
|
Date :
2011-04-29 16:35:19 |
By :
tham |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
จิ้มที่ชื่อผมแล้วดูบทความที่ผมเขียนไว้แล้วประยุกต์ดูครับ
|
|
|
|
|
Date :
2014-11-05 14:01:40 |
By :
deawx |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 03
|