LogoMark.png

jQuery/UI_Draggable

UI Draggable

jQuery UI によるドラッガブルマップ DEMO


準備

HTML

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Draggable</title>
   <script src="js/jquery-3.2.1.min.js"></script>
   <script src="js/jquery-ui.min.js"></script>
   <script src="js/sample.js"></script>
   <link rel="stylesheet" href="css/jquery-ui.min.css">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
   <h1>Draggable</h1>
   <div id=container>
     <div id="draggable" class="ui-widget-content">
       <span id="fukuoka" class="marker">
         <a href="http://example.com">
           <img src="images/pinMarker.png">
           FUKUOKA
         </a>
       </span>
       <span id="osaka" class="marker">
         <a href="http://example.com">
           <img src="images/pinMarker.png">
           OSAKA
         </a>
       </span>
   : id="tokyo" も同様
     </div>
   </div>
   <div id="controller">
     <button id="zoomIn"> + </button>
     <button id="zoomOut"> - </button>
   </div>
 </body>
 </html>


CSS

要点のみ記載しています。

 #container {
   /* フレームのサイズは自由 */
   width: 80%;
   height: 400px;
   border: 1px solid gray;
   margin: auto;
   overflow: hidden;
   background-color: rgb(154,206,255);
 }

 #draggable {
   position: relative;
   /* このサイズは背景画像のサイズと一致させる */
   width: 600px;
   height: 1200px;
   background-image: url(../images/map.png);
   /* 初期設定(自由) */
   transform: scale(0.8);
   margin: auto;
   margin-top: -420px;
 }

 .marker img{
   width: 32px;
 }

 #fukuoka {
   position: absolute;
   left: 80px;
   top: 670px;
 }
 
 :#osaka, #tokyo も同様

 #controller{
   margin: 40px;
   text-align: center;
 }


JavaScript'

var sc="0.8";
$( function() {
  $( "#draggable" ).draggable();
  $( "#zoomIn" ).click( function(){
    sc *= 1.1;
    $( "#draggable" ).css( {Transform: 'scale(' + sc + ')' } );
  });
  $( "#zoomOut" ).click( function(){
    sc /= 1.1;
    $( "#draggable" ).css( {Transform: 'scale(' + sc + ')' } );
  });
} );


参考:マーカーのホバーでメッセージを出力 > DEMO2



PAGES

GUIDE

DATA

Last-modified: 2020-02-02 (日) 18:07:37