API JavaScript/jQuery

Google Maps JavaScript API v3でマップ上に線を引く

投稿日:

スポンサードリンク

GoogleMapsAPIを使って地図上に線を引いたときに気を付けたことなどをメモしておきます。

線を引く

GoogleMapsAPIではオーバーレイと呼ばれる地図上のオブジェクトを作成してそれをGoogleMap(Mapクラス)に埋め込む(setMap)ことで画像を表示させたり線を引かせたりします。位置は緯度経度を表すLatLngクラスで指定します。

以下のスクリプトは公式ページからの引用となります。

function initialize() {
  var myLatLng = new google.maps.LatLng(0, -180);
  var mapOptions = {
    zoom: 3,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var map = new google.maps.Map(document.getElementById("map_canvas"),
      mapOptions);
  var flightPlanCoordinates = [
    new google.maps.LatLng(37.772323, -122.214897),
    new google.maps.LatLng(21.291982, -157.821856),
    new google.maps.LatLng(-18.142599, 178.431),
    new google.maps.LatLng(-27.46758, 153.027892)
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

ID名「map_canvas」の要素に「flightPlanCoordinates」配列にて指定した線を2本引く処理となっています。線のプロパティはオーバーレイの一つである「Polyline」クラスによってなされ、そのパラメータとして座標値、色、線の幅サイズなどが指定されます。

注意すべき点としては、上記の例でいうと「flightPlanCoordinates」配列で座標値を指定する際、必ず始点と終点のペアで入力する必要があるので2の倍数になっているかどうか確認するということが挙げられます。

詳細は以下のページを参考にしてください。

複数の線を引くメソッドを作る

Pointという座標を格納するクラスの配列から線をGoogleMap上に引くという関数を作成しました。参考程度に見てください。

再度になりますが、座標値は線の始点と終点のペアで渡す必要があります。

var Point = function(x,y){
    this.x = x ;
    this.y = y ;
}
//線を引く。引数はPointの配列とカラーコード、線の幅サイズ
var drawLine = function(pointlist,colorcode,linewidth){
    var myLatLng = new google.maps.LatLng(0, -180);
    var mapOptions = {
      zoom: 3,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);
        
    /*
     * ここから変更
     */
        
    //引数の座標リストからLatLngの配列を作成する
    var flightPlanCoordinates = [] ;
    var len = pointlist.length ;
    var last_x = 0 ;
    var last_y = 0 ;
    for(var i=0;i<len;i++){
        var p = pointlist[i] ;
        var x = p.x ;
        var y = p.y ;        
        if( i> 0 ){ //2組セットで線となる座標を加えていく
            var latlng0 = new google.maps.LatLng(x,y) ; 
            var latlng1 = new google.maps.LatLng(last_y,last_x) ; 
            flightPlanCoordinates.push(latlng0); 
            flightPlanCoordinates.push(latlng1);                     
        }
        last_x = x ;
        last_y = y ;
    }
    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      strokeColor: colorcode,
      strokeOpacity: 1.0,
      strokeWeight: linewidth
    });

    flightPath.setMap(map);
}

色を0~255で設定する

色の指定はWebサイトでおなじみのカラーコードとなっていますが、256階調のRGB値で指定したいということもあるとおもいます。というか私はそちらの方がなじみがあるので0~255の値をカラーコードに変換して使いました。

使用したのは「rgbcolor.js」というプラグインで以前このブログでも紹介したので気になる方は一度ご覧ください。

今回はランダムに取得した0~255の値をカラーコードに変換する関数を作成しました。

function getRandomColorCode(){
    var rgb = [
        parseInt( Math.random()*256 ),
        parseInt( Math.random()*256 ),
        parseInt( Math.random()*256 )
    ];
    var color = new RGBColor("rgb("+rgb[0]+","+rgb[1]+","+rgb[2]+")");
    return color.toHex();
}

「RGBColor」というのがrgbcolor.jsで記されているクラスで、これに色の情報を渡すことで(相互に)RGB値、カラーコード値に変換することができます。作成した色の値は「"rgb(○○,××,△△)"」の文字列にして渡して、「toHex」メソッドにてカラーコード化します。

前回紹介した『HeartRails Express』と組み合わせて指定の駅同士を結びました。(ちょっと過程は複雑なので省きます。ごめんなさい。)

googlemapapilineimage1

ランダムに色を付け、複数の線を引いてみました。曲線のようになっているのは直線の集合です。わかりやすいように始点と終点にマーカーも設置しました。

スポンサードリンク

-API, JavaScript/jQuery

Copyright© めめんと , 2019 All Rights Reserved Powered by AFFINGER5.