[Mapboxライブラリ] ボタンクリックで地図を拡大／縮小表示する
説明
Mapboxライブラリでボタンクリックで地図を拡大／縮小表示するにはmapbox()メソッドのパラメータに"zoom"または"back"の文字を指定します。"zoom"の場合はズームイン、"back"はズームアウトになります。また、特定のズームサイズにしたい場合は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="zoomIn()">拡大</button>
<button onclick="zoomOut()">縮小</button>
</body>
</html>
【sample.js】
$(function(){
$("#viewport").mapbox({
mousewheel: true
});
});
function zoomIn(){
$("#viewport").mapbox("zoom");
}
function zoomOut(){
$("#viewport").mapbox("back");
}