我知道GPS会协调我的起点和终点。现在我想开始这段旅程的行车路线。然后在这条路线上获得每2公里的GPS坐标。我怎么能用php / javascript做到这一点？
由于
已添加代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>creation of markers along a route - jsFiddle demo by doktormolle</title>
<!--
< script type='text/javascript' src='/js/lib/dummy.js'></script >
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
-->
<script type='text/javascript'>//<![CDATA[
/**
* creates markers along a google.maps.DirectionsRoute
*
* @param route object google.maps.DirectionsRoute
* @param dist int interval for milestones in meters
* @param opts object google.maps.MarkerOptions
* @return array Array populated with created google.maps.Marker-objects
**/
function gMilestone(route,dist,opts)
{
var markers=[],
geo=google.maps.geometry.spherical,
path=route.overview_path,
point=path[0],
distance=0,
leg,
overflow,
pos;
for(var p=1;p<path.length;++p)
{
leg=Math.round(geo.computeDistanceBetween(point,path[p]));
d1=distance+0
distance+=leg;
overflow=dist-(d1%dist);
if(distance>=dist && leg>=overflow)
{
if(overflow && leg>=overflow)
{
pos=geo.computeOffset(point,overflow,geo.computeHeading(point,path[p]));
opts.position=pos;
markers.push(new google.maps.Marker(opts));
distance-=dist;
}
while(distance>=dist)
{
pos=geo.computeOffset(point,dist+overflow,geo.computeHeading(point,path[p]));
opts.position=pos;
markers.push(new google.maps.Marker(opts));
distance-=dist;
}
}
point=path[p]
}
document.getElementById("pMsg").innerHTML = markers;
//alert(markers);
return markers;
}
//]]>
</script>
</head>
<body onload="ginit()">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
<div id="map_canvas" style="float:left;width:70%;height:400px;"></div>
<ul></ul>
<p id="pMsg"></p>
<script>
var directions={};
function ginit()
{
var opts = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(52.524268, 13.406290000000013)
}
map = new google.maps.Map(document.getElementById("map_canvas"), opts);
var routes=[
{ label:'Erkner',
request:{
origin: new google.maps.LatLng(52.524268, 13.406290000000013),
destination: new google.maps.LatLng(52.4244119, 13.749783200000024),
travelMode: google.maps.DirectionsTravelMode.DRIVING},
rendering:{marker:{icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'},draggable:true}
},
/*{ label:'Potsdam',
request:{
origin: new google.maps.LatLng(52.524268, 13.406290000000013),
destination: new google.maps.LatLng(52.3941887, 13.072690999999963),
travelMode: google.maps.DirectionsTravelMode.DRIVING},
rendering:{marker:{icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'},draggable:true}
},
{ label:'Bernau',
request:{
origin: new google.maps.LatLng(52.524268, 13.406290000000013),
destination: new google.maps.LatLng(52.683483, 13.587553999999955),
travelMode: google.maps.DirectionsTravelMode.DRIVING},
rendering:{marker:{icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png'},draggable:true}
}*/
];
var bounds=new google.maps.LatLngBounds();
var dists=[5000,3000,1000];
var selects=document.createElement('select');
list=document.getElementsByTagName('ul')[0];
for(var d=0;d<dists.length;++d)
{
selects.options[selects.options.length]=new Option(dists[d],dists[d],d==0,d==0);
}
for(var r=0;r<routes.length;++r)
{
bounds.extend(routes[r].request.destination);
routes[r].rendering.routeId='r'+r+new Date().getTime();
routes[r].rendering.dist=dists[0];
var select=selects.cloneNode(true);
select.setAttribute('name',routes[r].rendering.routeId);
select.onchange=function(){directions[this.name].renderer.dist=this.value;setMarkers(this.name)};
list.appendChild(document.createElement('li'));
list.lastChild.appendChild(select);
list.lastChild.appendChild(document.createTextNode(routes[r].label));
requestRoute(routes[r],map);
}
map.fitBounds(bounds) ;
}
function setMarkers(ID)
{
var direction=directions[ID],
renderer=direction.renderer,
dist=renderer.dist,
marker=renderer.marker,
map=renderer.getMap(),
dirs=direction.renderer.getDirections();
marker.map=map;
for(var k in direction.sets)
{
var set=directions[ID].sets[k];
set.visible=!!(k===dist);
for(var m=0;m<set.length;++m)
{
set[m].setMap((set.visible)?map:null);
}
}
if(!direction.sets[dist])
{
if(dirs.routes.length)
{
var route=dirs.routes[0];
var az=0;
for(var i=0;i<route.legs.length;++i)
{
if(route.legs[i].distance)
{
az+=route.legs[i].distance.value;
}
}
dist=Math.max(dist,Math.round(az/100));
direction.sets[dist]=gMilestone(route,dist,marker);
}
}
}
function requestRoute(route,map)
{
if(!window.gDirSVC)
{
window.gDirSVC = new google.maps.DirectionsService();
}
var renderer=new google.maps.DirectionsRenderer(route.rendering);
var renderer=new google.maps.DirectionsRenderer(route.rendering);
renderer.setMap(map);
renderer.setOptions({preserveViewport:true})
google.maps.event.addListener(renderer, 'directions_changed', function() {
if(directions[this.routeId])
{
//remove markers
for(var k in directions[this.routeId].sets)
{
for(var m=0;m<directions[this.routeId].sets[k].length;++m)
{
directions[this.routeId].sets[k][m].setMap(null);
}
}
}
directions[this.routeId]={renderer:this,sets:{}};
setMarkers(this.routeId);
});
window.gDirSVC.route(route.request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
renderer.setDirections(response);
}
});
}
</script>
</body>
</html>
答案 0 :(得分：2)
我对其他人的回答：在评论和console.log（标记）中使用代码 - 有GPS坐标 - 请参阅代码+查看以米为单位的里程碑间隔。我没有使用PHP但javascript。
working fiddle with code below
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>creation of markers along a route - jsFiddle demo by doktormolle</title>
<!--
< script type='text/javascript' src='/js/lib/dummy.js'></script >
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
-->
<script type='text/javascript'>//<![CDATA[
/**
* creates markers along a google.maps.DirectionsRoute
*
* @param route object google.maps.DirectionsRoute
* @param dist int interval for milestones in meters
* @param opts object google.maps.MarkerOptions
* @return array Array populated with created google.maps.Marker-objects
**/
function gMilestone(route,dist,opts)
{
var markers=[],
geo=google.maps.geometry.spherical,
path=route.overview_path,
point=path[0],
distance=0,
leg,
overflow,
pos;
for(var p=1;p<path.length;++p)
{
leg=Math.round(geo.computeDistanceBetween(point,path[p]));
d1=distance+0
distance+=leg;
overflow=dist-(d1%dist);
if(distance>=dist && leg>=overflow)
{
if(overflow && leg>=overflow)
{
pos=geo.computeOffset(point,overflow,geo.computeHeading(point,path[p]));
opts.position=pos;
markers.push(new google.maps.Marker(opts));
distance-=dist;
}
while(distance>=dist)
{
pos=geo.computeOffset(point,dist+overflow,geo.computeHeading(point,path[p]));
opts.position=pos;
markers.push(new google.maps.Marker(opts));
distance-=dist;
}
}
point=path[p]
}
document.getElementById("pMsg").innerHTML = markers;
console.log(markers); //alert(markers);
for (var key in markers) {
var obj = markers[key];
console.log(obj);
console.log(obj['position']['k']);
/*
for (var prop in obj) {
// important check that this is objects own property
// not from prototype prop inherited
if(obj.hasOwnProperty(prop)){
alert(prop + " = " + obj[prop]);
}
}*/
}
return markers;
}
//]]>
</script>
</head>
<body onload="ginit()">
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false"></script>
<div id="map_canvas" style="float:left;width:70%;height:400px;"></div>
<ul></ul>
<p id="pMsg"></p>
<script>
var directions={};
function ginit()
{
var opts = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(52.524268, 13.406290000000013)
}
map = new google.maps.Map(document.getElementById("map_canvas"), opts);
var routes=[
{ label:'Erkner',
request:{
origin: new google.maps.LatLng(52.524268, 13.406290000000013),
destination: new google.maps.LatLng(52.4244119, 13.749783200000024),
travelMode: google.maps.DirectionsTravelMode.DRIVING},
rendering:{marker:{icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'},draggable:true}
},
/*{ label:'Potsdam',
request:{
origin: new google.maps.LatLng(52.524268, 13.406290000000013),
destination: new google.maps.LatLng(52.3941887, 13.072690999999963),
travelMode: google.maps.DirectionsTravelMode.DRIVING},
rendering:{marker:{icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'},draggable:true}
},
{ label:'Bernau',
request:{
origin: new google.maps.LatLng(52.524268, 13.406290000000013),
destination: new google.maps.LatLng(52.683483, 13.587553999999955),
travelMode: google.maps.DirectionsTravelMode.DRIVING},
rendering:{marker:{icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png'},draggable:true}
}*/
];
var bounds=new google.maps.LatLngBounds();
var dists=[10000,5000,3000,1000];
var selects=document.createElement('select');
list=document.getElementsByTagName('ul')[0];
for(var d=0;d<dists.length;++d)
{
selects.options[selects.options.length]=new Option(dists[d],dists[d],d==0,d==0);
}
for(var r=0;r<routes.length;++r)
{
bounds.extend(routes[r].request.destination);
routes[r].rendering.routeId='r'+r+new Date().getTime();
routes[r].rendering.dist=dists[0];
var select=selects.cloneNode(true);
select.setAttribute('name',routes[r].rendering.routeId);
select.onchange=function(){directions[this.name].renderer.dist=this.value;setMarkers(this.name)};
list.appendChild(document.createElement('li'));
list.lastChild.appendChild(select);
list.lastChild.appendChild(document.createTextNode(routes[r].label));
requestRoute(routes[r],map);
}
map.fitBounds(bounds) ;
}
function setMarkers(ID)
{
var direction=directions[ID],
renderer=direction.renderer,
dist=renderer.dist,
marker=renderer.marker,
map=renderer.getMap(),
dirs=direction.renderer.getDirections();
marker.map=map;
for(var k in direction.sets)
{
var set=directions[ID].sets[k];
set.visible=!!(k===dist);
for(var m=0;m<set.length;++m)
{
set[m].setMap((set.visible)?map:null);
}
}
if(!direction.sets[dist])
{
if(dirs.routes.length)
{
var route=dirs.routes[0];
var az=0;
for(var i=0;i<route.legs.length;++i)
{
if(route.legs[i].distance)
{
az+=route.legs[i].distance.value;
}
}
dist=Math.max(dist,Math.round(az/100));
direction.sets[dist]=gMilestone(route,dist,marker);
}
}
}
function requestRoute(route,map)
{
if(!window.gDirSVC)
{
window.gDirSVC = new google.maps.DirectionsService();
}
var renderer=new google.maps.DirectionsRenderer(route.rendering);
var renderer=new google.maps.DirectionsRenderer(route.rendering);
renderer.setMap(map);
renderer.setOptions({preserveViewport:true})
google.maps.event.addListener(renderer, 'directions_changed', function() {
if(directions[this.routeId])
{
//remove markers
for(var k in directions[this.routeId].sets)
{
for(var m=0;m<directions[this.routeId].sets[k].length;++m)
{
directions[this.routeId].sets[k][m].setMap(null);
}
}
}
directions[this.routeId]={renderer:this,sets:{}};
setMarkers(this.routeId);
});
window.gDirSVC.route(route.request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
renderer.setDirections(response);
}
});
}
</script>
</body>
</html>