Javascript GoogleMapsAPI v3的{directionsService}API存在问题_Javascript_Google Maps Api 3

Javascript GoogleMapsAPI v3的{directionsService}API存在问题

javascript google-maps-api-3

Javascript GoogleMapsAPI v3的{directionsService}API存在问题,javascript,google-maps-api-3,Javascript,Google Maps Api 3,我正在尝试学习Google Maps API，以获取从A点到B点的方向。当我简单地从中尝试示例代码时，我的Javascript控制台会将我带到一些我无法理解的代码部分，调试器会停在一行“请参阅服务条款以获取更多信息：”。以下是我的html代码列表： <html> <head> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_K

我正在尝试学习Google Maps API，以获取从A点到B点的方向。当我简单地从中尝试示例代码时，我的Javascript控制台会将我带到一些我无法理解的代码部分，调试器会停在一行“请参阅服务条款以获取更多信息：”。以下是我的html代码列表：

<html>
  <head>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&sensor=false">
    </script>
    <script type="text/javascript">
      var directionsDisplay;
      var directionsService = new google.maps.DirectionsService();
      var map;

      function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer();
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        directionsDisplay.setMap(map);
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }

      function calcRoute() {
        initialize()
        var start = "Sydney, NSW";
        var end = "Chatswood, NSW";
        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>
  </head>
  <body onload="calcRoute()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>


var方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
变量映射选项={
中心：新google.maps.LatLng（-34.397150.644），
缩放：10，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
方向显示.setMap（地图）；
var map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
}
函数calcRoute（）{
初始化（）
var start=“新南威尔士州悉尼”；
var end=“新南威尔士州查茨伍德”；
var请求={
来源：start，
目的地:完，
travelMode:google.maps.Directions travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
}

地图确实会显示在浏览器中，但方向不会显示。有人能看到这里的问题吗？任何帮助都将不胜感激。

问题在于这两行的顺序：

    directionsDisplay.setMap(map);
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

如果将方向渲染器的贴图设置为null（或未定义），则会将方向从贴图中移除。我将其更改为（因此映射被指定给全局映射变量）：

代码片段：

var方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
变量映射选项={
中心：新google.maps.LatLng（-34.397150.644），
缩放：10，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
方向显示.setMap（地图）；
}
函数calcRoute（）{
初始化（）
var start=“新南威尔士州悉尼”；
var end=“新南威尔士州查茨伍德”；
var请求={
来源：start，
目的地:完，
travelMode:google.maps.Directions travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
}

html，
身体{
身高：100%；
保证金：0；
填充：0；
}
#地图画布{
身高：100%；
}
@媒体印刷品{
html，
身体{
高度：自动；
}
#地图画布{
高度：650px；
}
}

问题在于这两行的顺序：

    directionsDisplay.setMap(map);
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

如果将方向渲染器的贴图设置为null（或未定义），则会将方向从贴图中移除。我将其更改为（因此映射被指定给全局映射变量）：

代码片段：

var方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
变量映射选项={
中心：新google.maps.LatLng（-34.397150.644），
缩放：10，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），
地图选项）；
方向显示.setMap（地图）；
}
函数calcRoute（）{
初始化（）
var start=“新南威尔士州悉尼”；
var end=“新南威尔士州查茨伍德”；
var请求={
来源：start，
目的地:完，
travelMode:google.maps.Directions travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
}

html，
身体{
身高：100%；
保证金：0；
填充：0；
}
#地图画布{
身高：100%；
}
@媒体印刷品{
html，
身体{
高度：自动；
}
#地图画布{
高度：650px；
}
}

那是你的钥匙吗？加载API时尝试不使用密钥。你在哪里运行它？本地主机？某个域服务器？该密钥是否已授权用于域？是的，那是我的密钥。我不小心把它放在上面了：-）我现在把它拿走了。我正在本地主机上运行它…只是创建了一个html文件，复制粘贴了代码，进行了一些编辑，然后尝试在浏览器上打开页面。如果没有钥匙，我该怎么做？只需按如下方式移除密钥：我尝试按如下方式不使用密钥，但得到相同的结果：

是的，这就是移除密钥的方式。然而，geocodezip已经发现了这个问题。：-）请注意，使用v=3.exp时，您正在加载实验版本。（不建议用于生产现场）这是您的钥匙吗？加载API时尝试不使用密钥。你在哪里运行它？本地主机？某个域服务器？该密钥是否已授权用于域？是的，那是我的密钥。我不小心把它放在上面了：-）我现在把它拿走了。我正在本地主机上运行它…只是创建了一个html文件，复制粘贴了代码，进行了一些编辑，然后尝试在浏览器上打开页面。如果没有钥匙，我该怎么做？只需按如下方式移除密钥：我尝试按如下方式不使用密钥，但得到相同的结果：

是的，这就是移除密钥的方式。然而，geocodezip已经发现了这个问题。：-）请注意，使用v=3.exp时，您正在加载实验版本。（不推荐用于生产站点）非常感谢@geocodezip！！我真是太傻了，在它被使用后声明/初始化了

map

。我