如何在OpenLayers中移动Marker时实时显示其坐标

我需要实现：在OpenLayers中拖动marker1的过程中，将它的坐标实时显示在id为map-msg的元素中。以下是我的相关代码：

var coord1 = [-9807673.76, 3899420.81];

var marker1 = new ol.geom.Point(coord1);
var featureMarker1 = new ol.Feature(marker1);

var vector = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [featureMarker1]
  }),
  
});

var map = new ol.Map({
  target: 'map',
  layers: [new ol.layer.Tile({
    source: new ol.source.OSM()
  }), vector],
  view: new ol.View({
    center: coord1,
    zoom: 5
  })
});

var translate1 = new ol.interaction.Translate({
  features: new ol.Collection([featureMarker1])
});
map.addInteraction(translate1);

目前我有一个能正常显示鼠标指针坐标的函数，但想要改为显示marker1的坐标：

map.on('pointermove', function(e) {
  var coords = ol.proj.toLonLat(e.coordinate);
  var lat = coords[1];
  var lon = coords[0];
  var locTxt = "纬度: " + lat + " 经度: " + lon;
  // map-msg是地图下方用于显示的div
  document.getElementById('map-msg').innerHTML = locTxt;
});

解决方案 #

不需要监听鼠标移动事件，而是监听Translate交互的拖动事件或者Feature的几何变化事件，这样只有在拖动marker1时才更新坐标，更精准。

方法1：监听Translate的translate事件（推荐，拖动过程实时更新） #

这个事件在拖动Marker的过程中会持续触发，适合实时显示坐标：

translate1.on('translate', function(e) {
  // 获取被拖动的Feature
  var targetFeature = e.features.item(0);
  // 获取当前的Web墨卡托坐标
  var mercatorCoord = targetFeature.getGeometry().getCoordinates();
  // 转换为经纬度坐标
  var lonLat = ol.proj.toLonLat(mercatorCoord);
  // 保留6位小数优化显示
  var longitude = lonLat[0].toFixed(6);
  var latitude = lonLat[1].toFixed(6);
  // 更新显示文本
  var displayTxt = `纬度: ${latitude} 经度: ${longitude}`;
  document.getElementById('map-msg').innerHTML = displayTxt;
});

方法2：监听Feature的change事件 #

当Marker的位置被修改时，Feature会触发change事件，也可以用来更新坐标：

featureMarker1.on('change', function() {
  // 获取当前坐标并转换为经纬度
  var mercatorCoord = this.getGeometry().getCoordinates();
  var lonLat = ol.proj.toLonLat(mercatorCoord);
  var longitude = lonLat[0].toFixed(6);
  var latitude = lonLat[1].toFixed(6);
  // 更新显示
  var displayTxt = `纬度: ${latitude} 经度: ${longitude}`;
  document.getElementById('map-msg').innerHTML = displayTxt;
});

说明 #

• 移除原来的pointermove监听，避免不必要的事件触发
• 两种方法都能实现需求，方法1更贴合拖动交互的场景，实时性更好；方法2则能捕获所有修改Feature位置的操作（不止拖动）

内容的提问来源于stack exchange，提问作者1msmith1