HTML鼠标移动之后浮现地图,OpenLayers3实现鼠标移动显示坐标

本文实例为大家分享了OpenLayers3实现鼠标移动显示坐标的具体代码，供大家参考，具体内容如下

1. 前言

鼠标移动显示坐标，OpenLayers 3 框架提供了鼠标移动显示坐标的控件(ol.control.MousePosition),默认显示在地图的右上角，其样式可以自定义。在这个例子中，我们通过前面的加载 OSM 加载瓦片图层，实现在地图容器的左下角显示坐标点的信息。

2. 实现思路

(1)新建一个网页，参考前面的加载 OSM 瓦片地图，实现加载瓦片地图。

(2)在地图容器中新建一个 div 用于显示坐标信息，并设置其样式，通过设置 z-index 让其显示到地图上面。

(3)实例化一个鼠标位置控件(ol.control.MousePosition)，可以根基实际的需求设置其，参数，例如坐标系(projection)、坐标值的显示格式(coordinateFormat)、关联显示鼠标位置坐标点的目标容器(target)等。

(4)在地图容器中加载到地图容器中。可以在实例化地图容器 Map 的代码中，通过设置 controlas 参数加载鼠标位置控件，也可以调用 map 对象的 addControl 方法加载控件。

3. 实现代码如下：

html：

鼠标移动显示坐标信息

#map {

width: 100%;

height: 100%;

position: absolute;

}

#mouse-position {

float: left;

position: absolute;

bottom: 5px;</