OpenLayers 3 - 在地图外添加比例线答案

【问题标题】：OpenLayers 3 - Add scale line out of mapOpenLayers 3 - 在地图外添加比例线
【发布时间】：2016-04-06 19:25:28
【问题描述】：

如何在地图区域外添加比例线？
我的 HTML：

<div id="map"></div>
<div id="scaleline"></div>

和添加比例线的javascript代码：

var scale = new ol.control.ScaleLine({
    target: document.getElementById("scaleline")
});
map.addControl(scale);

这听起来是一个 CSS 问题，但是我如何为 div "scaleline" 配置 css 呢？

【问题讨论】：

标签： css openlayers-3

【解决方案1】：

应该可以。在此fiddle 中查看实际操作

var scaleLineControl = new ol.control.ScaleLine({
  target: document.getElementById('scaleline')   
});

var map = new ol.Map({
  controls: ol.control.defaults().extend([scaleLineControl])
})

【讨论】：

谢谢。现在它起作用了。但还有一个问题。为什么它放在页面的末尾？我的意思是 'scaleline' div 就在 'map' div 之后，但 scaleline 出现在页面的末尾（在你的小提琴中，在
它是由position: absolute; bottom: 8px 中的Openlayers CSS 设计的（对于.ol-scale-line）。如果需要，您可以覆盖它
你能帮我做吗？我玩过各种 css 属性，但我仍然无法将比例线从地图内部移动到地图之后。我还使用了 ScaleLine 控件的 className 属性，但没有帮助。我的地图宽度是 100%。
.ol-scale-line { position: relative; }