问题描述
目前我能够获取所有从源到目的地的纬度和经度。
但有了这个我只能拿到1路。
现在我想如果能选择从不同的路线路径从源到目的地1路路径。
和我也想存储这些所有的纬度和经度到我的数据库。
数据库结构：摆脱纬度经度
我使用asp.net C＃技术。
我怎样才能为选择路径的选项，按照这条道路需要得到所有的纬度和经度。
和也，所有的纬度和经度需要在我使用C＃code数据库来存储。
我怎么能执行这个任务？
我使用belowe code：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT; META NAME =视CONTENT =初始规模= 1.0，用户可扩展性=无＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT;地址解析服务＆LT; /标题＆GT;
＆LT;风格＆GT;
HTML，身体，＃地图帆布{
高度：100％;
最小高度：600像素;
最小宽度：700像素;
保证金：0像素;
填充：0像素;
} ＃地图帆布{
高度：50％;
} #panel {
位置：绝对的;
上图：5像素;
左：50％;
保证金左：-180px;
的z-index：5;
背景色：#FFF;
填充：5像素;
边框：1px的固体＃999;
}
＆LT; /风格＆GT;
＆所述; SCRIPT SRC =https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =面板＆GT;
＆LT;标签＆gt;
起源
＆LT;输入ID =出身类型=文本值=＆GT;
＆LT; /标签＆gt;
＆LT;标签＆gt;
目的地
＆LT;输入ID =目的地类型=文本值=＆GT;
＆LT; /标签＆gt;
＆LT;输入类型=按钮值=GetDirections的onclick =calcRoute（）＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =地图画布＆GT;＆LT; / DIV＆GT;
＆LT; DIV ID =顶点容器＆GT;
＆LT;标签＆gt;积分和LT; /标签＆gt;
＆所述;微升的id =顶点＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
VAR directionsDisplay;
VAR为DirectionsService =新google.maps.DirectionsService（）;
VAR地图; 函数初始化（）{
directionsDisplay =新google.maps.DirectionsRenderer（）; VAR的MapOptions = {
变焦：7，
中心：新google.maps.LatLng（25.5911，86.1611）
};
地图=新google.maps.Map（的document.getElementById（'地图画布'）的MapOptions）;
directionsDisplay.setMap（地图）;
} 功能calcRoute（）{
VAR开始=的document.getElementById（'原点'）值。
VAR结束=的document.getElementById（'目标'）值。
VAR请求= {
产地：开始，
目的地：最后，
travelMode：google.maps.TravelMode.DRIVING
};
directionsService.route（要求，功能（响应状态）{
如果（状态== google.maps.DirectionsStatus.OK）{
directionsDisplay.setDirections（响应）;
如果（response.routes＆放大器;＆放大器; response.routes.length大于0）{
VAR路线= response.routes;
对于（VAR J = 0; J＆LT; routes.length; J ++）{
VAR点=途径[J] .overview_path;
变种微升=的document.getElementById（顶点）;
对于（VAR I = 0; I＆LT; points.length;我++）{
VAR李=使用document.createElement（礼）;
li.innerHTML = getLiText（分[I]）;
ul.appendChild（LI）;
}
}
}
}
}）;
}
功能getLiText（点）{
VAR经纬度= point.lat（）
LNG = point.lng（）;
返回纬度：+纬度+LNG+ LNG;
} google.maps.event.addDomListener（窗口'负荷'，初始化）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
要获得谷歌地图送你，你必须建立自己的几个选项 google.maps.DirectionsRequest 对象 provideRouteAlternatives 属性设置为真正，这样的事情：
VAR请求= {
产地：开始，
目的地：最后，
travelMode：google.maps.TravelMode.DRIVING，
provideRouteAlternatives：真
};
然后 google.maps.DirectionsResult 目标回报，你路线这是一个阵列＆LT;为DirectionsRoute＆GT; 通过几个为DirectionsRoute 对象（normaly它仅包含一个对象时， provideRouteAlternatives 设置为假）。
因此，从code你使用的是：
VAR路线= response.routes;
路线将有几个要素遍历。有你有你的几个路径。
现在，当你做到这一点 directionsDisplay.setDirections（响应） Google地图将只的油漆的索引路线 0 数组的路线。为了让谷歌地图绘制你哟指定 google.maps.DirectionsRendererOptions 对象的 routeIndex propertuy另一条路径这你传递给 google.maps.DirectionsRenderer 构造。
这样的事情会的油漆的所有路径（您需要数的DirectionsRenderer 对象）：
VAR路线= response.routes;
对于（VAR J = 0; J＆LT; routes.length; J ++）{
VAR directionsDisplay =新google.maps.DirectionsRenderer（{地图：地图，路线：响应，routeIndex：J-}）;
directionsDisplays.push（directionsDisplay）;
VAR点=途径[J] .overview_path;
变种微升=的document.getElementById（顶点）;
对于（VAR I = 0; I＆LT; points.length;我++）{
VAR李=使用document.createElement（礼）;
li.innerHTML = getLiText（分[I]）;
ul.appendChild（LI）;
}
}
如果你想在折线是不同的颜色，你还可以设置的，在 DirectionsRendererOptions 对象。
整个code将是这样的：
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT; META NAME =视CONTENT =初始规模= 1.0，用户可扩展性=无＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT;地址解析服务＆LT; /标题＆GT;
＆LT;风格＆GT;
HTML，身体，＃地图帆布{身高：100％;最小高度：600像素;最小宽度：700像素;保证金：0像素;填充：0像素}
＃地图帆布{高度：50％; }
#panel {立场：绝对的;上图：5像素;左：50％;保证金左：-180px;的z-index：5;背景色：#FFF;填充：5像素;边框：1px的固体＃999; }
＆LT; /风格＆GT;
＆所述; SCRIPT SRC =https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =面板＆GT;
＆LT;标签＆gt;产地
＆LT;输入ID =出身类型=文本值=＆GT;
＆LT; /标签＆gt;
＆LT;标签＆gt;目标
＆LT;输入ID =目的地类型=文本值=＆GT;
＆LT; /标签＆gt;
＆LT;输入类型=按钮值=GetDirections的onclick =calcRoute（）＆GT;
＆LT; / DIV＆GT;
＆LT; DIV ID =地图画布＆GT;＆LT; / DIV＆GT;
＆LT; DIV ID =顶点容器＆GT;
＆LT;标签＆gt;积分和LT; /标签＆gt;
＆所述;微升的id =顶点＆GT;
＆LT; / UL＆GT;
＆LT; / DIV＆GT;
＆LT;脚本类型=文/ JavaScript的＆GT;
变种directionsDisplays = [];
VAR为DirectionsService =新google.maps.DirectionsService（）;
VAR地图; 函数初始化（）{ VAR的MapOptions = {
变焦：7，
中心：新google.maps.LatLng（48.85727000，2.35238）
};
地图=新google.maps.Map（的document.getElementById（'地图画布'）的MapOptions）;
} 功能calcRoute（）{
VAR开始=的document.getElementById（'原点'）值。
VAR结束=的document.getElementById（'目标'）值。
VAR请求= {
产地：开始，
目的地：最后，
provideRouteAlternatives：真实，
travelMode：google.maps.TravelMode.DRIVING
};
directionsService.route（要求，功能（响应状态）{
如果（状态== google.maps.DirectionsStatus.OK）{
如果（response.routes＆放大器;＆放大器; response.routes.length大于0）{
VAR路线= response.routes;
对于（VAR J = 0; J＆LT; routes.length; J ++）{
VAR directionsDisplay =新google.maps.DirectionsRenderer（{地图：地图，路线：响应，routeIndex：J-}）;
directionsDisplays.push（directionsDisplay）;
VAR点=途径[J] .overview_path;
变种微升=的document.getElementById（顶点）;
对于（VAR I = 0; I＆LT; points.length;我++）{
VAR李=使用document.createElement（礼）;
li.innerHTML = getLiText（分[I]）;
ul.appendChild（LI）;
}
}
}
}
}）;
}
功能getLiText（点）{
VAR经纬度= point.lat（）
LNG = point.lng（）;
返回纬度：+纬度+LNG+ LNG;
} google.maps.event.addDomListener（窗口'负荷'，初始化）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
currently i am able to fetch all the lat and lon from the source to destination place.
But with this i am only able to get 1 path .
Now i want the option to select 1 route path from the different route path from source to destination place.
and also i want to store these all lat and lon to my database.
Database structure :
Rid Lat Lon
i am using asp.net c# technology..
How can i get the option for select path and according to that path need to get all the lat and lon.
and also that all lat and lon need to store in my database with c# code.
how can i perform this task?
i am using belowe code :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Geocoding service</title>
<style>
html, body, #map-canvas {
height: 100%;
min-height: 600px;
min-width: 700px;
margin: 0px;
padding: 0px;
}
#map-canvas {
height: 50%;
}
#panel {
position: absolute;
top: 5px;
left: 50%;
margin-left: -180px;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<body>
<div id="panel">
<label>
Origin
<input id="origin" type="text" value="">
</label>
<label>
Destination
<input id="destination" type="text" value="">
</label>
<input type="button" value="GetDirections" onclick="calcRoute()">
</div>
<div id="map-canvas"></div>
<div id="vertex-container">
<label>Points</label>
<ul id="vertex">
</ul>
</div>
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(25.5911, 86.1611)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById('origin').value;
var end = document.getElementById('destination').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
if (response.routes && response.routes.length > 0) {
var routes = response.routes;
for (var j = 0; j < routes.length; j++) {
var points = routes[j].overview_path;
var ul = document.getElementById("vertex");
for (var i = 0; i < points.length; i++) {
var li = document.createElement('li');
li.innerHTML = getLiText(points[i]);
ul.appendChild(li);
}
}
}
}
});
}
function getLiText(point) {
var lat = point.lat(),
lng = point.lng();
return "lat: " + lat + " lng: " + lng;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
To get Google Maps to send you several options you have to build your google.maps.DirectionsRequest object setting the provideRouteAlternatives property to true, something like this:
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING,
provideRouteAlternatives : true
};
Then the google.maps.DirectionsResultobject return you routes which is an Array.<DirectionsRoute> with the several DirectionsRoute objects (normaly it contains only one object when provideRouteAlternativesis set to false).
So from the code your are using :
var routes = response.routes;
routes will have several elements to iterate over. There you have you several paths.
Now when you do this directionsDisplay.setDirections(response) google maps will only paint the route in the index 0 of the array routes. To get Google Maps to draw another path you have yo specify the routeIndex propertuy of the google.maps.DirectionsRendererOptions object which you pass to the google.maps.DirectionsRenderer constructor.
something like that will paint all the paths (you will need several DirectionsRenderer objects) :
var routes = response.routes;
for (var j = 0; j < routes.length; j++) {
var directionsDisplay = new google.maps.DirectionsRenderer({ map: map, directions: response, routeIndex: j });
directionsDisplays.push(directionsDisplay);
var points = routes[j].overview_path;
var ul = document.getElementById("vertex");
for (var i = 0; i < points.length; i++) {
var li = document.createElement('li');
li.innerHTML = getLiText(points[i]);
ul.appendChild(li);
}
}
If you want the Polylines to be of different color you can also set that in the DirectionsRendererOptions object.
The entire code will be something like this:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Geocoding service</title>
<style>
html, body, #map-canvas { height: 100%; min-height: 600px; min-width: 700px; margin: 0px; padding: 0px }
#map-canvas { height: 50%; }
#panel { position: absolute; top: 5px; left: 50%; margin-left: -180px; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; }
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
</head>
<body>
<div id="panel">
<label>Origin
<input id="origin" type="text" value="">
</label>
<label>Destination
<input id="destination" type="text" value="">
</label>
<input type="button" value="GetDirections" onclick="calcRoute()">
</div>
<div id="map-canvas"></div>
<div id="vertex-container">
<label>Points</label>
<ul id="vertex">
</ul>
</div>
<script type="text/javascript">
var directionsDisplays = [];
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
var mapOptions = {
zoom: 7,
center: new google.maps.LatLng(48.85727000, 2.35238)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function calcRoute() {
var start = document.getElementById('origin').value;
var end = document.getElementById('destination').value;
var request = {
origin: start,
destination: end,
provideRouteAlternatives: true,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
if (response.routes && response.routes.length > 0) {
var routes = response.routes;
for (var j = 0; j < routes.length; j++) {
var directionsDisplay = new google.maps.DirectionsRenderer({ map: map, directions: response, routeIndex: j });
directionsDisplays.push(directionsDisplay);
var points = routes[j].overview_path;
var ul = document.getElementById("vertex");
for (var i = 0; i < points.length; i++) {
var li = document.createElement('li');
li.innerHTML = getLiText(points[i]);
ul.appendChild(li);
}
}
}
}
});
}
function getLiText(point) {
var lat = point.lat(),
lng = point.lng();
return "lat: " + lat + " lng: " + lng;
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>
这篇关于如何从源头把所有的经度和纬度，从不同的路线目的地的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！