google 在 ASP 中映射路线

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="GetRoute()" 命令激活的，我在其中的两个字段中输入了出发地和目的地。然后它将显示带有两个位置的地图，并在其旁边显示路线信息。现在，我想要的是用 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>

google 在 ASP 中映射路线

google maps route in ASP

javascript

asp-classic