Question

我需要在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 =＆＃34; GetRoute（）＆＃34;激活请求表单中的命令，我在两个字段中输入我的出发地和目的地。然后它将显示一个带有两个位置的地图，其中包含路线信息。现在，我想要的是用asp激活它，因为我需要访问我的sql.So按钮类型将成为没有onclick指令的提交，页面将重新加载，我将获得我需要质疑的数据我的数据库和gmaps脚本将照常运行，自动触发GetRoute（）函数。我希望我已经清楚了，我的英语有点生疏，我可以提供正在进行中的工作，我试图修复这个坏男孩。

我希望在没有onclick命令的情况下重新加载页面后自动激活整个脚本。所以，基本上，我想摆脱GetRoute（）命令。只要我有脚本所需的数据（txtSource和txtDestination），一旦页面重新加载，有没有办法获取我的地图和路线？

Answer 1

您可以稍微修改现有代码，使用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();">，以便在加载所有元素后调用该函数。

Answer 2

谢谢你的帮助。我使用了你的建议，地图出现了，但没有路线，所以也许我在代码中做错了。我可以确认这两个请求（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>" + "&nbsp;&nbsp;" + distance + "<br />";
                dvDistance.innerHTML += "<strong>" + "Durata:" + "</strong>" + "&nbsp;&nbsp;" + duration;

            } else {
                alert("Impossibile trovare la distanza stradale");
            }


        });
    }
    }
    </script>

编辑：我的HTML中有地图和路线的div。这似乎不是问题，因为地图显示，但我没有路线

<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>

谷歌在ASP中映射路线

2 个答案: