Maps API - 让路线无效！

Question

Maps API - 让路线无效！

我的指示并未显示在我的地图旁边。我已经完全遵循API和许多示例，似乎我正在做的一切正确。（我相信这些指示应该主要使用＆＃34; directionsService.route（）之后的三行代码。我有一个网络应用程序，一旦单击底部的提交按钮，将生成地图和方向。方向应在右侧，地图在左侧，我的地图工作正常但方向甚至不会显示。也许某些东西会覆盖方向面板，导致它无法显示？

我的代码如下。请帮忙，我一直在看代码这么久，一切都开始看起来一样了lol :)）

P.s。，我是Google MAPS Api和Stackoverflow的新手：）

请帮助，我和其他许多正在实施这样的网络应用的人会非常感激这一点！

提前致谢！

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Waypoints in directions</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>
<style>
  #directions-panel {
    height: 100%;
    float: right;
    width: 390px;
    overflow: auto;
  }

  #map-canvas {
    margin-right: 400px;
  }

  @media print {
    #map-canvas {
      height: 500px;
      margin: 0;
    }

    #directions-panel {
      float: none;
      width: auto;
    }
  }
}
</style>

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var douglasville = new google.maps.LatLng(33.751497,-84.747714);

function initialize() {
   directionsDisplay = new google.maps.DirectionsRenderer();
   var chicago = new google.maps.LatLng(41.850033, -87.6500523);
   var mapOptions = {
   zoom: 6,
   center: douglasville
   }

   map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
   directionsDisplay.setMap(map);
   directionsDisplay.setPanel(document.getElementById('directions-panel'));

   var rendererOptions = {
        map: map
   }
}

function calcRoute() {
   var start = "3557 doris circle douglasville, ga 30135";
   var end = "421 st marlow dr. lawrenceville, ga 30044";
   var waypts = [];
   var checkboxArray = ["4899 Chapel Hill rd douglasville, ga 30135", "120 North avenue      nw atlanta, ga 30332", "275 Riverside Pkwy SW, Austell, GA 30168"]
   for (var i = 0; i < checkboxArray.length; i++) {
       waypts.push({
           location:checkboxArray[i],
           stopover:true});
   }
   var request = {
       origin: start,
       destination: end,
       waypoints: waypts,
       optimizeWaypoints: true,
       travelMode: google.maps.TravelMode.DRIVING
   };
   directionsService.route(request, function(response, status) {
       if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
       }else{
          alert("something went wrong!");
       }
 });
}


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

    </script>
  </head>
  <body>
    <div id="directions_panel"></div>
    <div id="map-canvas" ></div>
    <div style="margin:20px;border-width:2px;"><br>
      <input type="submit" onclick="calcRoute();">
    </div>
  </body>
</html>

Answer 1

你在这一行中有问题：

directionsDisplay.setPanel(document.getElementById('directions-panel'));

文档中的元素ID为 directions_panel ，而不是 directions-panel 。

路线和路线面板未显示谷歌API

Maps API - 让路线无效！

1 个答案: