我需要在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>" + "&nbsp;&nbsp;" + distance + "<br />";
                dvDistance.innerHTML += "<strong>" + "Durata:" + "</strong>" + "&nbsp;&nbsp;" + duration;

            } else {
                alert("Impossibile trovare la distanza stradale");
            }
});
    }
</script>


它由请求表单中的onclick =“ GetRoute()”命令激活,我在两个字段中输入出发地和目的地。然后,它将在旁边显示带有两个位置的地图以及路线信息。
现在,我想要的是使用asp激活它,因为我需要访问我的sql。因此,按钮类型将变为没有onclick指令的提交,页面将被重新加载,我将获得我需要查询数据库的数据并且gmaps脚本将照常运行,自动触发该GetRoute()函数。我希望我已经很清楚了,我的英语有点生锈,我可以提供进行中的地址来解决这个坏男孩。

我希望在重新加载页面后自动激活整个脚本,而无需使用onclick命令。因此,基本上,我想摆脱GetRoute()命令。只要我拥有脚本所需的数据(txtSource和txtDestination),就可以在页面重新加载后获取我的地图和路线?

最佳答案

您可以对现有代码稍作修改,
使用GetRoute函数,而不使用onclick

在GetRoute函数中,将sourcedestination变量设置为请求值:

    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();">,以便在加载所有元素之后调用该函数。

10-06 05:24