单击地图后不显示坐标值

如何解决单击地图后不显示坐标值

我正在尝试使用 Open Layers 创建一个弹出窗口，当我单击地图时，它将显示坐标值。但是，控制台窗口中没有错误，每当我单击“地图”时，它都会显示：“您单击了此处 [对象对象]”，而不是我单击的位置的实际坐标。附上我正在使用的代码。

PS：我对 JS 很陌生，所以很可能我可能会遗漏一些非常明显的东西，所以如果有人能指出我正确的方向，这将是很大的帮助。

var view = new ol.View({
    center : [84.2294050294863,21.330813185563247],zoom :5,projection : 'epsg:4326'
}) 

const container = document.getElementById('popup');
const content = document.getElementById('popup-content');
const closer = document.getElementById('popup-closer');

closer.onclick = function () {
  overlay.setPosition(undefined);
  closer.blur();
  return false;
};


var basemap = new ol.layer.Tile({
    source: new ol.source.OSM()
})

var layerArray = [basemap]

const overlay = new ol.Overlay({
  element: container,autopan: true,autopanAnimation: {
    duration: 250,},});

var map = new ol.Map({
    target : 'map',layers : layerArray,view : view,overlays : [overlay]
});
 
map.on('singleclick',function (event) {
    
  const coordinate = event.coordinate;
  const hdms = new ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate));

  content.innerHTML = '<p>You clicked here:</p><code>' + hdms + '</code>';
  overlay.setPosition(coordinate);
});