[戻る]
Yahoo! map JS版V2 で地図を描く-3
|
◆表示地図を操作する
先に述べたように、1.地図の表示方法と、2.表示の制御を踏まえて、色々な地図を作成します。
参考
- イベントを使う。
参考m3
具体例
クリックや移動などの動作に伴なう処理を登録できます。位置情報を取得するメソッドなどと組み合わせます。
- アイコンを表示する。
参考m4
具体例
地図上にアイコンを設置してマークとし、その場所の詳細情報などを表示します。
- ポリライン、ポリゴンを表示する。
参考m5
具体例
地図上にポリライン、ポリゴンを設置して、その詳細情報などを表示します。
- GeoRSSデータGeoRSSデータを表示する
参考m6
具体例
(RSSとは)
RSSの情報を地図上で利用・表示できます。
|
１.イベント
- addEvent()を用いてイベントに伴う処理を登録します。
例 具体的なページ例はこちら
イベント定数 ( = YEventType.イベントの種類 )
|
イベント定数
|
説 明
|
引 数
|
|
YEventType.MAP_CLICK
|
地図をクリック
|
クリック位置の緯度経度
|
|
YEventType.MAP_MOVING
|
地図のスクロール中
|
なし
|
|
YEventType.MAP_MOVED
|
地図のスクロールの停止
|
なし
|
|
YEventType.MOUSE_OVER
|
地図上にマウスカーソルがある
|
なし
|
|
YEventType.MOUSE_OUT
|
地図からマウスカーソルが外れる
|
なし
|
|
YEventType.MOUSE_MOVE
|
地図上をマウスカーソルが動く
|
カーソル位置の緯度経度
|
|
YEventType.LAYER_CHANGED
|
縮尺を変更
|
なし
|
|
YEventType.MODE_CHANGED
|
地図の種類を変更
|
なし
|
|
YEventType.ICON_CLICK
|
アイコンをクリック
|
対象アイコンのID
|
|
YEventType.ICON_DBLCLICK
|
アイコンをダブルクリック
|
対象アイコンのID
|
|
YEventType.ICON_MOUSEOVER
|
アイコン上にマウスカーソルがある
|
対象アイコンのID
|
|
YEventType.ICON_MOUSEOUT
|
アイコンからマウスカーソルが外れる
|
対象アイコンのID
|
|
YEventType.ICON_MOUSEDOWN
|
アイコンにマウスダウン
|
対象アイコンのID
|
|
YEventType.ICON_MOUSEUP
|
アイコンにマウスアップ
|
対象アイコンのID
|
|
YEventType.POPUP_OPEN
|
吹き出しが開く
|
対象アイコンのID
|
|
YEventType.POPUP_CLOSE
|
吹き出しが閉じる
|
なし
|
|
２.アイコン
- addIcon()を用いてアイコンを配置します。
例 具体的なページ例はこちら
アイコン引数
|
引 数
|
説 明
|
例
|
|
アイコンID
|
アイコン操作時区分用等
|
"icon"+n
|
|
pos
|
北緯度東経度
|
"35.678327,139.770444"
|
|
吹き出し内容
|
不要時は「""」、HTMLタグも利用可能。
|
"ここは東京駅です"
|
|
カテゴリID
|
アイコン画像を指定するID。省略時は"L1"
既定のものは、"L1"-"L5","S1"-"S5"。
任意画像を使う時は addCategory()* で登録。
|
"L1"
|
|
ラベル内容
|
アイコンの横に表示する説明文
|
"東京駅"
|
- addCategory() について
例
* 画像スタイル: {"width": 画像幅,"height": 画像高さ,"dx": x オフセット,"dy": y オフセット }
●アイコン操作メソッド
|
メソッド
|
説 明
|
補 足
|
|
addIcon(id,pos,popup,type,label)
|
アイコンを配置
|
引数文字列: id,pos,popup,type,label
|
|
addIcons(ary)
|
複数アイコンを配列として配置
|
{id,pos,popup,type,label}の列
|
|
addCategory(id, img, param)
|
カテゴリ（アイコン画像）を追加
|
引数文字列: id, img, param
|
|
removeCategory(id)
|
カテゴリ（アイコン画像）を削除
|
id: カテゴリのID
|
|
getIcon(id)
|
アイコン情報を取得
|
例: ymap.getIcon(target.id).pos
|
|
removeIcon(id)
|
アイコンを削除
|
id: カテゴリのID
|
|
clearIcon()
|
すべてのアイコンを削除
|
引数なし
|
|
moveToIcon(id)
|
指定したアイコン位置に移動
|
id: 移動先のアイコンID
|
|
openPopup(id)
|
アイコンの吹き出しを開く
|
id: 開きたいアイコンのID
|
|
closePopup()
|
アイコンの吹き出しを閉じる
|
引数なし
|
|
setEnableClickPopup(value)
|
吹き出しの開き方を設定
value: true/false
|
true - クリックで表示
false - マウスオーバーで表示（デフォルト）
|
|
setEnableLabel(value)
|
ラベルの表示/非表示を設定
value: true/false
|
true - ラベルを表示（デフォルト）
false - ラベルを非表示
|
|
setEnableDraggableMode(value)
|
ドラッグの可/不可を設定
value: true/false
|
true - ドラッグで移動可
false - アイコン位置を固定（デフォルト）
|
|
３.ポリライン、ポリゴン
- addPolyline()を用いて、任意の場所にポリラインを描きます。
例
pos = new Array(new YLLPoint(35.658230,139.732425),new YLLPoint(35.658691,139.732436),new YLLPoint(35.660055,139.735360),new YLLPoint(35.661644,139.733459),new YLLPoint(35.662132,139.734081));
popup = "<font size='-1'><b>六本木ヒルズ</b>から<br><b>東京ミッドタウン</b></font>";
ymap.addPolyline("p1",pos,popup,{"strokeWidth":7,"strokeColor":"ff00ff","strokeOpacity":1 });
- addPolygon()を用いて、任意の場所にポリゴンを描きます。
例
pos = new Array(new YLLPoint(35.657420,139.731087),new YLLPoint(35.656679,139.731509),new YLLPoint(35.656778,139.732721),new YLLPoint(35.657564,139.732877),new YLLPoint(35.658034,139.732032));
style = { "strokeWidth":5,"strokeColor":"ff9900","strokeOpacity":1,"fillColor":"ffcc00","fillOpacity":0.4 };
ymap.addPolygon("p2",pos,"六本木ヒルズ",style);
- 具体的なページ例はこちら
|
Y-map top/
作る-1/
作る-2/
作る-3/
作る-4/
|