如何將Bing地圖菜單畫面

我使用Bing地圖API，它增加了一個菜單欄在屏幕的左上方的右側：如何將Bing地圖菜單畫面

我想反映如何現在右邊有一個酒吧，最右邊的羅盤，下一個放大鏡，以及下一個鳥眼菜單。當前的HTML是：

<div class="MicrosoftNav MapTypeId_be"> 
    <div class="OverlaysTL"> 
     <div class="NavBar_compassControlContainer"> 
      <a class="NavBar_button NavBar_toolButton NavBar_rotateLeft" href="#" title="Rotate left" uici="NB.CS.RotateLeft" style="visibility: hidden;"> 
      </a> 
      <a href="#" title="Click to pan in any direction" uici="NB.CS.PanControl" class="NavBar_compass NavBar_compassFlat">N</a> 
      <a class="NavBar_button NavBar_toolButton NavBar_rotateRight" href="#" title="Rotate right" uici="NB.CS.RotateRight" style="visibility: hidden;"></a> 
     </div> 
     <div class="NavBar_zoomControlContainer"> 
      <div class="NavBar_zoomDrop" style="position: absolute; display: none;"> 
       <div class="NavBar_zoom"> 
        <div class="NavBar_zoomBar" style="position: absolute; overflow: hidden;"> 
         <div class="NavBar_zoomBarBg"></div> 
         <div class="NavBar_zoomSlider" title="Move slider to zoom in or out" style="top: 97px;"></div> 
        </div> 
       </div> 
      </div> 
      <a class="NavBar_button NavBar_toolButton NavBar_zoomOut" href="#" title="Zoom out" uici="NB.ZC.ZoomOut"></a> 
      <a class="NavBar_button NavBar_toolButton NavBar_zoomIn" href="#" title="Zoom in" uici="NB.ZC.ZoomIn"></a> 
     </div> 
     <div class="NavBar_modeSelectorControlContainer"> 
      <span class="NavBar_separator"></span> 
      <span class="NavBar_button NavBar_typeButton"> 
       <a class="NavBar_typeButtonLabel NavBar_MapType_be" href="#">Bird's eye</a> 
       <span class="separator"></span> 
       <a class="NavBar_dropIconContainer" href="#"> 
        <span class="NavBar_dropIcon"></span> 
       </a> 
      </span> 
     </div> 
     <span style="display: block; height: 0px; width: 0px; line-height: 0; font-size: 0px; clear: both;"></span> 
    </div> 
    <span style="display: block; height: 0px; width: 0px; line-height: 0; font-size: 0px; clear: both;"></span> 
</div>

因此我嘗試了以下CSS：

#map-canvas > div > div.MicrosoftNav.MapTypeId_be > div{ 
    right: 0; 
    position: absolute; 
}

這導致：

那麼我有什麼做的就是的鏡子原版的？

來源

2016-03-22 Sara Tibbetts

從技術上講，修改Bing地圖控件的CSS是一種未經證實的/不受支持的破解，如果V7更新，破解可能會中斷。所以通常這不被推薦。推薦的方法是隱藏默認導航欄並創建自定義控件並將其懸浮在地圖上。

請注意，導航欄會根據顯示的內容（即鳥眼，麪包屑）向右擴展到正確的位置。如果你不關心那個，那麼你可以使用下面的CSS，它將適用於除麪包屑之外的所有東西：

.MicrosoftMap .OverlaysTL { 
    top: auto; 
    right: 348px; 
} 

.NavBar_compassControlContainer { 
    left: 240px; 
} 

.NavBar_zoomControlContainer { 
    left: 190px; 
} 

.NavBar_modeSelectorControlContainer { 
    left: 0px; 
} 

.MicrosoftNav .NavBar_separator { 
    position: absolute; 
    left: 180px; 
}

來源

2016-03-24 07:01:35 rbrundritt

如何將Bing地圖菜單畫面

回答

相關問題