css - 如何在openlayers 3的固定屏幕位置上显示文本

我使用以下代码在鼠标在地图上移动时显示坐标。
绑定事件

...
map.on('pointermove', getCoordinates);
....

和显示坐标

function getCoordinates(evt) {
  var out = ol.coordinate.toStringHDMS(evt.coordinate);
  $('#coordinates').text(out);
}

结果就像



我想做的是在地图上，最好在地图的左下角，移动div，在坐标上显示坐标。

最佳答案

有几种方法可以做您想要的。最简单的方法是在ol3中获取overlay容器，然后在其中添加div。

$('#coordinates').appendTo(
  $('.ol-overlaycontainer')
);

并使用CSS控制div的位置（绝对位置，左侧和底部）。

#coordinates {
  position: absolute;
  bottom: .5em;
  left: .5em;
}

实时观看：https://jsfiddle.net/b3k6buw8/5/

另一种方法是使用它创建一个自定义控件并使用map.addControl()，该控件基本上将其添加到同一叠加层容器div中，您也可以使用CSS来控制其位置。

仅供参考，OL3中已经有一个MousePosition控件。也许它会让您感兴趣。 http://openlayers.org/en/v3.14.2/examples/mouse-position.html