Yahoo! map JS版 Ver.1 で描く-2

　[戻る]
Yahoo! map JS版V1 で地図を描く-2

◆地図表示を制御

　　　Yahoo! mapは、地図の表示を次のように制御出来ます。　参考

　　　●マウスを使った操作
　　　　・センタリング - 地図をダブルクリックすると、その点を中心にした地図を表示できます。
　　　　・地図の移動 - 地図をドラッグするとマウスの動きで地図を移動できます。
　　　　・縮尺の変更 - マウスホイールを使って縮尺が変更できます。

　　　　　操作オプションはY.Mapオブジェクトの初期化時の第二引数で指定できます。
　　　　　第二引数オブジェクトをobjとしたとき、obj.configure.オプション名にboolean値を指定します。
　　　　　以下はサンプルコードです。
　　　　　　

 var ymap = new Y.Map("map",{
    configure: {
        scrollWheelZoom : true,
        singleClickPan : true
    }
 });

　　　　　　　configureに指定可能なパラメータは以下の通りです。

パラメータ名	内　容	default値
doubleClickZoom	ダブルクリックで地図のズームインを有効にする	false
scrollWheelZoom	マウスのスクロールホイールによるズーム処理を有効にする	false
singleClickPan	シングルクリックで地図を移動する	false
dragging	ドラッグ操作で地図を移動可能にする	true
continuousZoom	ズーム時に、滑らかなアニメーション処理にする	false
hybridPhoto	航空写真レイヤーセットを写真と注記のハイブリッド表示とする	false

　　　　　　操作オプションは地図の初期化後もY.Map.setConfigure()メソッドで設定できます。
　　　　　　

 ymap.setConfigure("scrollWheelZoom", false);

　　　　　　現在の設定値は、Y.Map.getConfigure()メソッドで取得できます。
　　　　　　

//例: 航空写真レイヤーセットのハイブリッド表示が無効のとき、有効にする。
if (!ymap.getConfigure("hybridPhoto")) {
    ymap.setConfigure("hybridPhoto", true);
}

　　　
　　●地図上のボタンを操作　参考
　　　　地図上に表示させたボタンを使っても表示を変えることも出来ます。
　　　次のようにaddControlやremoveControlを記述します。
　　　　　　

var control = new Y.LayerSetControl();
ymap.addControl(control);

　　　　各表示例は、以下のようになります。
表示ボタン

コントロール名	説　　明
Y.ZoomControl	縮尺変更のシンプルボタンを表示 (1)
Y.LayerSetControl	レイヤセット切り替えボタンを表示 (2)
Y.CenterMarkControl	地図の中心位置を表示 (3)
Y.ScaleControl	地図のスケールバーを表示 (4)
Y.CenterMarkControl	地図検索のインターフェースを表示 (5)
Y.HomeControl	初期位置をホームアイコンとして表示
Y.SliderZoomControlHorizontal	縮尺変更の横長スライダーを表示
Y.SliderZoomControlVertical	縮尺変更の縦長スライダーを表示
Y.AddressCategoryControl	住所をカテゴリ形式で表示

　　　●上記の具体例は以下のようになります。　実際例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script type="text/javascript" charset="utf-8" src="https://map.yahooapis.jp/js/V1/jsapi?appid=【APPID】"></script>
  <script type="text/javascript">
      window.onload = function(){
        var ymap = new Y.Map("map");
        ymap.drawMap(new Y.LatLng(35.69015,139.69977),15, Y.LayerSetId.NORMAL);
        var layer = new Y.LayerSetControl ;
        ymap.addControl(layer);
        var slider = new Y.SliderZoomControlVertical ;
        ymap.addControl(slider);
        var scale = new Y.ScaleControl;
        ymap.addControl(scale);
        var home = new Y.HomeControl;
        ymap.addControl(home);
      }
  </script>
</head>
<body>
  <div id="map" style="width:300px; height:300px"></div>
  <a href="https://developer.yahoo.co.jp/about">
    <img src="https://i.yimg.jp/images/yjdn/yjdn_attbtn2_105_17.gif" width="105" height="17" title="Webサービス by Yahoo! JAPAN" border="0" style="margin:4px 25px 15px 0px;float:left;"></a>
</body>
</html>

　Y-map top/ 作る-1/ 作る-2/ 作る-3/ 作る-4/ 作る-5/ 作る-6/