Google 地图 API：路线结果未显示

Posted 2023-05-06

【中文标题】Google 地图 API：路线结果未显示

【英文标题】：Google maps API: Directions result not showing

【发布时间】：2012-03-07 17:36:01

【问题描述】：

我正在使用 Google Maps JS API 创建自己的风格地图。我想为地图添加路线功能，我按照official tutorial（在显示路线结果标题下），但最终路线没有出现......

我调试了我的代码，发现 directionsService.route 函数返回 google.maps.DirectionsStatus.OK 和 directionsDisplay.setDirections(result) 确实被调用而没有 JS 错误...所以方向已成功计算但未显示在我的地图中。 A 试图关闭特殊的地图样式，但即使是默认地图样式，它也不会出现。有什么想法可能是问题出在哪里？

好的，一些代码...：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAB2gbXmG... ...mNs66iPr8&amp;sensor=false&amp;callback=directions_init"></script>

    <script type="text/javascript">
        var map;
        var zoom = 11;
        var directionsDisplay;
        var directionsService;

        function gmap_init()
            var styleArray = [ /*here is style but even if its commented its not working*/];

            var alterMapStyle = new google.maps.StyledMapType(styleArray, name: "ALTER style");


            var latlng = new google.maps.LatLng(/*lat, lng*/);
            var myOptions = 
              zoom: zoom,
              center: latlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP,
              mapTypeControl: false,
              panControl: false,
              zoomControl: false,
              scaleControl: false,
              streetViewControl: false
            ;
            map = new google.maps.Map(document.getElementById("gmap"), myOptions);

            map.mapTypes.set('ALTER_style', alterMapStyle);
            map.setMapTypeId('ALTER_style');


        

        function directions_init()

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

            display_route();

        

        function display_route()
            var request = 
                origin: 'Place A',
                destination:'Place B',
                travelMode: google.maps.TravelMode.DRIVING
              ;

          directionsService.route(request, function(result, status) 
            if (status == google.maps.DirectionsStatus.OK) 
                //program got here without error
                directionsDisplay.setDirections(result);
            
          );

        

【参考方案1】：

不确定这是否是您问题的根源，但确实值得一试... 从您的脚本输入

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAB2gbXmG... ...mNs66iPr8&amp;sensor=false&amp;callback=directions_init"></script> 

我假设在 api 脚本下载后调用了directions_init 函数，这可能是在页面的 onload 事件之前，因此您的地图对象尚未启动并且为空。所以实际上你在打电话

directionsDisplay.setMap(null);

尝试从 gmap_init 或在 onload 后触发的任何事件上调用 Directions_init。