TOP>Google>Google Maps APIで中心の十字架を表示

Ci070628174836.jpgGoogleMapsで経度と緯度を調べるツールを自作しようと思ったので地図の中心に十字マークを設定するコードを追加してみた。

マーカーを貼って地図が移動するたびに、clearoverlayとaddoverlay処理を繰り返すのはなんとなくスマートじゃないような気がするので、縦長と細長の空divエレメントを作って、GControlPositionで位置を設定するようにした。処理の流れをまとめると

  1. 十字架のスタイルを設定。
  2. 横線と縦線の空divを作成。(backgroundColorで塗りつぶしのブロック要素)
  3. 地図の中心位置とdiv要素のオフセット位置を計算。
  4. GControlPositionで位置を指定。
  5. 4で作成した変数.apply(DOMエレメント);map.getContainer().appendChild(DOMエレメント);

ちなみに正しいjavascript用語を使っているかは不明です。

//cross_px:十字の横幅・縦幅(ピクセル)
//cross_td:十字の太さ(ピクセル)
//cross_cr:十字の色(スタイルシートと同様の書式)
var cross_px = 60;
var cross_td = 2;
var cross_cr = "red";

//十字の縦線のエレメントを設定    
var cross_h_emt =  document.createElement("div");
//IE用にfontSizeを最小値
cross_h_emt.style.fontSize = "1px";
cross_h_emt.style.margin = "0px";
cross_h_emt.style.padding = "0px";
cross_h_emt.style.width = cross_px + "px";
cross_h_emt.style.height = cross_td + "px";
cross_h_emt.style.backgroundColor = cross_cr;

//十字の横線のエレメントを設定
var cross_v_emt =  document.createElement("div");
cross_v_emt.style.margin = "0px";
cross_v_emt.style.padding = "0px";
cross_v_emt.style.width = cross_td+"px";
cross_v_emt.style.height = cross_px + "px";
cross_v_emt.style.backgroundColor = cross_cr;

//十字(縦・横線)の位置を計算
var MapPX = map.getSize();
var mycenterHX = MapPX.width  / 2 - cross_px / 2;
var mycenterHY = MapPX.height / 2 - cross_td / 2;
var mycenterVX = MapPX.width  / 2 - cross_td / 2;
var mycenterVY = MapPX.height / 2 - cross_px / 2;

var mycenter_H = new GSize(mycenterHX,mycenterHY);
var myposH = new GControlPosition(G_ANCHOR_TOP_LEFT, mycenter_H);
myposH.apply(cross_h_emt);
map.getContainer().appendChild(cross_h_emt); 

var mycenter_V = new GSize(mycenterVX,mycenterVY);
var myposV = new GControlPosition(G_ANCHOR_TOP_LEFT, mycenter_V);
myposV.apply(cross_v_emt); 
map.getContainer().appendChild(cross_v_emt);

極めて単純なスクリプト・・・。これをmap = Gmap2();の後に貼り付けてください。

コードの説明をすると(要らないかな??)、
var cross_px = 60;
var cross_td = 2;
var cross_cr = "red";
上から順に、十字架の大きさ(横幅・縦幅共通)・十字架の太さ・十字架の色。



posted by パンダ at 22:13 |Comment(0) | Google
ブックマークに追加: はてなブックマーク Yahoo!ブックマーク
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

Google Maps API関連記事