2013年10月9日水曜日

Google Map ルート表示



Google Map に 任意の場所から任意の場所へ線を描きました
















サンプルコードは以下に記述しておきます(・0・)意外と簡単にできるもんなんですね(・ω・)へぇ

var map_canvas = new google.maps.Map(
  display_area,
  options
);

var directionsService=new google.maps.DirectionsService();

var start_latLng= new google.maps.LatLng( 経度, 緯度 );

var end_latLng= new google.maps.LatLng( 経度, 緯度 );
var request={
 origin: start_latLng,          /* 出発地点 */
 destination: end_latLng,                       /* 到着地点 */
 travelMode: google.maps.DirectionsTravelMode.WALKING /* トラベルモード  徒歩 電車 車 などなど*/
};
  
directionsService.route(request, function(response, status) {
 
 if (status==google.maps.DirectionsStatus.OK) {
    
    
    //描画
    var routes =  response.routes[0];
   
    var overview_path = routes[ "overview_path" ];
    
    // Polyline オブジェクト 線を引く
    flightPath =new google.maps.Polyline({
      path: overview_path, //ポリラインの配列
      geodesic: true,
      strokeColor: '#FF00FF', 
      strokeOpacity: 0.7, 
      strokeWeight: 5 
    });
  
  //地図にセット
  flightPath.setMap(map_canvas);//google.maps.Map newしたviewオブジェクトです map_canvas

  
 }
});


overview_path が場所から場所へのルート情報が入っています。
ラインを引く際に必要となる情報です。 中身は、自分で指定する事も可能です( 参考サイト ) 

 ★Polyline  オプション
path
ポリライン配列
geodesic
ture 測地線、false 等角航路( 参考サイト )
strokeColor
線の色( #RRGGBB形式 )色は制限あるみたいです
strokeOpacity
線の透明度 透明度 0.0~1.0(デフォルト)
strokeWeight
線の太さ ( 単位ピクセル )


★セットされた線を削除したい場合
こう唱えると線は消え去ります(・_・)クリックされたときに表示などの時使用すると思うのでメモ/(・_・)
 flightPath.setMap( null );



----------------------------------------------------------------------------


もっとスマートな書き方がありましたので追加します~~~








ルート処理の部分のみ書きます(・_・)

  

    var directionsDisplay = null;

    var rendererOptions = {
    draggable: false,
    preserveViewport:false,         
    suppressMarkers : true,        //アンカーを消す
//    polylineOptions : {
//  strokeColor : "#00FF00"   //色を変更
//    }
 }


    directionsService.route(request, function(response, status) {



       if( directionsDisplay ){
         directionsDisplay.setMap(null);
       }


       if (status==google.maps.DirectionsStatus.OK) {
    
            directionsDisplay = new google.maps.DirectionsRenderer( rendererOptions );
     directionsDisplay.setDirections( response );
     directionsDisplay.setMap(map_canvas);
  
       }
    });


えっすごいシンプルになった!(*0*)!

0 件のコメント:

コメントを投稿