如何将 Bing 地图菜单移动到屏幕右侧答案

【问题标题】：How to Move Bing Maps Menu to the Right side of Screen如何将 Bing 地图菜单移动到屏幕右侧
【发布时间】：2016-03-22 13:29:36
【问题描述】：

我正在使用 Bing Maps API，它在屏幕的左上方添加了一个菜单栏：

我想反映现在的情况，并在右侧设置栏，指南针最右侧，然后是缩放，然后是鸟瞰菜单。当前的 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;
}

这导致：

我要怎么做才能得到原版的镜像？

【问题讨论】：

标签： html css bing bing-maps

【解决方案1】：

从技术上讲，修改 Bing 地图控件的 CSS 是一种未记录/不受支持的 hack，如果更新 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;
}

【讨论】：