指定したピクセル分を移動
広告
現在表示されている位置からピクセル単位で指定した分だけ地図を移動させる方法を確認します。Mapクラスで用意されているpanByメソッドを使います。
panBy(distance:Size, animate?:Boolean)
指定されたピクセルサイズ分地図を移動します。 Parameters: distance 移動距離 animate アニメーション処理の有無
1番目の引数に移動する距離を表すSizeクラスのオブジェクトを指定します。Sizeクラスは幅と高さの二つの値を保持するクラスであり次のように定義されています。
Size(width:Number, height:Number)
矩形サイズをピクセル座標で表します。 Parameters: width 矩形サイズの幅 height 矩形サイズの高さ
例えば右方向へ10ピクセル、下方向へ20ピクセル移動するには次のようにSizeクラスのオブジェクトを指定します。
var size = new Y.Size(10, 20);
このように移動距離を表すSizeクラスのオブジェクトを作成したら、panByメソッドの引数として指定します。
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.68025,139.7693), 15);
var size = new Y.Size(10, 20);
ymap.panBy(size);
なおSizeクラスの幅の引数にマイナスの値を指定すれば左方向へ、高さの引数にマイナスの値を指定すれば上方向へ移動します。
またpanByメソッドのオプションの引数である2番目の引数にtrueを指定すると、地図が移動するときにスムーズに移動します。
サンプルプログラム
では実際に試してみます。
var ymap;
window.onload = function() {
ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.68025,139.7693), 15);
}
function moveTo(){
var width = document.getElementById("widthbtn").value;
var height = document.getElementById("heightbtn").value;
var size = new Y.Size(parseInt(width), parseInt(height));
ymap.panBy(size);
}
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Yahoo! JavaScriptマップAPI</title>
<script type="text/javascript" charset="utf-8"
src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=(id)">
</script>
<script src="./js/code3_1.js" type="text/javascript"></script>
</head>
<body>
<p>
JavaScriptマップAPIを使ったサンプルです。
</p>
<div id="map" style="width:400px; height:300px"></div>
<form>
<p style="padding:0;margin:0;">
width：<input type="text" id="widthbtn" size="10" value="10" />
height：<input type="text" id="heightbtn" size="10" value="10" />
<input type="button" id="panbybtn" value="移動" onclick="moveTo()" />
</p>
</form>
<!-- Begin Yahoo! JAPAN Web Services Attribution Snippet -->
<a href="http://developer.yahoo.co.jp/about">
<img src="http://i.yimg.jp/images/yjdn/yjdn_attbtn1_125_17.gif" title="Webサービス by Yahoo! JAPAN" alt="Web Services by Yahoo! JAPAN" width="125" height="17" border="0" style="margin:10px 15px 15px 15px"></a>
<!-- End Yahoo! JAPAN Web Services Attribution Snippet -->
</body>
</html>
ブラウザでアクセスすると次のように表示されます。
画面左下に表示される二つのテキストボックスにピクセル単位で数値を入力し「移動」ボタンを押して下さい。入力した値の分だけ地図が移動します。
今回の場合は幅が 30 高さが -50 と入力しましたので、右へ 30 上方向へ 50 だけ地図が移動しました。
以上です。
( Written by T.buzz.Ikura+ )
Facebook Page