LUNARAVE WEBクリエイターの仕事と休息

アクセスカウンタ

Google Maps APIの利用戦国IXAWeb技術Youtubeチャンネル

zoom RSS Yahoo!地図のAPI(10) -地図上にライン絵画する-

<<   作成日時 : 2008/06/16 12:37   >>

ブログ気持玉 0 / トラックバック 0 / コメント 0

バージョンアップした"Yahoo!地図"では地図上にライン絵画できるようになったのでルートを指し示すことが可能になった。

前回までに以下の実装をしているので引き続きこれを利用する。

・拡大・縮小スライダーの表示
・ボタンを押すと中心座標が表示される機能
・初期表示時に関西圏が表示される
・複数個所にアイコンを立たす。
・バージョンを2にアップ。

 地図サンプル


ライン絵画させるには下記の場所に5行を追記する。

window.onload=function(){
_map = new YahooMapsCtrl("map", "34.4126484,135.3017939", 6);
_map.setVisibleSliderbar(true);
_map.setEnableWheelOperation(true);

centerIcon = [
{id:"cenIcon01", pos:"34.40918669939271, 135.29959299788484", popup:"りんくうJCT", type:"L1"},
{id:"cenIcon02", pos:"34.4241123261143, 135.24009206420362", popup:"関西国際空港", type:"L2"}
]
_map.addIcons(centerIcon);
}






window.onload=function(){
_map = new YahooMapsCtrl("map", "34.4126484,135.3017939", 6);
_map.setVisibleSliderbar(true);
_map.setEnableWheelOperation(true);

centerIcon = [
{id:"cenIcon01", pos:"34.40918669939271, 135.29959299788484", popup:"りんくうJCT", type:"L1"},
{id:"cenIcon02", pos:"34.4241123261143, 135.24009206420362", popup:"関西国際空港", type:"L2"}
]
_map.addIcons(centerIcon);

var popup='ポリライン';
var style = {strokeWidth: 3, strokeColor: 'FF0000', strokeOpacity: 1};
var pos = new Array();
pos.push( new YLLPoint("34.3990250,135.2438260"));
pos.push( new YLLPoint("34.4293333,135.2904911"));
_map.addPolyline('polyline1', pos, popup, style);
}


追記したプログラムの上の行から、
・ライン選択時のポップアップ内容
・ラインの線種
・ラインの点配列の生成
・始点の設定
・終点の設定
・設定した内容でライン絵画
となっている。

線種の"strokeWidth"は線の幅をピクセル値で指定。
"strokeColor"は線の色を16進数表現で指定('FFFFFF')。
"strokeOpacity"線の透明度を小数点形式で指定している。


この状態でアクセスして確認する。

 地図サンプル


関空からすぐ南の海上に北東に向かう赤いラインが表示されているのがわかる。

座標さえわかれば絵画できるので、以前紹介した地図の中心点を取得する機能を利用すればすぐに実現できるだろう。

ただそれだと座標を取得してソースに書き込まなければならないので、次回はクリックするだけでようにしたいと思う。

テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
Yahoo!地図のAPI(10) -地図上にライン絵画する- LUNARAVE WEBクリエイターの仕事と休息/BIGLOBEウェブリブログ
文字サイズ:       閉じる