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

Question

我使用了 google maps api 提供的简单路线服务 api 示例，虽然地图似乎确实调整以显示两个不同的点，但没有绘制路线或标记。

这是我所拥有的：

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>

我的代码中缺少什么来显示默认标记和路线？

非常感谢

Answer 1

您必须在初始化后的某处调用 calcRoute() .. 您可以在初始化() 结束时执行此操作； 例子：

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