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 is undefined”

在这一行：

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

如果我解决了这个问题（将其更改为响应），那就可以了。

working example

BTW - 我不建议使用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>

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

1 个答案: