2011-08-06 10 views
1

コンテンツページにマップを作成する次のコードがあります。Google MapsのDirection Line Errors

<script type="text/javascript"> 
    var directionDisplay; 
    var directionsService = new google.maps.DirectionsService(); 
    var map; 

    function init() { 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
     var latlng = new google.maps.LatLng(54.6, -4.25); 
     var startlatlng = new google.maps.LatLng(50.067, -5.717); 
     var endlatlng = new google.maps.LatLng(58.633, -3.067); 
     var myOptions = { zoom: 6, center: latlng, disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.ROADMAP }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     directionsDisplay.setMap(map); 
     calcRoute(); 
     var marker = new google.maps.Marker({ position: startlatlng, map: map, flat: true, title: "Start" }); 
     var marker = new google.maps.Marker({ position: endlatlng, map: map, flat: true, title: "Finish" }); 
     var marker = new google.maps.Marker({ position: new google.maps.LatLng(55.067, -4.717), map: map, flat: true, title: "Start" }); 
    } 

    function calcRoute() { 
     var startlatlng = new google.maps.LatLng(50.067, -5.717); 
     var endlatlng = new google.maps.LatLng(58.633, -3.067); 
     var request = { 
      origin: startlatlng, 
      destination: endlatlng, 
      avoidHighways: true, 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
     }; 
     directionsService.route(request, function (response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 
      } 
     }); 
    } 
    google.maps.event.addDomListener(window, 'load', init); 
</script> 

私が欲しいのは、関数initによって作成された地図上に表示されるルートのですが、それは最初のマップを無視しているほとんどかのように、下のズームレベルでそれを再描画されます。また、開始マーカーと終了マーカーを上書きしています。方向線がどのようにオーバーレイされるかを制御するdirectionServiceのパラメータはほとんどないようです。誰も何が起こっているのか理解していないのですか?

答えて

0

これを行う方法は、機能init()の先頭に以下を追加することであるようだ。

function init() { 
    var rendererOptions = { 
     preserveViewport: true 
    }; 
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 
}