[Mapboxライブラリ] ボタンクリックで地図を移動させる
説明
Mapboxライブラリでボタンクリックで地図を移動させるにはmapbox()メソッドのパラメータに"left", "right", "up", "down"の文字を指定します。それぞれ指定した方向に地図が移動します。また、指定したピクセル分移動させたい場合はmapbox()の2番目のパラメータに移動量を指定します。
サンプルプログラム
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="css/mapbox.css" type="text/css" media="all">
<link rel="stylesheet" href="css/main.css" type="text/css" media="all">
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/mapbox.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>Mapbox</h1>
<div id="viewport">
<div style="background: url(images/thumb.jpg) no-repeat; width: 561px; height: 374px;"></div>
<div style="height: 5616px; width: 3744px;">
<img src="images/1.jpg">
<div class="mapcontent"></div>
</div>
</div>
<button onclick="toLeft()">左へ</button>
<button onclick="toRight()">右へ</button>
<button onclick="toUp()">上へ</button>
<button onclick="toDown()">下へ</button>
</body>
</html>
【sample.js】
$(function(){
$("#viewport").mapbox({
mousewheel: true
});
});
function toLeft(){
$("#viewport").mapbox("left");
}
function toRight(){
$("#viewport").mapbox("right");
}
function toUp(){
$("#viewport").mapbox("up");
}
function toDown(){
$("#viewport").mapbox("down");
}