Google地图API：路线结果未显示 [英] Google maps API: Directions result not showing

问题描述

我正在使用Google Maps JS API创建自己风格的地图。我想为地图添加路线功能，我遵循官方教程（在显示DirectionsResult 标题下），但最终的路线没有出现......

I'm creating my own styled map using Google Maps JS API. I wanted to add directions functionality to map, i followed the official tutorial (Under Displaying the DirectionsResult title), but the final route is not appearing...

我调试了我的代码， directionsService.route 函数返回 google.maps.DirectionsStatus.OK 和 directionsDisplay.setDirections（结果）真的被称为没有JS错误...所以方向计算成功，但没有显示在我的地图中。 A试图关闭特殊的地图样式，但即使在默认地图样式中也没有出现。任何想法都可能是问题所在？

I debugged my code and I found, than directionsService.route function returns google.maps.DirectionsStatus.OK and directionsDisplay.setDirections(result) is really called with no JS error... So directions are successfully computed but not showed in my map. A tried to turn off special map styling but even on default map style it is not appearing. Any ideas where could the problem be?

好吧，一些代码...：

OK, some code...:

<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);
            }
          });

        }

推荐答案

如果它是你问题的根源，但肯定值得一试......
从你的脚本输入

Not sure if it's the source of your problems, but it's sure worth a shot... From your script input

<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事件之前，因此您的地图对象尚未启动且为空。所以实际上你要打电话给

I assume the directions_init function is called after api script has been downloaded, which probably is before page's onload event, thus your map object has not been initiated and is null. So practically you are calling

directionsDisplay.setMap(null);

尝试从gmap_init或onload之后触发的任何事件调用directions_init。

Try calling directions_init from gmap_init or on any event that is triggered after onload.

这篇关于Google地图API：路线结果未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！