本文共 844 字，大约阅读时间需要 2 分钟。

Openlayers地图中，鼠标移动时的位置经纬度坐标会在页面中显示。在我们的实战课程中，我们会详细讲解实现这一功能的方法，帮助大家成为Openlayers应用的主力。

效果图

效果图展示了鼠标在Openlayers地图上移动时，实时显示经纬度坐标的功能。

实现方法

在Openlayers项目中，实现鼠标移动时显示经纬度坐标的功能，主要包括以下几个步骤：

代码实现

以下是实现这一功能的核心代码示例：

// 初始化地图map = new ol.Map({  target: 'map-container',  layers: [    new ol.layer.Tile({      source: new ol.source.OSM()    })  ],  view: new ol.View({    center: ol.proj.fromLonLat([0, 0])  })});// 启用鼠标跟踪map.on('mousemove', function(evt) {  const coords = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');  document.getElementById('coord-output').innerHTML =     `经度: ${coords[1].toFixed(4)}
纬度: ${coords[0].toFixed(4)}`;});

实战课程内容

在我们的Openlayers实战课程中，会详细讲解如何实现鼠标移动时显示经纬度坐标的功能。通过步骤化的教学和实操练习，帮助开发者快速掌握Openlayers的核心功能，提升项目开发能力。

通过本次课程，大家将能够熟练运用Openlayers在地图中实现鼠标位置信息显示等功能，成为Openlayers开发的实力派！