指定の方向へ移動
広告
現在表示されている位置から指定した方向へ地図を移動させる方法を確認します。Mapクラスで用意されているpanDirectionメソッドを使います。
panDirection(dx:Number, dy:Number, animate?：Boolean)
指定された方向に画面分だけ地図を移動します。 Parameters: dx x方向移動距離 dy y方向移動距離 animate アニメーション処理の有無
このメソッドの場合は、1番目と2番目の引数に指定した数だけの画面分を移動します。例えば1番目の引数に1、2番目の引数に0を指定すると地図が右方向へ1画面分移動します。逆に1番目の引数に0、2番目の引数に1を指定すると地図が下方向へ1画面分移動します。
値は正の値だけでなく負の値も指定できます。また指定可能な値は整数だけではなく、例えば0.5を指定すると画面の半分だけ地図が移動することになります。
またオプションの引数である2番目の引数にtrueを指定すると、地図が移動するときにスムーズに移動します。
具体的には次のように記述します。
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.68025,139.7693), 15);
ympa.panDirection(1, -1);
最初に表示された位置から右方向へ1画面分、上方向へ1画面分だけ地図が移動します。
サンプルプログラム
では実際に試してみます。
var ymap;
window.onload = function() {
ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.68025,139.7693), 15);
}
function move(direct){
if (direct == 1){
ymap.panDirection(0.5, 0);
}else if (direct == 2){
ymap.panDirection(0, 0.5);
}else if (direct == 3){
ymap.panDirection(-0.5, 0);
}else if (direct == 4){
ymap.panDirection(0, -0.5);
}
}
<!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/code2_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;">
<input type="button" value="←" onclick="move(1)" />
<input type="button" value="↑" onclick="move(2)" />
<input type="button" value="→" onclick="move(3)" />
<input type="button" value="↓" onclick="move(4)" />
</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>
ブラウザでアクセスすると次のように表示されます。
画面下部に表示されている各ボタンを押すと、ボタンに描かれた矢印の方向へ画面の半分だけ移動します。
以上です。
( Written by T.buzz.Ikura+ )
Facebook Page