2012-05-09 6 views
25

を使用して、道路にGoogleのAPIのV3でポリラインは、このようシンプルなdoesntの仕事、GoogleマップAPIでGoogleマップAPI v3の

var map = new GMap2(document.getElementById("map")); 
    map.setCenter(new GLatLng(53.7877, -2.9832),13) 
// map.addControl(new GLargeMapControl()); 
// map.addControl(new GMapTypeControl()); 
    var dirn = new GDirections(); 

//  var firstpoint = true; 
    var gmarkers = []; 
    var gpolys = []; 
    var dist = 0; 

// == When the user clicks on a the map, get directiobns from that point to itself == 

gmarkers.push(new google.maps.LatLng(53.7877, -2.9832)); 
gmarkers.push(new google.maps.LatLng(53.9007, -2.9832)); 
gmarkers.push(new GLatLng(53.600, -2.700)); 



for (var i = 0; i < gmarkers.length-1; i++) { 
    console.log(gmarkers[i]); 
       dirn.loadFromWaypoints([gmarkers[i].toUrlValue(6),gmarkers[i+1].toUrlValue(6)],{getPolyline:true}); 

} 


// == when the load event completes, plot the point on the street == 
    GEvent.addListener(dirn,"load", function() { 
// snap to last vertex in the polyline 
     var n = dirn.getPolyline().getVertexCount(); 
      map.addOverlay(dirn.getPolyline()); 
      gpolys.push(dirn.getPolyline()); 
      dist += dirn.getPolyline().getDistance(); 
      document.getElementById("distance").innerHTML="Path length: "+(dist/1000).toFixed(2)+" km. "+(dist/1609.344).toFixed(2)+" miles."; 
      }); 
    GEvent.addListener(dirn,"error", function() { 
     GLog.write("Failed: "+dirn.getStatus().code); 
    }); 
console.log(dirn); 

をスナップ。道案内サービスのようなものがありますが、私はポイントを通してポリラインを描くことができず、ポリラインは道路にスナップされます。

答えて

67

あなたは方向サービスで正しい道を歩いていました。また

var map, path = new google.maps.MVCArray(), 
    service = new google.maps.DirectionsService(), poly; 

function Init() { 
    var myOptions = { 
    zoom: 17, 
    center: new google.maps.LatLng(37.2008385157313, -93.2812106609344), 
    mapTypeId: google.maps.MapTypeId.HYBRID, 
    mapTypeControlOptions: { 
     mapTypeIds: [google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, 
      google.maps.MapTypeId.SATELLITE] 
    }, 
    disableDoubleClickZoom: true, 
    scrollwheel: false, 
    draggableCursor: "crosshair" 
    } 

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    poly = new google.maps.Polyline({ map: map }); 
    google.maps.event.addListener(map, "click", function(evt) { 
    if (path.getLength() === 0) { 
     path.push(evt.latLng); 
     poly.setPath(path); 
    } else { 
     service.route({ 
     origin: path.getAt(path.getLength() - 1), 
     destination: evt.latLng, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
     }, function(result, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      for (var i = 0, len = result.routes[0].overview_path.length; 
       i < len; i++) { 
      path.push(result.routes[0].overview_path[i]); 
      } 
     } 
     }); 
    } 
    }); 
} 

、私の作業例を参照してください:ここではサンプルコードですhttp://people.missouristate.edu/chadkillingsworth/mapsexamples/snaptoroad.htm

+0

ありがとうございます。清潔で簡潔です。 –

+0

@ chad-killingsworthもしこれを正しく読んでいるのであれば、各クリックでDirectionsServiceを呼び出し、それらの結果をすべて配列に格納することで、最大8つのウェイポイントの制限を回避できますか?たとえば、gmaps-pedometer.comと同様に、1マイルごとに自動的にマーカーを表示したいとします。どのようにAPIを使用してそれを行う任意のアイデア? –

+0

申し訳ありませんが、上記の質問の後半は無視してください。ここの答えが見つかりました:http://stackoverflow.com/questions/2698112/how-to-add-markers-on-google-maps-polylines-based-on-distance-along-the-line ..正確ではなく、それは、v3のために再加工する必要があるように見えるが、それはできるように見える... –

1

その優れた道路APIへのスナップを使用すると、完璧なsnapedポリラインを取得するにはtrueに設定され補間を。 https://developers.google.com/maps/documentation/roads/snap

+0

静的マップのURLにマーカーを追加する方法(例:&markers = color:red | label:D | 54.5661310、-1.2505580) –

関連する問題