从谷歌地图和每2公里地图上的点获取路线 [英] get route from google maps and points on the map each 2 km
本文介绍了从谷歌地图和每2公里地图上的点获取路线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
谢谢
代码补充：
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8>
< title>沿着路线创建标记 - jsFiddle demo by doktormolle< / title>
<！ -
< script type ='text / javascript'src ='/ js / lib / dummy.js'>< / script>
< link rel =stylesheettype =text / csshref =/ css / normalize.css>
< link rel =stylesheettype =text / csshref =/ css / result-light.css>
- >
< script type ='text / javascript'> //<！[CDATA [
/ **
*沿着google.maps.DirectionsRoute创建标记
*
* @param路由对象google.maps.DirectionsRoute
* @param dist int以米为单位的里程碑间隔
* @ param opts object google.maps.MarkerOptions
* @return array使用创建的google.maps.Marker对象填充的数组
** /
函数gMilestone（route，dist，opts ）
{
var marker = []，
geo = google.maps.geometry.spherical，
path = route.overview_path，
point =路径[0]，
distance = 0，
leg，
溢出，
pos;
for（var p = 1; p
leg = Math.round（geo.computeDistanceBetween（point，path [p] ））;
d1 =距离+ 0
距离+ =腿;
overflow = dist-（d1％dist）;
if（距离> = dist& leg> =溢出）
{
if（overflow&& leg> = overflow）
{
pos = geo.computeOffset（point，overflow，geo.computeHeading（point，path [p]））;
opts.position = pos;
markers.push（新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（新google.maps.Marker（opts））;
distance- = dist;
}
point = path [p]
}
document.getElementById（pMsg）。innerHTML = markers;
//警报（标记）;
返回标记;
}
//]]>
< / script>
< / head>
< body onload =ginit（）>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?libraries=geometry&sensor=false>< / script>
< div id =map_canvasstyle =float：left; width：70％; height：400px;>< / div>
< ul>< / ul>
< p id =pMsg>< / p>
< script>
var directions = {};
函数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}，
渲染：{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}，
渲染：{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
selects.options [choices.options.length] = new Option（dists [d]，dists并[d]，d == 0，d == 0）; $ var
$ b for（var r = 0; r
bounds.extend（routes [r] .request。目的地）;
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）;
}
函数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）; （var m = 0; m
$ b set [m] .setMap（（set.visible） ？图：空）;
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）;
$ b函数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]）
{
//删除记号
（方向[this.routeId] .sets中的变量k）
{$ b $对于（var m = 0; m<方向[this.routeId] .sets [k] .length; ++ m）
{
方向[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 （回应）;
}
}）;
}
< / script>
< / body>
< / html>
解决方案
其他人的回答： console.log（标记） - 有GPS坐标 - 参见代码+查看以米为单位的里程碑的间隔。我没有使用PHP，但JavaScript。
<！DOCTYPE html>
< html>
< head>
< meta http-equiv =content-typecontent =text / html; charset = UTF-8>
< title>沿着路线创建标记 - jsFiddle demo by doktormolle< / title>
<！ -
< script type ='text / javascript'src ='/ js / lib / dummy.js'>< / script>
< link rel =stylesheettype =text / csshref =/ css / normalize.css>
< link rel =stylesheettype =text / csshref =/ css / result-light.css>
- >
< script type ='text / javascript'> //<！[CDATA [
/ **
*沿着google.maps.DirectionsRoute创建标记
*
* @param路由对象google.maps.DirectionsRoute
* @param dist int以米为单位的里程碑间隔
* @ param opts object google.maps.MarkerOptions
* @return array使用创建的google.maps.Marker对象填充的数组
** /
函数gMilestone（route，dist，opts ）
{
var marker = []，
geo = google.maps.geometry.spherical，
path = route.overview_path，
point =路径[0]，
distance = 0，
leg，
溢出，
pos;
for（var p = 1; p
leg = Math.round（geo.computeDistanceBetween（point，path [p] ））;
d1 =距离+ 0
距离+ =腿;
overflow = dist-（d1％dist）;
if（距离> = dist& leg> =溢出）
{
if（overflow&& leg> = overflow）
{
pos = geo.computeOffset（point，overflow，geo.computeHeading（point，path [p]））;
opts.position = pos;
markers.push（新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（新google.maps.Marker（opts））;
distance- = dist;
}
point = path [p]
}
document.getElementById（pMsg）。innerHTML = markers;
console.log（markers）; //警报（标记）;
（标记中的var键）{
var obj = markers [key];
console.log（obj）;
console.log（obj ['position'] ['k']）;
/ *
for（var prop in obj）{
//重要检查这是对象自己的属性
//不是从原型prop继承的
if（obj .hasOwnProperty（prop））{
alert（prop +=+ obj [prop]）;
}
} * /
}
返回标记;
}
//]]>
< / script>
< / head>
< body onload =ginit（）>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?libraries=geometry&sensor=false>< / script>
< div id =map_canvasstyle =float：left; width：70％; height：400px;>< / div>
< ul>< / ul>
< p id =pMsg>< / p>
< script>
var directions = {};
函数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}，
渲染：{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}，
渲染：{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
selects.options [choices.options.length] = new Option（dists [d]，dists并[d]，d == 0，d == 0）; $ var
$ b for（var r = 0; r
bounds.extend（routes [r] .request。目的地）;
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）;
}
函数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）; （var m = 0; m
$ b set [m] .setMap（（set.visible） ？图：空）;
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）;
$ b函数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]）
{
//删除记号
（方向[this.routeId] .sets中的变量k）
{$ b $对于（var m = 0; m<方向[this.routeId] .sets [k] .length; ++ m）
{
方向[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 （回应）;
}
}）;
}
< / script>
< / body>
< / html>
I know GPS coordinates my start and end point. Now I would like to get driving route for this journey. And then get GPS coordinates of every 2nd km on this route. How can I do this with php/javascript?
Thanks
Code added:
<!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>
解决方案
My answer for other people: Use code in comments and console.log(markers) - there are GPS coordinates - see in code + see interval for milestones in meters. I did not use php but 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>
这篇关于从谷歌地图和每2公里地图上的点获取路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
