谷歌地图路线服务未显示路线

Question

I used the simple directions service api sample provided by google maps api, while the map does seem to adjust to show the two different points, there is no route or markers plotted.我使用了 google maps api 提供的简单路线服务 api 示例，虽然地图似乎确实调整以显示两个不同的点，但没有绘制路线或标记。

directions-simple 方向-简单

Here is what I have:这是我所拥有的：

var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;    

function initialize(data) {
          directionsDisplay = new google.maps.DirectionsRenderer();
          var chicago = new google.maps.LatLng(41.850033, -87.6500523);
          var mapOptions = {
            zoom:7,
            center: chicago
          };
          map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
          directionsDisplay.setMap(map);

        }

        function calcRoute() {
          var start = "chicago, il";
          var end = "st louis, mo";
          var request = {
              origin:start,
              destination:end,
              travelMode: google.maps.TravelMode.DRIVING
          };
          directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
            }
          });
        }


<div style="height: 25rem; width: 40rem;" id="map-canvas"></div>

What am I missing in my code to display default markers and route line?我的代码中缺少什么来显示默认标记和路线？

Thanks a lot非常感谢

Answer 1

you must call calcRoute() somewhere after initialization.. you can do this at the end of initialization();您必须在初始化后的某处调用 calcRoute() .. 您可以在初始化() 结束时执行此操作； example:例子：

    <!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions service</title>
    <style>
        html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #panel {
            position: absolute;
            top: 5px;
            left: 50%;
            margin-left: -180px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;

        function initialize() {
            directionsDisplay = new google.maps.DirectionsRenderer();
            var chicago = new google.maps.LatLng(41.850033, -87.6500523);
            var mapOptions = {
                zoom: 7,
                center: chicago
            };
            map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
            directionsDisplay.setMap(map);
            calcRoute();
        }

        function calcRoute() {
            var start = "chicago, il";
            var end = "st louis, mo";
            var request = {
                origin:start,
                destination:end,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                }
            });
        }


        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

谷歌地图路线服务未显示路线

问题描述

1 个解决方案

解决方案1
-1 2015-06-19 17:32:11

谷歌地图路线服务未显示路线

问题描述

1 个解决方案

解决方案1 -1 2015-06-19 17:32:11

解决方案1
-1 2015-06-19 17:32:11