google-maps - 在 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);

我得到的只是一个灰色的窗口，连一张 map 都没有。
将 DirectionsService 的 响应发送到 DirectionsRenderer 时，我得到了两条折线。

我们欢迎任何建议。

Answer 1

我收到一个 javascript 错误“directionResult is undefined”

在这一行:

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

如果我修复它(将其更改为响应)它会起作用。

working example

顺便说一句——我不建议使用 overview_path；如果路径很长或很复杂，说明它没有足够的细节。

代码片段:

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
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>