2012-04-21 42 views
1

這是我的示例http://gidzior.net/map/v3_animate_marker_directions.html(我在輸入中使用佔位符),thx GM代碼到geocodezip.com這裏方向路線 - 只有主要街道

在我的示例中,我使用的是Google Maps API 3,是否可以在方向路線中設置僅主要街道?

var map; 
    var directionDisplay; 
    var directionsService; 
    var stepDisplay; 
    var markerArray = []; 
    var position; 
    var marker = null; 
    var polyline = null; 
    var poly2 = null; 
    var speed = 0.000005, wait = 1; 
    var infowindow = null; 
    var zoomed; 

    var myPano; 
    var panoClient; 
    var nextPanoId; 
    var timerHandle = null; 

function createMarker(latlng, label, html) { 
// alert("createMarker("+latlng+","+label+","+html+","+color+")"); 
    var contentString = '<b>'+label+'</b><br>'+html; 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     title: label, 
     zIndex: Math.round(latlng.lat()*-100000)<<5 
     }); 
     //marker.myname = label; 
     // gmarkers.push(marker); 

    /*google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(contentString); 
     infowindow.open(map,marker); 
     });*/ 
    return marker; 
} 


function initialize() { 
    infowindow = new google.maps.InfoWindow(
    { 
     size: new google.maps.Size(150,50) 
    }); 
    // Instantiate a directions service. 
    directionsService = new google.maps.DirectionsService(); 

    // Create a map and center it on Warszawa. 
    var myOptions = { 
     zoom: 13, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    address = 'warszawa' 
    geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 'address': address}, function(results, status) { 
     map.setCenter(results[0].geometry.location); 
    }); 

    // Create a renderer for directions and bind it to the map. 
    var rendererOptions = { 
     map: map 
    } 
    directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 

    // Instantiate an info window to hold step text. 
    stepDisplay = new google.maps.InfoWindow(); 

    polyline = new google.maps.Polyline({ 
    path: [], 
    strokeColor: '#FF0000', 
    strokeWeight: 3 
    }); 
    poly2 = new google.maps.Polyline({ 
    path: [], 
    strokeColor: '#FF0000', 
    strokeWeight: 3 
    }); 
    } 



    var steps = [] 

    function calcRoute(){ 

if (timerHandle) { clearTimeout(timerHandle); } 
if (marker) { marker.setMap(null);} 
polyline.setMap(null); 
poly2.setMap(null); 
directionsDisplay.setMap(null); 
    polyline = new google.maps.Polyline({ 
    path: [], 
    strokeColor: '#FF0000', 
    strokeWeight: 3 
    }); 
    poly2 = new google.maps.Polyline({ 
    path: [], 
    strokeColor: '#FF0000', 
    strokeWeight: 3 
    }); 
    // Create a renderer for directions and bind it to the map. 
    var rendererOptions = { 
     map: map 
    } 
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 

     var start = document.getElementById("start").value; 
     var end = document.getElementById("end").value; 
     var travelMode = google.maps.DirectionsTravelMode.DRIVING 

     var request = { 
      origin: start, 
      destination: end, 
      travelMode: travelMode 
     }; 

     // Route the directions and pass the response to a 
     // function to create markers for each step. 
    directionsService.route(request, function(response, status) { 
    if (status == google.maps.DirectionsStatus.OK){ 
    directionsDisplay.setDirections(response); 

     var bounds = new google.maps.LatLngBounds(); 
     var route = response.routes[0]; 
     startLocation = new Object(); 
     endLocation = new Object(); 

     // For each route, display summary information. 
    var path = response.routes[0].overview_path; 
    var legs = response.routes[0].legs; 
     for (i=0;i<legs.length;i++) { 
      if (i == 0) { 
      startLocation.latlng = legs[i].start_location; 
      startLocation.address = legs[i].start_address; 
      // marker = google.maps.Marker({map:map,position: startLocation.latlng}); 
      marker = createMarker(legs[i].start_location,"start",legs[i].start_address,"green"); 
      } 
      endLocation.latlng = legs[i].end_location; 
      endLocation.address = legs[i].end_address; 
      var steps = legs[i].steps; 
      for (j=0;j<steps.length;j++) { 
      var nextSegment = steps[j].path; 
      for (k=0;k<nextSegment.length;k++) { 
       polyline.getPath().push(nextSegment[k]); 
       bounds.extend(nextSegment[k]); 



      } 
      } 
     } 

     polyline.setMap(map); 
     map.fitBounds(bounds); 
//  createMarker(endLocation.latlng,"end",endLocation.address,"red"); 
    map.setZoom(18); 
    startAnimation(); 
    zoomed=false; 
    }              
}); 
} 



     var step = 50; // 5; // metres 
     var tick = 100; // milliseconds 
     var eol; 
     var k=0; 
     var stepnum=0; 
     var speed = ""; 
     var lastVertex = 1; 


//=============== animation functions ====================== 
     function updatePoly(d) { 
     // Spawn a new polyline every 20 vertices, because updating a 100-vertex poly is too slow 
     if (poly2.getPath().getLength() > 20) { 
      poly2=new google.maps.Polyline([polyline.getPath().getAt(lastVertex-1)]); 
      // map.addOverlay(poly2) 
     } 

     if (polyline.GetIndexAtDistance(d) < lastVertex+2) { 
      if (poly2.getPath().getLength()>1) { 
      poly2.getPath().removeAt(poly2.getPath().getLength()-1) 
      } 
      poly2.getPath().insertAt(poly2.getPath().getLength(),polyline.GetPointAtDistance(d)); 
     } else { 
      poly2.getPath().insertAt(poly2.getPath().getLength(),endLocation.latlng); 
     } 
     } 


     function animate(d) { 
// alert("animate("+d+")"); 
     if (d>eol) { 
      map.panTo(endLocation.latlng); 
      marker.setPosition(endLocation.latlng); 
      return; 
     } 
     if (d>eol-1000 && zoomed!=true) { 
      map.setZoom(15); // or whatever value 
      zoomed=true; 
     } 
     var p = polyline.GetPointAtDistance(d); 
     map.panTo(p); 
     marker.setPosition(p); 
     updatePoly(d); 
     timerHandle = setTimeout("animate("+(d+step)+")", tick); 
     } 


function startAnimation() { 
     eol=polyline.Distance(); 
     map.setCenter(polyline.getPath().getAt(0)); 
     // map.addOverlay(new google.maps.Marker(polyline.getAt(0),G_START_ICON)); 
     // map.addOverlay(new GMarker(polyline.getVertex(polyline.getVertexCount()-1),G_END_ICON)); 
     // marker = new google.maps.Marker({location:polyline.getPath().getAt(0)} /* ,{icon:car} */); 
     // map.addOverlay(marker); 
     poly2 = new google.maps.Polyline({path: [polyline.getPath().getAt(0)], strokeColor:"#0000FF", strokeWeight:10}); 
     // map.addOverlay(poly2); 
     setTimeout("animate(50)",2000); // Allow time for the initial map display 
} 

回答

1

號你有選擇avoidHighwaysavoidTolls,但沒有什麼能像avoidByways。這是因爲服務需要儘可能接近origindestination,並且可能只能使用通道到達那裏。 avoidHighways是可能的,因爲很可能有一些路由從A到B,而不使用高速公路。 [一個例外是高速公路連接兩個島嶼和沒有輔路航線:我不知道,如果僅僅avoidHighways避免他們和API實際上將使用一條公路,如果沒有替代品。]

該API將有利於快速路線,所以主要街道將默認爲首選。如果您能夠指示API只使用只有主要街道,則完全有可能無法在A和B之間找到方向。

+0

這是一個很可惜的地方,因爲我的最終位置非常接近主要道路,這對我來說非常有用,特別是現在路線經常通過一條封閉的道路 也許我可以在每條路線必須通過的道路上留下一點,我的意思是每條路線必須通過某個點 – gidzior 2012-04-21 20:48:28

+1

我在回答中幾乎提到了航點。如果它們可能有助於指引靠近目的地的路線,請給他們一個指引。不幸的是,沒有'avoidPoints'(例如,爲了避免臨時封閉的街道),儘管這是多年前要求的。 – 2012-04-21 20:58:13

+0

完美的作品,我還有一個問題可以隱藏航點的圖標 – gidzior 2012-04-21 21:32:25

相關問題