在ASP中的谷歌地图路由
google maps route in ASP
我需要在asp中获得2个位置之间的路由，因为我想要变量来改善我的页面导航。我在网上找到了一个很好的方法，效果很好，但它激活了一个点击功能。我需要重新加载页面从我的数据库中获取变量。
原来的版本是这样的:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
var source, destination;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
google.maps.event.addDomListener(window, 'load', function () {
new google.maps.places.SearchBox(document.getElementById('txtSource'));
directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
});
function GetRoute() {
var rome = new google.maps.LatLng(41.918357, 12.485029);
var mapOptions = {
zoom: 4,
center: rome
};
map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('dvPanel'));
//*********DIRECTIONS AND ROUTE**********************//
source = document.getElementById("txtSource").value;
destination = document.getElementById("txtDestination").value;
var request = {
origin: source,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
//*********DISTANCE AND DURATION**********************//
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [source],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function (response, status) {
if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
var distance = response.rows[0].elements[0].distance.text;
var duration = response.rows[0].elements[0].duration.text;
var dvDistance = document.getElementById("dvDistance");
dvDistance.innerHTML = "";
dvDistance.innerHTML += "<strong>" + "Distanza:" + "</strong>" + " " + distance + "<br />";
dvDistance.innerHTML += "<strong>" + "Durata:" + "</strong>" + " " + duration;
} else {
alert("Impossibile trovare la distanza stradale");
}
});
}
</script>
由请求表单中的onclick="GetRoute()"命令激活，我在两个字段中输入出发地和目的地。然后，它会显示一张地图，上面有这两个地点的路线信息。现在，我想要的是用asp激活它，因为我需要访问我的sql。因此，按钮类型将变成没有onclick指令的submit，页面将重新加载，我将获得询问数据库所需的数据，gmaps脚本将像往常一样运行，自动触发GetRoute()函数。我希望我已经说清楚了，我的英语有点生疏，我可以提供正在进行的工作地址，我正在努力解决这个坏男孩。
我希望整个脚本在页面重新加载后自动激活，没有onclick命令。所以，基本上，我想摆脱GetRoute()命令。只要我有脚本所需的数据(txtSource和txtDestination)，是否有办法获得我的地图和路线，一旦页面重新加载?
您可以通过对现有代码进行轻微修改来做到这一点，使用GetRoute函数，不使用onclick:
GetRoute函数中，将source和destination变量设置为请求值:
function GetRoute()
{
source = "<%=Request("txtSource")%>";
destination = "<%=Request("txtDestination")%>";
if( source != "" && destination != "")
{
/*the rest of your code as is,except the following change:
comment out the following two lines, as we are already setting this with the request values
source = document.getElementById("txtSource").value;
destination = document.getElementById("txtDestination").value;
*/
}
}
在html中，对于body标签，添加<body onload="GetRoute();">，以便在加载所有元素后调用该函数
谢谢你的帮助。我使用了你的建议，地图出现了，但没有路线，所以也许我在代码中做错了什么。我可以确认两个请求(txtsource和txtdestination)被正确传递。
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script><script type="text/javascript">
var source, destination;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
google.maps.event.addDomListener(window, 'load', function () {
new google.maps.places.SearchBox(document.getElementById('txtSource'));
new google.maps.places.SearchBox(document.getElementById('txtDestination'));
directionsDisplay = new google.maps.DirectionsRenderer({ 'draggable': true });
});
function GetRoute()
{
source = "<%=Request.form("txtSource")%>";
destination = "<%=Request.form("txtDestination")%>";
if( source != "" && destination != "")
{
var rome = new google.maps.LatLng(41.918357, 12.485029);
var mapOptions = {
zoom: 4,
center: rome
};
map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById('dvPanel'));
//*********DIRECTIONS AND ROUTE**********************//
/*source = document.getElementById("txtSource").value;
destination = document.getElementById("txtDestination").value;
*/
var request = {
origin: source,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
//*********DISTANCE AND DURATION**********************//
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix({
origins: [source],
destinations: [destination],
travelMode: google.maps.TravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.METRIC,
avoidHighways: false,
avoidTolls: false
}, function (response, status) {
if (status == google.maps.DistanceMatrixStatus.OK && response.rows[0].elements[0].status != "ZERO_RESULTS") {
var distance = response.rows[0].elements[0].distance.text;
var duration = response.rows[0].elements[0].duration.text;
var dvDistance = document.getElementById("dvDistance");
dvDistance.innerHTML = "";
dvDistance.innerHTML += "<strong>" + "Distanza:" + "</strong>" + " " + distance + "<br />";
dvDistance.innerHTML += "<strong>" + "Durata:" + "</strong>" + " " + duration;
} else {
alert("Impossibile trovare la distanza stradale");
}
});
}
}
</script>
编辑:我有div在我的HTML地图和路线。这似乎不是问题，因为地图显示，但我没有路线
<div class="row">
<div class="col-md-6">
<div id="dvMap" style="height: 500px"></div>
</div>
<div class="col-md-6" style="height:500px; overflow-x:hidden; overflow-y:auto;">
<div id="dvPanel" ></div>
</div>
相关文章：
- 谷歌地图固定位置覆盖
- 不显示带有本地json文件数据的谷歌地图脚本
- 谷歌地图不是以HTML显示，而是在JS Fiddle上工作
- 谷歌地图标记不会显示
- 无法在JS中显示谷歌地图
- 科尔多瓦页面类应用程序中的多个谷歌地图
- 需要帮助谷歌地图方向面板在FancyBox中显示
- 谷歌地图Api按钮;路由到标记“/转到谷歌地图
- 如何循环显示来自跟踪路由输出的谷歌地图v3中的标记
- 谷歌地图不支持角度路由
- 谷歌地图自动完成与建筑物不适用于路由
- Ember.JS路由与谷歌地图
- 路由后，谷歌地图在AngularJS中无法工作
- 谷歌地图路由W/ AngularJS
- 在谷歌地图API 3中清除方向服务的路由失败
- 谷歌地图Javascript API v3路由迭代
- 路由未定义在谷歌地图API，而发现两个地方之间的持续时间
- 谷歌地图JavaScript API -切换路由可见性，而不是清除它
- 在ASP中的谷歌地图路由
- 使用谷歌地图路由用户界面与必应
