Google Maps 和 RouteBoxer 不会显示多边形线

Question

提前感谢您提供的任何帮助！我在 Google Maps API V3 中使用 RouteBoxer，但由于某种原因，我无法显示这些线条。我担心该功能根本没有运行，这对于我的项目的下一步是必要的：传递 lat 和 long 以沿路线查找 pois。查看地图上的线条将帮助我确保它运行正常。

这是我的代码

<script>
        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;
        var routeBoxer = null;
        var boxpolys = null;
        var rdistance = 20; // km

        function initialize() {
          //directionspanelstuff
          //directionsdisplaystuff
          //mapoptions
          map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
          directionsDisplay.setMap(map);
          routeBoxer = new RouteBoxer();
        }

        function calcRoute() {
          //startendwaypoints

          directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(response);
              var route = response.routes[0];
              var summaryPanel = document.getElementById("directions_panel");

              // Box the overview path of the first route
                var path = result.routes[0].overview_path;
                var boxes = routeBoxer.box(path, rdistance);
                clearBoxes();
                drawBoxes(boxes);

                for (var i = 0; i < boxes.length; i++) {
                  var bounds = box[i];
                  // Perform search over this bounds 
                }
            }
          });
        }

        // Draw the array of boxes as polylines on the map
        function drawBoxes(boxes) {
          boxpolys = new Array(boxes.length);
          for (var i = 0; i < boxes.length; i++) {
            boxpolys[i] = new google.maps.Rectangle({
              bounds: boxes[i],
              fillOpacity: 0,
              strokeOpacity: 1.0,
              strokeColor: '#000000',
              strokeWeight: 1,
              map: map
            });
          }
        }

        // Clear boxes currently on the map
        function clearBoxes() {
          if (boxpolys != null) {
            for (var i = 0; i < boxpolys.length; i++) {
              boxpolys[i].setMap(null);
            }
          }
          boxpolys = null;
        }
    </script>

Answer 1

javascript 控制台指出了 4 个 javascript 错误：

1. mapOptions 未定义（可能不是真正的问题）
2. directionsDisplay 为空（未初始化）
3. 结果未定义（错字或剪切粘贴错误）
4. 框未定义（错字）

working example

代码 sn-p：

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var routeBoxer = null;
var boxpolys = null;
var rdistance = 20; // km

function initialize() {
  //directionspanelstuff
  //directionsdisplaystuff
  //mapoptions
  map = new google.maps.Map(document.getElementById("map_canvas"), {
    zoom: 10,
    center: new google.maps.LatLng(41.084951, 29.016048),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  directionsDisplay = new google.maps.DirectionsRenderer();
  directionsDisplay.setMap(map);
  routeBoxer = new RouteBoxer();
  calcRoute();
}

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  //startendwaypoints

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById("directions_panel");

      // Box the overview path of the first route
      var path = response.routes[0].overview_path;
      var boxes = routeBoxer.box(path, rdistance);
      clearBoxes();
      drawBoxes(boxes);

      for (var i = 0; i < boxes.length; i++) {
        var bounds = boxes[i];
        // Perform search over this bounds 
      }
    }
  });
}

// Draw the array of boxes as polylines on the map
function drawBoxes(boxes) {
  boxpolys = new Array(boxes.length);
  for (var i = 0; i < boxes.length; i++) {
    boxpolys[i] = new google.maps.Rectangle({
      bounds: boxes[i],
      fillOpacity: 0,
      strokeOpacity: 1.0,
      strokeColor: '#000000',
      strokeWeight: 1,
      map: map
    });
  }
}

// Clear boxes currently on the map
function clearBoxes() {
  if (boxpolys != null) {
    for (var i = 0; i < boxpolys.length; i++) {
      boxpolys[i].setMap(null);
    }
  }
  boxpolys = null;
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map_canvas {
  margin: 0;
  padding: 0;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/routeboxer/src/RouteBoxer.js"></script>
<input id="start" type="text" onchange="calcRoute();" value="chicago, il"></input>

<input id="end" type="text" onchange="calcRoute();" value="st louis, mo"></input>

<div id="map_canvas" style="height: 400px; width:500px;"></div>
<div id="info"></div>