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

アクセスカウンタ

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

zoom RSS Yahoo!地図のAPI(11) -クリックして線を絵画する-

<<   作成日時 : 2008/06/18 12:23   >>

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

前回はあらかじめソースに始点と終点の座標を指定することで、地図上にラインを絵画するようにしたのだが、今回は地図をクリックすることで線が絵画されるようにする。

 地図サンプル


まず、「window.onload=function(){」と書かれた部分のすぐ下に次の一行を追記する。


var lenp = [];



次に、前回追加した5行を下記の4行のソースと差し替える。

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);






_map.addEvent(YEventType.MAP_CLICK, function(lenpoint){
lenp.push(lenpoint);
drawLine(lenp);
});



さらに、「window.onload=function(){}」のブロックの下に下記のものを追記する。


function drawLine(lenp) {
var styleline = {strokeWidth: 3, strokeColor: 'FF0000', strokeOpacity: 1};
_map.addPolyline('polyline1', lenp, '', styleline);
}


最初の一行は配列を宣言し、マウスの操作があると配列に座標を入れるとともに"drawLine()"を実行している。


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

 地図サンプル


地図上を自由にクリックしてライン絵画できるのがわかる。

もちろんラインが残ったまま地図を移動させたり拡大縮小も可能だ。

これで道なりに線を引いて何か絵を書いてもいいのだが、やはり実用的なのは距離測定やルート表示だろうか。

テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

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

トラックバック(0件)

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

トラックバック用URL help


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

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

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