2012-11-09 1 views
10

Google Maps APIで通りを強調表示できますか?
このエフェクトに近いものは、私が見つけた唯一のものです。 しかし、これは多くの作業であり、不正確です。ラインは地名にも行きます。

私が欲しいのは、特定の街頭名を、ポイントaからbにナビゲートしているかのように強調表示することです。 例えば、10本の通りが街頭で閉鎖されている場合、その通りを強調表示することができます。Google Maps APIでは、特定の通りをハイライトすることは可能ですか?

+1

http://stackoverflow.com/questions/2155032/highlighting-whole-street-with-some-maps-api '' このリンクを特にご覧ください http://econym.org.uk/gmap /example_snappath.htm – C5H8NNaO4

+1

これらの例はGoogle Maps API v2で、同じ概念がv3にも適用されますが、OPが望んでいない通りの線を描いています。 – geocodezip

+0

申し訳ありませんが、私は答えを受け入れることができるか分からなかった。しかし、話題につけておきましょう。誰もが解決策を知っていますか?私は前に人々がこの問題を抱えていたことは想像できる。しかし、おそらくそれは可能ではありません。 – user1081577

答えて

14

これは、実際にはMaps APIルートレンダラーを使用して簡単に行うことができます。
あなたの通りの始点と終点の緯度/経度座標を入力する必要があり、レンダラーはすべての計算とペインティングを行います。方向のステップを読み込んでポリラインを描く必要はありません。

がここにアクションでそれを参照してください。
http://jsfiddle.net/HG7SV/15/

これは、コードで、すべてのマジックは()関数の初期化中に行われます。

<html> 
    <head> 
     <style type="text/css"> 
      html { height: 100% } 
      body { height: 100%; margin: 0px; padding: 0px } 
      #map_canvas { height: 100% } 
     </style> 
     <script type="text/javascript" 
      src="http://maps.google.com/maps/api/js?sensor=false"> 
     </script> 
     <script type="text/javascript"> 
      function initialize() { 
       // init map 
       var myOptions = { 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

       // init directions service 
       var dirService = new google.maps.DirectionsService(); 
       var dirRenderer = new google.maps.DirectionsRenderer({suppressMarkers: true}); 
       dirRenderer.setMap(map); 

       // highlight a street 
       var request = { 
        origin: "48.1252,11.5407", 
        destination: "48.13376,11.5535", 
        travelMode: google.maps.TravelMode.DRIVING 
       }; 
       dirService.route(request, function(result, status) { 
        if (status == google.maps.DirectionsStatus.OK) { 
         dirRenderer.setDirections(result); 
        } 
       }); 
      } 
     </script> 
    </head> 
    <body onload="initialize()"> 
     <div id="map_canvas" style="width:100%; height:100%"></div> 
    </body> 
</html> 

あなたの通りが湾曲し、レンダラーが見つける必要がある場合あなたが意図していないショートカットを作成するには、中間のウェイポイントを追加して、描画された線を目的の通りに正確に押し込むことで簡単に修正できます:

   var request = { 
        origin: "48.1252,11.5407", 
        destination: "48.13376,11.5535", 
        waypoints: [{location:"48.12449,11.5536"}, {location:"48.12515,11.5569"}], 
        travelMode: google.maps.TravelMode.DRIVING 
       }; 
+0

あなたの返事のためのThx!このような複数のルートを描くことも可能ですか? jsFiddleで2番目のルートを描くと、最初のルートは消えます。 – user1081577

+0

私は、私が描画する各パスに対して新しいdirectionServiceオブジェクトを追加する必要があることを知りました。これはアドバイス可能ですか? [新しいフィドルへのリンク](http://jsfiddle.net/FX2ag/)(いくつかのコピー貼り付け作業はおそらくループを作るほうがよいでしょう) – user1081577

+0

[複数のルートと着色についての詳細情報](http://stackoverflow.com)/questions/8304875/using-google-maps-3-api-to-get-multiple-routes-on-a-map) – user1081577

関連する問題