在 Google Map V3 中显示没有 DirectionsRenderer 的路线

Question

我试图在没有DirectionsRenderer.

这是我的代码：

var map;
var directionsService;

function initialize() {
  var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  directionsService = new google.maps.DirectionsService();

  calcRoute();
}

function calcRoute() {
  var request = {
      origin: '??? ???',
      destination: '??? ???',
      travelMode: google.maps.TravelMode.WALKING
  };

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      map.fitBounds(directionResult.routes[0].bounds);
      createPolyline(response);
    }
  });
}

function createPolyline(directionResult) {
  var line = new google.maps.Polyline({
      path: directionResult.routes[0].overview_path,
      strokeColor: '#FF0000',
      strokeOpacity: 0.5,
      strokeWeight: 4
  });

  line.setMap(map);

  for (var i = 0; i < line.getPath().length; i++) {
      var marker = new google.maps.Marker({
          icon: { path: google.maps.SymbolPath.CIRCLE, scale: 3 },  
          position: line.getPath().getAt(i),
          map: map
      });
  }
}

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

我得到的只是一个灰色的窗口，甚至没有地图。
当向我发送DirectionsService's响应时，DirectionsRenderer我得到两条折线。

欢迎任何建议。

Answer 1

我收到一个 javascript 错误“directionResult 未定义”

在这一行：

  map.fitBounds(directionResult.routes[0].bounds);

如果我解决了这个问题（将其更改为响应），它会起作用。

工作示例

BTW - 我不建议使用overview_path；如果路径很长或很复杂，那就没有足够的细节。

代码片段：

  map.fitBounds(directionResult.routes[0].bounds);

var map;
var directionsService;

function initialize() {
  var mapOptions = {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  directionsService = new google.maps.DirectionsService();
  calcRoute();
}

function calcRoute() {
  var request = {
    origin: '??? ???',
    destination: '??? ???',
    travelMode: google.maps.TravelMode.WALKING
  };

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      map.fitBounds(response.routes[0].bounds);
      createPolyline(response);
    }
  });
}

function createPolyline(directionResult) {
  var line = new google.maps.Polyline({
    path: directionResult.routes[0].overview_path,
    strokeColor: '#FF0000',
    strokeOpacity: 0.5,
    strokeWeight: 4
  });

  line.setMap(map);

  for (var i = 0; i < line.getPath().length; i++) {
    var marker = new google.maps.Marker({
      icon: {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 3
      },
      position: line.getPath().getAt(i),
      map: map
    });
  }
}

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

html,
body,
#map-canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}