javascript - 更改组件的位置

Question

我可以通过以下初始设置将组件添加到 map :

map = new nokia.maps.map.Display(
    document.getElementById( "map-canvas" ), {
        // Zoom level for the map
        zoomLevel: 6,
        // Map center coordinates
        center: [ 0, 0 ], // not real values
        components: [
             // ZoomBar provides an UI to zoom the map in & out
             new nokia.maps.map.component.ZoomBar(), 
             // We add the behavior component to allow panning / zooming of the map
             new nokia.maps.map.component.Behavior(),
             new nokia.maps.map.component.Traffic()
        ]
    }
);

但是，它添加了 Traffic组件位于页面的左上角，我有一个固定的顶部栏，所以我看不到该组件。

我想更改该组件的位置，比如说右下角。我在文档和互联网中都找不到任何相关内容(或者也许我遗漏了一些要点)。

API 是否有类似的功能，还是我必须使用 CSS 来更改？

编辑:我的解决方案:

尽管我对其他类型的解决方案很好奇，但我最终还是选择了 CSS。

$( ".nm_MapSettingsWrap" )
      .removeClass( "nm_right" )
      .css( "position", "absolute" )
      .css( "bottom", "20px" )
      .css( "right", "5px" )
   .parent()
   .css( "bottom", "-7px" )
   .removeClass( "nm_top" );

我不再使用 HERE map ，所以我的解决方案有点旧，我可能会在类删除方面犯错误，因为我不太记得了，但想法是使用 nm_MapSettingsWrap 的 CSS类及其父类。

Answer 1

如果您查看 map 生成的 DOM，您会发现以下元素:

<div class="ovi_mp_mapScheme_normal ovi_mp_hover" style="z-index: 0;"><div class="ovi_mp_controls" style="z-index: 0; font-size: 1em;">
...
   <div class="nm_arrangeableAnchor nm_right">
...
      <ul class="nm_mapSettingsWrap nm_left nm_layout_horizontal" aria-role="menubar" aria-expanded="false">
...
        <li class="nm_trafficIncidents nm_wrap" aria-hidden="true" aria-role="menuitemradio">
            ... etc.
        </li>
        <li class="nm_traffic nm_wrap" aria-hidden="false" aria-role="menuitemradio" title="Traffic conditions" tabindex="0" aria-disabled="false" aria-pressed="false" style="position: relative; overflow: hidden;">
                    ... etc
      </li>

您应该能够使用 jQuery 之类的工具来获取节点并将 CSS 类从 nm_left 更改为 nm_right 并将 nm_middle 更改为 nm_top 等。可以通过向这些元素添加自定义样式来进行进一步的调整。

或者自己添加一个自定义按钮组件，并使用 CSS 将其样式设置到您想要的位置，如本问题 here 所示。并按照描述以编程方式切换 map 类型 here