2

なしで独自のルートを描画しようとしてい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'sDirectionsRenderer

どんなアドバイスでも大歓迎です。

4

1 に答える 1

5

「directionResult は定義されていません」という JavaScript エラーが表示されます

この行で：

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

それを修正すると（応答に変更すると）、機能します。

実施例

ところで、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>

于 2013-05-12T14:28:10.133 に答える