Bing mapsバージョン8.カスタマイズボタン

私はバージョンマップ8を使用しています。
ズーム（イン/アウト）ボタンをカスタマイズしたいと思います。Bing mapsバージョン8.カスタマイズボタン

使用カスタムアイコン
使用カスタム位置（左上ではなく、右で設定）

「私はすでに、画鋲のアイコン（link）
をカスタマイズしてきました。しかし、私はドンズームボタンをカスタマイズする方法を知っています。

2017-07-21 Pedro Perez

ズームボタンをカスタマイズするには、デフォルトのボタンを非表示にしてカスタムボタンを個別に作成する必要があります。次に例を示します。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script type='text/javascript'> 
    var map; 

    function GetMap() 
    { 
     map = new Microsoft.Maps.Map('#myMap', { 
      credentials: 'YourBingMapsKey', 
      showZoomButtons: false //Hide the default zoom buttons and create custom ones. 
     }); 

     document.getElementById('zoomIn').onclick = function() { 
      var z = map.getZoom() + 1; 
      map.setView({ zoom: z }); 
     } 

     document.getElementById('zoomOut').onclick = function() { 
      var z = map.getZoom() - 1; 
      map.setView({ zoom: z }); 
     } 

     updateZoomButtons(); 
    } 

    function updateZoomButtons() { 
     switch (map.getMapTypeId()) { 
      case Microsoft.Maps.MapTypeId.birdseye: 
      case Microsoft.Maps.MapTypeId.aerial: 
      case Microsoft.Maps.MapTypeId.canvasDark: 
       document.getElementById('zoomOut').className = 'darkZoom'; 
       document.getElementById('zoomIn').className = 'darkZoom'; 
       break; 
      default: 
       document.getElementById('zoomOut').className = 'lightZoom'; 
       document.getElementById('zoomIn').className = 'lightZoom'; 
       break; 
     } 
    } 
    </script> 
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap&branch=experimental' async defer></script> 

    <style> 
     .mapContainer, #myMap{ 
      position:relative; 
      width:800px; 
      height:600px; 
     } 

     #zoomOut, #zoomIn { 
      text-align: center; 
      font-size: 25px; 
      position: absolute; 
      right: 33px; 
      font-weight: bold; 
      width: 30px; 
      height: 30px; 
      border-radius: 16px; 
      -moz-user-select: -moz-none; 
      -webkit-user-select: none; 
      -ms-user-select: none; 
      user-select: none; 
     } 

     #zoomOut { 
      line-height: 24px; 
      top: 220px; 
     } 

     #zoomIn { 
      top:160px; 
      line-height:30px; 
     } 

     .darkZoom{ 
      background-color: #333333; 
      border: 1px solid #fff; 
      color:white; 
     } 

     .darkZoom:hover{ 
      background-color: #808080; 
     } 

     .lightZoom{ 
      background-color: white; 
      border: 1px solid #000; 
      color: black; 
     } 

     .lightZoom:hover{ 
      background-color: #CCCCCC; 
     } 
    </style> 
</head> 
<body> 
    <div class="mapContainer"> 
     <div id="myMap"></div> 
     <span id="zoomOut">‒</span> 
     <span id="zoomIn">+</span> 
    </div> 
</body> 
</html>

出典

2017-07-21 20:36:49 rbrundritt

ありがとうございます。 zoomInとzoomOutは正常に機能します。しかし、カスタムズーム（イン/アウト）を使用すると、アニメーションはありません。ズーム= xからズーム= x + 1（またはx-1）への変化は非常に急です。あなたはこれを解決する方法を知っていますか？ありがとう。 –

Bing mapsバージョン8.カスタマイズボタン

答えて

関連する問題