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

Question

我正在使用 Bing 地图 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;
}

结果是：

我需要做什么才能得到原件的镜像？

Answer 1

从技术上讲，修改 Bing 地图控件的 CSS 是一个 undocumented/unsupported 黑客攻击，如果更新 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;
}

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

How to Move Bing Maps Menu to the Right side of Screen

html

css

bing

bing-maps