Yahoo!地図のAPI(11) -クリックして線を絵画する- LUNARAVE WEBクリエーターの仕事と休息/ウェブリブログ

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

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

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

　地図サンプル

まず、「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()"を実行している。

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

　地図サンプル