我需要在ASP中的2个位置之间获取一条路线,因为我希望变量可以改善我的页面导航。我在网上找到了一种行之有效的出色方法,但它激活了onclick函数。我需要重新加载页面以从数据库中获取变量。
原始版本是这样的:
<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指令的提交,页面将被重新加载,我将获得我需要查询数据库的数据并且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();">
,以便在加载所有元素之后调用该函数。