Rakuten

  • 楽天ダウンロード

    楽天市場

おすすめ本

天気予報

最近のトラックバック

  • event (夢茶爺&苦茶爺のPC奮戦備忘録)

カウンタ

VC

admax

カテゴリ「javascript」の19件の記事 Feed

2011年5月30日 (月)

「GoogleMap API V3」 の使い方その7(ポリライン・ポリゴン)

マップ上にポリライン・ポリゴンを表示

マップ上にポリライン(折れ線)及び、ポリゴン(多角形)を表示します。
ポリラインを表示するにはPolylineクラスを生成し、それをマップ上に設定します。 また、ポリゴンを表示するにはPolygonクラスを生成し、それをマップ上に設定します。

以下の例は、5個の座標を用いてそれぞれ同じ形のポリライン、ポリゴンを表示します。 ポリゴンは内部を薄い色で塗りつぶしを行います。

 


■関連記事
「GoogleMap API V3」 の使い方その1
「GoogleMap API V3」 の使い方その2
「GoogleMap API V3」 の使い方その3(マーカーの表示)
「GoogleMap API V3」 の使い方その4(イベント)
「GoogleMap API V3」 の使い方その5(続イベント)
「GoogleMap API V3」 の使い方その6(続々イベント)
「GoogleMap API V3」 の使い方その8(ジオコーディング)
「GoogleMap API V3」 の使い方その9(ルート検索)
「GoogleMap API V3」 の使い方その10(ルート検索2)
「GoogleMap API V3」 の使い方その11(さらにInfowindow)


楽天市場

2011年5月27日 (金)

「GoogleMap API V3」 の使い方その6(続々イベント)

マップのイベントとマーカーのイベントの複合的な使い方

マップ上でクリックした位置にマーカーを表示し、さらにそのマーカーをクリックした時に マーカーの緯度経度の値を情報ウインドウに表示します。

この例は、Googleのサンプルとして乗っているものを変更したものです。
マップ上でのクリックイベント時の関数を設定し、その中でマーカーを生成し、さらに情報ウインドウの表示を 行うように、マーカーのクリックイベント時の関数を設定しています。

また、マーカーを生成した時に、そのマーカーをグローバル変数の配列に保存し、その配列のマーカーを 使って、再表示、クリア、削除処理を行っています。
マップ上をクリックするとマーカーを表示します。
さらにそのマーカーをクリックすると緯度経度をウインドウに表示します。

     
 


■関連記事
「GoogleMap API V3」 の使い方その1
「GoogleMap API V3」 の使い方その2
「GoogleMap API V3」 の使い方その3(マーカーの表示)
「GoogleMap API V3」 の使い方その4(イベント)
「GoogleMap API V3」 の使い方その5(続イベント)
「GoogleMap API V3」 の使い方その7(ポリライン・ポリゴン)
「GoogleMap API V3」 の使い方その8(ジオコーディング)
「GoogleMap API V3」 の使い方その9(ルート検索)
「GoogleMap API V3」 の使い方その10(ルート検索2)
「GoogleMap API V3」 の使い方その11(さらにInfowindow)


楽天市場

「GoogleMap API V3」 の使い方その5(続イベント)

マーカーのイベントで情報ウインドウを表示

マップ上にマーカーを表示し、そのマーカーをクリックした時に情報ウインドウを表示します。
以下の例は、マーカーのクリックイベントの関数を登録する前で、情報ウインドウを生成しておき、 クリックイベントの関数の中でその情報ウインドウを表示する様にしています。

 





複数のマーカーイベントで情報ウインドウを表示

「使い方その3(マーカーの表示)」で複数のマーカーを表示しましたが、それを拡張してそれぞれのマーカーでクリックしたときに それぞれのマーカーの内容を表示する例を示します。

 


最初の例で説明しましたイベントの処理とは、少し変わった部分があります。 先ず、GoogleMapオブジェクトの変数宣言を関数の外に置いた点です。 これは、gmap を別の関数からも参照しているため、グローバルな変数として宣言しました。

また、情報ウインドウの生成とクリックイベント関数の登録処理をひとつの関数として独立させてあります。 これは、この関数の中で生成される情報ウインドウのインスタンスがそれぞれのマーカー毎に別々のものになる様にしています。

このソースを作成する前に失敗したものがありますので、以下の例をご覧ください。 各マーカーは表示されますが、クリックしても5番目のマーカーのところにしか情報ウインドウは表示されません。

クリックイベントの関数のinfoWindowはforループ内の変数であるため、同じ変数が割り当てられて クリックイベント時にはforループ処理の最後の5番目のマーカーの情報ウインドウが残ったまま になっています。それで、どのマーカーをクリックしても情報ウインドウには「marker-5」としか表示されません。

 

■関連記事
「GoogleMap API V3」 の使い方その1
「GoogleMap API V3」 の使い方その2
「GoogleMap API V3」 の使い方その3(マーカーの表示)
「GoogleMap API V3」 の使い方その4(イベント)
「GoogleMap API V3」 の使い方その6(続々イベント)
「GoogleMap API V3」 の使い方その7(ポリライン・ポリゴン)
「GoogleMap API V3」 の使い方その8(ジオコーディング)
「GoogleMap API V3」 の使い方その9(ルート検索)
「GoogleMap API V3」 の使い方その10(ルート検索2)
「GoogleMap API V3」 の使い方その11(さらにInfowindow)


楽天市場

2011年5月26日 (木)

「GoogleMap API V3」 の使い方その4(イベント)

マップのイベント

マップなどの各種オブジェクトに対して、ユーザインターフェース等からのイベントを処理できるようになっています。
以下の例は、マップ上でクリックした場所の緯度・経度をアラートで表示します。

「google.maps.event」の「addListener」メソッドを使って、イベントリスナーを登録します。 「addListener」の引数について

addListener(instance, eventName, handler)

引数 タイプ 内容
instance Object 対象オブジェクトのインスタンス
(例ではマップなので gmap を渡す)
eventName string イベント名
('click','dblclick','mouseup','mousedown','mouseover','mouseout'等)
handler function リスナ関数
(例の様に直接宣言するか、別に関数を宣言しその名前を指定)

この例のリスナ関数の引数は、MouseEventのオブジェクトが返されてきます。 引数の名前を「event」としましたが、分かりやすい識別名を宣言します。 「event」のオブジェクトには、タイプが「LatLng」のプロパティ「latLng」が存在します。 それでタイプ「LatLng」の緯度取得メソッドである「lat()」を使って、緯度を取得します。

 






マーカーのイベント

マーカーをクリックしたときに、アラートを表示する簡単な例を示します。

 


マーカーのクリックイベントのハンドラで「function(event)」と宣言していますが、 ブラウザによって返されるeventオブジェクトのプロパティが異なるため、 これを利用することはないと思われます。

もし、マーカーの緯度経度を取得するのであれば、以下の様に位置(緯度経度)取得メソッドを使用します。
補足説明ですが、「this」キーワードは、実行中のコードが「自分自身」を表すオブジェクトにアクセスするもので、 この場合では、functionを持っているマーカーオブジェクトを指し示し、マーカーオブジェクトが 持っているメソッドをアクセスすることができます。

■関連記事
「GoogleMap API V3」 の使い方その1
「GoogleMap API V3」 の使い方その2
「GoogleMap API V3」 の使い方その3(マーカーの表示)
「GoogleMap API V3」 の使い方その5(続イベント)
「GoogleMap API V3」 の使い方その6(続々イベント)
「GoogleMap API V3」 の使い方その7(ポリライン・ポリゴン)
「GoogleMap API V3」 の使い方その8(ジオコーディング)
「GoogleMap API V3」 の使い方その9(ルート検索)
「GoogleMap API V3」 の使い方その10(ルート検索2)
「GoogleMap API V3」 の使い方その11(さらにInfowindow)


楽天市場

2011年5月25日 (水)

「GoogleMap API V3」 の使い方その3(マーカーの表示)

簡単なマーカーの表示
前回の地図の上に、簡単なマーカーを表示したいと思います。

マーカーを表示するときは、最初にマップを生成します。その後、マーカーを生成し、マーカーをマップに関連付けて表示させます。
マーカーのオプションに「title: "maker-test"」を指定していますので、マーカーのところにカーソルを持っていくと "maker-test"のロールオーバーが表示されます。

マーカークラスについて詳しくは以下のURLを参照してください。
Marker クラス
尚、「setMap」を使わなくても、以下の様にオプションで一括で指定しても同じことができます。(マーカーの生成部分のみ抜粋)

 





複数マーカーの表示

複数のマーカーを表示したいことはよくあることだと思います。今回は5個の適当な緯度・経度のマーカーの表示を行います。

 


次回はイベントを取り上げたいと思います。

■関連記事
「GoogleMap API V3」 の使い方その1
「GoogleMap API V3」 の使い方その2
「GoogleMap API V3」 の使い方その4(イベント)
「GoogleMap API V3」 の使い方その5(続イベント)
「GoogleMap API V3」 の使い方その6(続々イベント)
「GoogleMap API V3」 の使い方その7(ポリライン・ポリゴン)
「GoogleMap API V3」 の使い方その8(ジオコーディング)
「GoogleMap API V3」 の使い方その9(ルート検索)
「GoogleMap API V3」 の使い方その10(ルート検索2)
「GoogleMap API V3」 の使い方その11(さらにInfowindow)


楽天市場

2011年5月23日 (月)

「GoogleMap API V3」 の使い方その2

前回に引き続き簡単な地図の表示に、各種コントロールの設定方法についてです。

 



mapTypeControl(地図の種別切り替え)

マップタイプコントロールの詳細を指定したい場合は、mapTypeControlをtrueにし、mapTypeControlOptionsの設定を行います。
mapTypeControlOptionsにはposition、style等のオプションがあります。それぞれの設定値は以下の通りです。

positionの設定は、以下のControlPositionクラスの定数値を用います。

定数 内容
TOP 上中央
TOP_LEFT 左上
TOP_RIGHT 右上
LEFT
RIGHT
BOTTOM 下中央
BOTTOM_LEFT 左下(Google ロゴの右側)
BOTTOM_RIGHT 右下(著作権の左側)

styleの設定は、以下のMapTypeControlStyleクラスの定数値を用います。

定数 内容
DEFAULT デフォルトのマップ タイプ コントロール
DROPDOWN_MENU ドロップダウン メニュー
HORIZONTAL_BAR 水平ラジオ ボタン バー

navigationControl(拡大縮小のナビ)

拡大縮小のナビの詳細を指定したい場合は、navigationControlをtrueにし、navigationControlOptionsの設定を行います。

styleの設定は、以下のNavigationControlStyleクラスの定数値を用います。

定数 内容
ANDROID 小さいズーム コントロール(Androidのマップソフトに似ている)
DEFAULT デフォルトのナビゲーション コントロール
SMALL ズームのみのナビゲーション コントロール
ZOOM_PAN ズーム スライドと双方向の移動パッド

scaleControl(縮尺)

縮尺の詳細を指定したい場合は、scaleControlをtrueにし、scaleControlOptionsの設定を行います。

styleの設定は、以下のScaleControlStyleクラスの定数値を用います。 定数値としては現状、「DEFAULT」しかないので、これを指定しなくても問題ありません。


■関連記事
「GoogleMap API V3」 の使い方その1
「GoogleMap API V3」 の使い方その3(マーカーの表示)
「GoogleMap API V3」 の使い方その4(イベント)
「GoogleMap API V3」 の使い方その5(続イベント)
「GoogleMap API V3」 の使い方その6(続々イベント)
「GoogleMap API V3」 の使い方その7(ポリライン・ポリゴン)
「GoogleMap API V3」 の使い方その8(ジオコーディング)
「GoogleMap API V3」 の使い方その9(ルート検索)
「GoogleMap API V3」 の使い方その10(ルート検索2)
「GoogleMap API V3」 の使い方その11(さらにInfowindow)


楽天市場

2011年5月20日 (金)

「GoogleMap API V3」 の使い方その1

「GoogleMap API」もバージョンが3.0になってからしばらく経ちますが、「GoogleMap API V3」を使う機会がありましたので 「GoogleMap API V3」について数回に分けてチュートリアルを載せていきます。

今回は最初として、簡単な地図のみを表示することを行います。(JR福井駅を中心とした地図)


 

手順としては以下の様に行います。

1)Google Maps API を読み込む

headタグ内に上記のように宣言します。「sensor」パラメータはこのHTMLがユーザー位置情報の取得にセンサーを使用するかどうかを示すためのもので、 必ず指定しなければなりません。
この場合は位置情報は必要ありませんので、「false」と指定します。

2)bodyタグ内に地図を表示する領域をdivタグで宣言する

bodyタグの中にdivタグで縦・横300pxの領域を、idを「map」として宣言します。

3)Google Maps APIに必要なオプションを宣言する

最初の「google.maps.LatLng」はパラメータとして渡される緯度・経度を「LatLng」クラスのデータに変換します。
次は、GoogleMapオブジェクトを生成するためのパラメータですが、最小限必要な地図の解像度「zoom」、 地図の表示形式「mapTypeId」、地図の中心の緯度・経度「center」を宣言します。
(基本的には必須のもののみで取りあえず地図の表示はできます)
パラメータはその他以下の様なものがあります。ここに示したもの以外のオプションがあります。詳しくは以下のURLを参照してください。

MapOptions オブジェクト

パラメータ データタイプ 内容
backgroundColor string 地図の DIV の背景に使用される色。
center LatLngクラス 地図の最初の中心。※必須
mapTypeControl boolean マップ タイプ コントロールの有効/無効(初期時の状態)。
mapTypeControlOptions MapTypeControlOptionsクラス マップ タイプ コントロールの最初の表示オプション。
mapTypeId MapTypeIdクラス 地図の最初の mapTypeId。※必須
navigationControl boolean ナビゲーション・コントロールの有効/無効(初期時の状態)。
navigationControlOptions NavigationControlOptionsクラス ナビゲーション・コントロールの最初の表示オプション。
noClear boolean true の場合、地図の DIV の内容を消去してはいけません。
scaleControl boolean スケール コントロールの有効/無効(初期時の状態)。
scaleControlOptions ScaleControlOptionsクラス スケール コントロールの最初の表示オプション。
scrollwheel boolean 地図上でのスクロール・ホイールを使用したズーム指定。(デフォルトでは、スクロール・ホイールは有効)
zoom number 地図の最初のズームレベル。※必須


4)bodyタグのonloadイベント時に、宣言されたオプションをパラメータとして渡し、GoogleMapの生成を行う。

GoogleMapのコンストラクタ「google.maps.Map」のパラメータはHTMLのコンテナ(DIVタグの要素)と3)で指定されたオプションを渡します。
この処理により「id="map"」のDIVタグに地図が表示されます。 初回としては簡単な地図の表示でしたが、今後はいろいろな処理について書いていきたいと思います。
尚、「GoogleMap API V3」について本家の説明がありますので、参考にしてください。
Google Maps JavaScript API V3


■関連記事
「GoogleMap API V3」 の使い方その2
「GoogleMap API V3」 の使い方その3(マーカーの表示)
「GoogleMap API V3」 の使い方その4(イベント)
「GoogleMap API V3」 の使い方その5(続イベント)
「GoogleMap API V3」 の使い方その6(続々イベント)
「GoogleMap API V3」 の使い方その7(ポリライン・ポリゴン)
「GoogleMap API V3」 の使い方その8(ジオコーディング)
「GoogleMap API V3」 の使い方その9(ルート検索)
「GoogleMap API V3」 の使い方その10(ルート検索2)
「GoogleMap API V3」 の使い方その11(さらにInfowindow)




楽天市場

2011年5月19日 (木)

javascriptのクラス

今回はjavascriptのクラスについてです。

上の例は、一番簡単なクラスを宣言してみました。
「function」文で宣言だけをしたものですが、「new」宣言して「obj」に代入してやればクラス「hoge」が生成されて返されます。
「function」で宣言されたものをそのまま実行すれば、いわゆる関数ですが「new」で作成すればクラスになるということです。

「alert」の結果は”obj:[object Object]”が表示されます。

上の例は、一番簡単なクラスにプロパティを追加して宣言しました。
別の変数に「new」宣言して代入してやれば別々のインスタンス「hoge」クラスが生成されます。

「alert」の結果は”objX.property1:A”、”objY.property1:A”が表示されます。
同じプロトタイプの値を持つインスタンスが生成されたことが分かります。
異なるインスタンスかどうかは、”objY.property1”への代入で最後の「alert」の結果がかわることでわかります。


上の例は、プロパティの無い場合に、後付でプロパティを強制的に代入すればその時点でプロパティが生成されるようです。
「dumpObject」関数はオブジェクトのプロパティ内容を表示するように作成した、簡易の変数ダンプ関数です。

そこでプロパティ宣言をするところで「prototype」をつけてみます。

「hoge.property1 = "A";」と宣言したものと変わらない感じですが、内部的には最初の2個の「new」宣言を行った時点では 「objX」「objY」のproperty1は同じものを参照しています。
その後「objX.property1 = "B";」の時点で、「objX.property1」が別のところに生成され、別のプロパティとして存在することになります。

それでは、prototypeを関数に拡張してみます。

この例から、同じクラス宣言で同じ関数ではあるが、特別に機能を変えたいときなどに便利な感じです。


楽天市場

2011年5月 7日 (土)

Javascriptでの論理OR、論理ANDの注意点

Javascriptで変数を判定する場合に、判定条件が2個以上あるときに論理演算を使います。
例として以下の様な感じでしょうか。

最初のif文は(x > 10)の論理式と(y > 20)の論理式をAND演算で結合し判定しています。
また、次のif文はそれぞれの論理式をOR演算で結合しています。

これらを以下の様にしてみると、新しい変数h1、h2にはそれぞれ論理演算の結果であるtrueもしくはfalseの値が設定されます。

論理OR、論理ANDの前後が論理式の場合は分かりやすいのですが、それが式そのものであった場合はどうなるでしょうか。
以下の様に書いてみます。

この例では、「x || 10」の「x」の値がfalseと判定されない値(空では無い文字列, 0ではない数値, オブジェクト等)の場合、 その値が「h1」に代入されます。この場合、論理演算子の右側の「10」は判定されないことになります。
また、「x」の値がfalseと判定された場合は「10」が「h1」に代入されます。

「y && 20」の「y」の値がfalseと判定された場合は、論理ANDなので右側の「20」は評価されずにfalseが「h2」に代入されます。
また、「y && 20」の「y」の値がfalseと判定されない場合は、右側の「20」が評価され「h2」にその値が代入されます。

これらの考え方で「(x > 10) && (y > 20)」および「(x > 10) || (y > 20)」を再び見てみれば分かりやすいと思います。

「x || 10」の方法を関数の引数のデフォルト値設定などで利用できると思われます。