Yahoo!地図のAPI(10) -地図上にライン絵画する-
<<
作成日時 ： 2008/06/16 12:37
>>
トラックバック 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"線の透明度を小数点形式で指定している。
この状態でアクセスして確認する。
関空からすぐ南の海上に北東に向かう赤いラインが表示されているのがわかる。
座標さえわかれば絵画できるので、以前紹介した地図の中心点を取得する機能を利用すればすぐに実現できるだろう。
ただそれだと座標を取得してソースに書き込まなければならないので、次回はクリックするだけでようにしたいと思う。
|
