Question

我可以通过初始设置将组件添加到地图中，如下所示：

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地图了，所以我的解决方案有点陈旧，我可能会因为我不记得很清楚错误的课程删除，但我的想法是使用CSS的{ {1}}类及其父级。

Answer 1

如果您查看地图生成的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，并按编程方式切换地图类型here

改变组件的位置

1 个答案: