Question

我使用的是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;
}

这导致：

我需要做些什么才能获得原始镜像？

Answer 1

从技术上讲，修改Bing Maps控件的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;
}

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

1 个答案: