指定の座標へ移動
広告
地図で表示される場所を指定の座標へ移動する方法を確認します。Mapクラスで用意されているpanToメソッドを使います。
panTo(center:LatLng, animate?:Boolean)
地図の中心を指定された地点に変更します。 Parameters: center 中心点緯度経度 animate アニメーション処理の有無
1番目の引数に地図で表示する新しい座標を指定します。ここで指定した座標が地図の中央の座標となります。オプションの引数である2番目の引数にtrueを設定すると、現在地から新しい地点へ移動する時にスムーズに移動します。
具体的には次のように記述します。
var ymap = new Y.Map("map");
ymap.drawMap(new Y.LatLng(35.68025,139.7693), 15);
ympa.panTo(new Y.LatLng(35.629082,139.738884));
引数に指定した(35.629082,139.738884)の座標へ地図が移動します。
サンプルプログラム
では実際に試してみます。
var ymap;
var tokyoS = new Y.LatLng(35.68025,139.7693);
var akihabaraS = new Y.LatLng(35.698379,139.773259);
window.onload = function() {
ymap = new Y.Map("map");
ymap.drawMap(tokyoS, 15);
}
function move(pointNo, ani){
if (pointNo == 1){
ymap.panTo(akihabaraS, ani);
}else{
ymap.panTo(tokyoS, ani);
}
}
<!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/code1_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="秋葉原(A)" onclick="move(1, true)" />
<input type="button" value="東京駅(A)" onclick="move(2, true)" />
<input type="button" value="秋葉原" onclick="move(1, false)" />
<input type="button" value="東京駅" onclick="move(2, false)" />
</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>
ブラウザでアクセスすると次のように表示されます。
画面下部に表示されているボタンを押すと、ボタンに書かれた地名の場所へ移動します。では「秋葉原」と書かれたボタンを押して下さい。
事前に秋葉原付近の座標を指定してあり、その座標へ移動します。
なおアニメーション有りで移動すると画面がスクロールして地図が移動します。ただし、あまり離れた場所の場合はアニメーション有りで設定してあっても切り替えるように移動します。(実際にどの違うのかは上記URLをブラウザで開いて試してみて下さい)。
( Written by T.buzz.Ikura+ )
Facebook Page