如何在页面加载时自动计算路由

How to calculate route automatically on page load?

本文关键字:计算 路由 加载      更新时间:2023-09-26

我有一个谷歌地图,我想用一个预先填充的路由自动加载(取自一系列PHP表单提交)。

目前,PHP表单的最后一个页面上有一个谷歌地图,一些下拉框预填充了起点和终点(从他们以前的PHP表单提交),下拉菜单上有一个onChange函数计算路由(onChange="calcRoute();",在下面的例子中)。这可以正常工作,但在现实中,每个最终形式最终只有一个路径选择。因此,让用户"选择"路线的起点和终点是毫无价值的——每个下拉菜单中只有一个选项,所以我可能会在页面加载时自动加载这些选项和它们之间计算的路线。

有什么办法吗?

我的方向函数如下:

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<?PHP
$Start_latLng = $_POST["start-latitude"] . ", " . $_POST["start-longitude"];
$End_latLng = $_POST["end-latitude"] . ", " . $_POST["end-longitude"];
?>
    <script>
      var directionDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;
      function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var mapOptions = {
          zoom:7,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: new google.maps.LatLng(54.219218, -2.905669)
        }
        map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        directionsDisplay.setMap(map);
      }
      function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
            origin:start,
            destination:end,
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
      }
    </script>

…我的下拉菜单是由PHP $_POST函数的结果填充的。

显然,我需要等待地图加载,然后才能计算路线,所以可能需要注入暂停-有什么想法吗?

感谢@Robot Woods:你能不能直接触发calcRoute();作为初始化函数的最后一行?- Robot Woods