ขอถามเรื่อง Car Trip(รถวิ่งบนแผนที่) ใน Google Maps API คะ
งานนี้ตอบไมได้ แต่มาขอบคุณสำหรับตัวอย่าง
Date :
2009-11-11 15:05:19By :
plakrim
เป็นตัวอย่างที่ดูดีมากๆครับ
Date :
2009-11-11 15:25:47By :
lozomac
ในตัวอย่างนั้น หนูดัดแปลงนิดหน่อย โดยใช้ listBox แทน โดยดึงข้อมูล ละติจูด ลองติจูดของสถานที่ๆต่างที่มีอยู่แล้วมาใช้งานคะ แต่มันก็ได้แค่ต้นทางและปลายทาง
Date :
2009-11-11 17:43:56By :
KhemTiD
ขอ link หน่อยคุณ KhemTiD จะได้ไปด้อมๆ มองๆ source code ด้วย อยากได้อ่ะครับ
Date :
2009-11-11 17:56:23By :
peterxp
ว้าาาา ไม่มีใครตอบได้เลยหรอคะ
Date :
2009-11-12 01:06:10By :
KhemTiD
แหะๆ น่าสนใจครับ
Date :
2009-11-12 23:44:42By :
indysoft
Car.phpCode (PHP) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<!-- Mirrored from econym.org.uk/gmap/example_cartrip2.htm by HTTrack Website Copier/3.x [XR&CO'2010], Fri, 21 Dec 2012 06:02:07 GMT -->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw" type="text/javascript"></script>
<script src="epoly.js" type="text/javascript"></script>
</head>
<body onunload="GUnload()">
<div id="controls">
<form onsubmit="start();return false" action="#">
Enter start and end addresses.<br />
<input type="text" size="80" maxlength="200" id="startpoint" value="Briarcrest Rd, 90046" /><br />
<input type="text" size="80" maxlength="200" id="endpoint" value="Hollywood Hills Rd, [email protected] ,-118.39089" /><br />
<input type="submit" value="Start" />
</form>
</div>
<div id="map" style="width: 700px; height: 500px"></div>
<div id="step"> </div>
<div id="distance">Miles: 0.00</div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(0,0),2);
var dirn = new GDirections();
var step = 5; // metres
var tick = 100; // milliseconds
var poly;
var poly2;
var lastVertex = 0;
var eol;
var car = new GIcon();
car.image="caricon.png"
car.iconSize=new GSize(32,18);
car.iconAnchor=new GPoint(16,9);
var marker;
var k=0;
var stepnum=0;
var speed = "";
function updatePoly(d) {
// Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow
if (poly2.getVertexCount() > 20) {
poly2=new GPolyline([poly.getVertex(lastVertex-1)]);
map.addOverlay(poly2)
}
if (poly.GetIndexAtDistance(d) < lastVertex+2) {
if (poly2.getVertexCount()>1) {
poly2.deleteVertex(poly2.getVertexCount()-1)
}
poly2.insertVertex(poly2.getVertexCount(),poly.GetPointAtDistance(d));
} else {
poly2.insertVertex(poly2.getVertexCount(),poly.getVertex(lastVertex++));
}
}
function animate(d) {
if (d>eol) {
document.getElementById("step").innerHTML = "<b>Trip completed<\/b>";
document.getElementById("distance").innerHTML = "Miles: "+(d/1609.344).toFixed(2);
return;
}
var p = poly.GetPointAtDistance(d);
if (k++>=180/step) {
map.panTo(p);
k=0;
}
marker.setPoint(p);
document.getElementById("distance").innerHTML = "Miles: "+(d/1609.344).toFixed(2)+speed;
if (stepnum+1 < dirn.getRoute(0).getNumSteps()) {
if (dirn.getRoute(0).getStep(stepnum).getPolylineIndex() < poly.GetIndexAtDistance(d)) {
stepnum++;
var steptext = dirn.getRoute(0).getStep(stepnum).getDescriptionHtml();
document.getElementById("step").innerHTML = "<b>Next:<\/b> "+steptext;
var stepdist = dirn.getRoute(0).getStep(stepnum-1).getDistance().meters;
var steptime = dirn.getRoute(0).getStep(stepnum-1).getDuration().seconds;
var stepspeed = ((stepdist/steptime) * 2.24).toFixed(0);
step = stepspeed/2.5;
speed = "<br>Current speed: " + stepspeed +" mph";
}
} else {
if (dirn.getRoute(0).getStep(stepnum).getPolylineIndex() < poly.GetIndexAtDistance(d)) {
document.getElementById("step").innerHTML = "<b>Next: Arrive at your destination<\/b>";
}
}
updatePoly(d);
setTimeout("animate("+(d+step)+")", tick);
}
GEvent.addListener(dirn,"load", function() {
document.getElementById("controls").style.display="none";
poly=dirn.getPolyline();
eol=poly.Distance();
map.setCenter(poly.getVertex(0),17);
map.addOverlay(new GMarker(poly.getVertex(0),G_START_ICON));
map.addOverlay(new GMarker(poly.getVertex(poly.getVertexCount()-1),G_END_ICON));
marker = new GMarker(poly.getVertex(0),{icon:car});
map.addOverlay(marker);
var steptext = dirn.getRoute(0).getStep(stepnum).getDescriptionHtml();
document.getElementById("step").innerHTML = steptext;
poly2 = new GPolyline([poly.getVertex(0)]);
map.addOverlay(poly2);
setTimeout("animate(0)",2000); // Allow time for the initial map display
});
GEvent.addListener(dirn,"error", function() {
alert("Location(s) not recognised. Code: "+dirn.getStatus().code);
});
function start() {
var startpoint = document.getElementById("startpoint").value;
var endpoint = document.getElementById("endpoint").value;
dirn.loadFromWaypoints([startpoint,endpoint],{getPolyline:true,getSteps:true});
}
}
// This Javascript is based on code provided by the
// Community Church Javascript Team
// http://www.bisphamchurch.org.uk/
// http://econym.org.uk/gmap/
//]]>
</script>
</body>
<!-- Mirrored from econym.org.uk/gmap/example_cartrip2.htm by HTTrack Website Copier/3.x [XR&CO'2010], Fri, 21 Dec 2012 06:02:08 GMT -->
</html>
Code (PHP) //////Nick/////
GPolygon.prototype.Contains = function(point) {
var j=0;
var oddNodes = false;
var x = point.lng();
var y = point.lat();
for (var i=0; i < this.getVertexCount(); i++) {
j++;
if (j == this.getVertexCount()) {j = 0;}
if (((this.getVertex(i).lat() < y) && (this.getVertex(j).lat() >= y))
|| ((this.getVertex(j).lat() < y) && (this.getVertex(i).lat() >= y))) {
if ( this.getVertex(i).lng() + (y - this.getVertex(i).lat())
/ (this.getVertex(j).lat()-this.getVertex(i).lat())
* (this.getVertex(j).lng() - this.getVertex(i).lng())<x ) {
oddNodes = !oddNodes
}
}
}
return oddNodes;
}
GPolygon.prototype.Area = function() {
var a = 0;
var j = 0;
var b = this.Bounds();
var x0 = b.getSouthWest().lng();
var y0 = b.getSouthWest().lat();
for (var i=0; i < this.getVertexCount(); i++) {
j++;
if (j == this.getVertexCount()) {j = 0;}
var x1 = this.getVertex(i).distanceFrom(new GLatLng(this.getVertex(i).lat(),x0));
var x2 = this.getVertex(j).distanceFrom(new GLatLng(this.getVertex(j).lat(),x0));
var y1 = this.getVertex(i).distanceFrom(new GLatLng(y0,this.getVertex(i).lng()));
var y2 = this.getVertex(j).distanceFrom(new GLatLng(y0,this.getVertex(j).lng()));
a += x1*y2 - x2*y1;
}
return Math.abs(a * 0.5);
}
GPolygon.prototype.Distance = function() {
var dist = 0;
for (var i=1; i < this.getVertexCount(); i++) {
dist += this.getVertex(i).distanceFrom(this.getVertex(i-1));
}
return dist;
}
GPolygon.prototype.Bounds = function() {
var bounds = new GLatLngBounds();
for (var i=0; i < this.getVertexCount(); i++) {
bounds.extend(this.getVertex(i));
}
return bounds;
}
GPolygon.prototype.GetPointAtDistance = function(metres) {
if (metres == 0) return this.getVertex(0);
if (metres < 0) return null;
var dist=0;
var olddist=0;
for (var i=1; (i < this.getVertexCount() && dist < metres); i++) {
olddist = dist;
dist += this.getVertex(i).distanceFrom(this.getVertex(i-1));
}
if (dist < metres) {return null;}
var p1= this.getVertex(i-2);
var p2= this.getVertex(i-1);
var m = (metres-olddist)/(dist-olddist);
return new GLatLng( p1.lat() + (p2.lat()-p1.lat())*m, p1.lng() + (p2.lng()-p1.lng())*m);
}
GPolygon.prototype.GetPointsAtDistance = function(metres) {
var next = metres;
var points = [];
if (metres <= 0) return points;
var dist=0;
var olddist=0;
for (var i=1; (i < this.getVertexCount()); i++) {
olddist = dist;
dist += this.getVertex(i).distanceFrom(this.getVertex(i-1));
while (dist > next) {
var p1= this.getVertex(i-1);
var p2= this.getVertex(i);
var m = (next-olddist)/(dist-olddist);
points.push(new GLatLng( p1.lat() + (p2.lat()-p1.lat())*m, p1.lng() + (p2.lng()-p1.lng())*m));
next += metres;
}
}
return points;
}
GPolygon.prototype.GetIndexAtDistance = function(metres) {
if (metres == 0) return this.getVertex(0);
if (metres < 0) return null;
var dist=0;
var olddist=0;
for (var i=1; (i < this.getVertexCount() && dist < metres); i++) {
olddist = dist;
dist += this.getVertex(i).distanceFrom(this.getVertex(i-1));
}
if (dist < metres) {return null;}
return i;
}
GPolygon.prototype.Bearing = function(v1,v2) {
if (v1 == null) {
v1 = 0;
v2 = this.getVertexCount()-1;
} else if (v2 == null) {
v2 = v1+1;
}
if ((v1 < 0) || (v1 >= this.getVertexCount()) || (v2 < 0) || (v2 >= this.getVertexCount())) {
return;
}
var from = this.getVertex(v1);
var to = this.getVertex(v2);
if (from.equals(to)) {
return 0;
}
var lat1 = from.latRadians();
var lon1 = from.lngRadians();
var lat2 = to.latRadians();
var lon2 = to.lngRadians();
var angle = - Math.atan2( Math.sin( lon1 - lon2 ) * Math.cos( lat2 ), Math.cos( lat1 ) * Math.sin( lat2 ) - Math.sin( lat1 ) * Math.cos( lat2 ) * Math.cos( lon1 - lon2 ) );
if ( angle < 0.0 ) angle += Math.PI * 2.0;
angle = angle * 180.0 / Math.PI;
return parseFloat(angle.toFixed(1));
}
GPolyline.prototype.Contains = GPolygon.prototype.Contains;
GPolyline.prototype.Area = GPolygon.prototype.Area;
GPolyline.prototype.Distance = GPolygon.prototype.Distance;
GPolyline.prototype.Bounds = GPolygon.prototype.Bounds;
GPolyline.prototype.GetPointAtDistance = GPolygon.prototype.GetPointAtDistance;
GPolyline.prototype.GetPointsAtDistance = GPolygon.prototype.GetPointsAtDistance;
GPolyline.prototype.GetIndexAtDistance = GPolygon.prototype.GetIndexAtDistance;
GPolyline.prototype.Bearing = GPolygon.prototype.Bearing;
Date :
2012-12-22 04:25:09By :
nick101
รบกวนถามหน่อยนะค่ะ วิธีทำให้รถวิ่งบนแผนที่นี่วิธีทำยังไงอ่าค่ะ
Date :
2013-08-26 18:48:21By :
jibjib
Server 01
Load balance : Server 01
