使用Google地图，在ap.net中的两个位置之间获取路线 [英] Using Google maps, get route between two locations in ap.net
本文介绍了使用Google地图，在ap.net中的两个位置之间获取路线的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面是我的aspx代码，其中我显示了一个地图，并希望显示源和目标之间的路径。我不知道我哪里出错了，按钮点击事件没有给出路线。
任何人都可以帮助我
代码：
< pre lang =xml>< html xmlns =http://www.w3.org / 1999 / XHTML>
< head runat =server>
< title>< / title>
< meta name =viewportcontent =initial-scale = 1.0，user-scalable = no/>
< script type =text / javascriptsrc =https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places>< / script>
< script type =text / javascriptsrc =// ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js\"></script>
< script type =text / javascript>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService（）;
var map;
函数initialize（）{
var mapOptions = {
center：new google.maps.LatLng（13.052413900000,80.25082459999），
zoom：15，
minZoom：3，
streetViewControl：false，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map（document.getElementById（map_canvas），mapOptions）;
var fromText = document.getElementById（'start'）;
var fromAuto = new google.maps.places.Autocomplete（fromText）;
fromAuto.bindTo（'bounds'，map）;
//查找位置
var toText = document.getElementById（'end'）;
var toAuto = new google.maps.places.Autocomplete（toText）;
toAuto.bindTo（'bounds'，map）;
directionsDisplay.setMap（map）;
}
函数calcRoute（）{
var start = document.getElementById（'start'）。value;
var end = document.getElementById（'end'）。value;
var request = {
origin：start，
destination：end，
travelMode：google.maps.TravelMode.DRIVING
};
directionsService.route（请求，函数（响应，状态）{
if（status == google.maps.DirectionsStatus.OK）{
directionsDisplay.setDirections（response）;
}
}）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
< / head>
< body>
< form id =form1runat =server>
< div>
< div id =map_canvasstyle =height：350px;>< / div>
< input type =textplaceholder =Sourcename =startid =start>
< br />
< input type =textplaceholder =Sourcename =endid =end>
< input id =Button1type =buttonvalue =buttononclick =calcRoute（）/>
< / div>
< / form>
< / body>
< / html>
解决方案
你的代码片段有很多问题。所以我已经修复了所有问题，现在它已经解决了工作。 :)
你唯一需要做的就是完成自动完成文本框的功能。除非一切正常。请检查。
< html >
< head >
< meta 名称 = viewport 内容 = initial-scale = 1.0，user-scalable = no >
< meta charset = utf-8 >
< title > 路线服务< / title >
< style >
html ，body，＃map-canvas {
身高：100％;
保证金：0px;
填充：0px;
}
#panel {
position：absolute;
top：5px;剩余
：50％;
margin-left：-180px;
z-index：5;
background-color：#fff;
填充：5px;
border：1px solid＃999;
}
< / style >
< script src = https：/ /maps.googleapis.com/maps/api/js?v=3.exp&sensor=false\"> < / script >
< span class =code-keyword>< script type = text / javascript >
var directionsDisplay;
var directionsService = new google.maps.DirectionsService（）;
var map;
函数initialize（）{
directionsDisplay = new google.maps.DirectionsRenderer（）;
var chicago = new google.maps.LatLng（41.850033，-87.6500523）;
var mapOptions = {
zoom：7，
center：chicago
}
map = new google.maps.Map（document.getElementById（'map-canvas'） ），mapOptions）;
directionsDisplay.setMap（map）;
}
函数calcRoute（）{
var start = document.getElementById（'start'）。value;
var end = document.getElementById（'end'）。value;
var request = {
origin：start，
destination：end，
travelMode：google.maps.TravelMode.DRIVING
};
directionsService.route（请求，函数（响应，状态）{
if（status == google.maps.DirectionsStatus.OK）{
directionsDisplay.setDirections（response）;
}
}）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script >
< / head >
< body >
< 输入 type = text 占位符 = 来源 名称 < span class =code-keyword> = start id = start >
< 输入 类型 = text 占位符 = 源 名称 = end id = end >
< input id = Button1 type = < span class =code-keyword> button value = 按钮 onclick = calcRoute（） / >
< div id = map-canvas > < / div >
< / body >
< / html > < /跨度>
Below has my aspx code in which I am displaying a map and wanted to show the route between source and destination. I don't know where I am going wrong, Button click event doesn't give the route.
Could anyone help me
Code:
<pre lang="xml"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(13.052413900000, 80.25082459999),
zoom: 15,
minZoom: 3,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var fromText = document.getElementById('start');
var fromAuto = new google.maps.places.Autocomplete(fromText);
fromAuto.bindTo('bounds', map);
//Find To location
var toText = document.getElementById('end');
var toAuto = new google.maps.places.Autocomplete(toText);
toAuto.bindTo('bounds', map);
directionsDisplay.setMap(map);
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').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);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="map_canvas" style="height:350px";></div>
<input type="text" placeholder="Source" name="start" id="start">
<br />
<input type="text" placeholder="Source" name="end" id="end">
<input id="Button1" type="button" value="button" onclick="calcRoute()" />
</div>
</form>
</body>
</html> 解决方案
Your code snippet had lots of issues.So I have fixed them all and now it's working. :)
The only thing what you have to do is complete the functionality of the auto complete text box. Except that all are working fine.Please check that.
<html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <title>Directions service</title> <style> html, body, #map-canvas { height: 100%; margin: 0px; padding: 0px; } #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> <script type="text/javascript"> var directionsDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var chicago = new google.maps.LatLng(41.850033, -87.6500523); var mapOptions = { zoom: 7, center: chicago } map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); directionsDisplay.setMap(map); } function calcRoute() { var start = document.getElementById('start').value; var end = document.getElementById('end').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); } }); } google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body> <input type="text" placeholder="Source" name="start" id="start"> <input type="text" placeholder="Source" name="end" id="end"> <input id="Button1" type="button" value="button" onclick="calcRoute()" /> <div id="map-canvas"></div> </body> </html>
这篇关于使用Google地图，在ap.net中的两个位置之间获取路线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
