openlayers5: click event position not properly set on map

Question

I'm trying to open a popup in a map with markers, getting the markers points from a list where latitude and longitude are given, and they are plotted correctly in the map.

Following https://openlayers.org/en/latest/examples/popup.html I added the code for opening popup, and this is my code:

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

var overlay = new ol.Overlay({
    element: container,
    autoPan: true,
    autoPanAnimation: {
        duration: 250
    }
});

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

// create the map with the proper center
var map = new ol.Map({
        controls: ol.control.defaults().extend(
            [new ol.control.ScaleLine()]
        ),
        view: new ol.View({
                center: ol.proj.fromLonLat([center.long, center.lat]),
                zoom: zoom
            }),
        overlays: [overlay],
        layers: [new ol.layer.Tile(
                    {source: new ol.source.OSM()}
                )
        ],
        target: 'mapdiv',
        keyboardEventTarget: document
    }
);

// the style for the markers
var markerStyle = new ol.style.Style({
                image: new ol.style.Icon(/** @type {module:ol/style/Icon~Options} */ ({
                    anchor: [0.5, 1],
                    anchorXUnits: 'fraction',
                    anchorYUnits: 'fraction',
                    scale: 0.4,
                    src: 'img/ic_place_void_black_24dp_2x.png'
                }))
            });

for (i = 0; i < pointList.length; ++i) {
    // add the marker
    markersList[i] = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([pointList[i].long, pointList[i].lat])),
        namesList: pointList[i].mediaNameList
    });
    // apply the style to the marker
    markersList[i].setStyle(markerStyle);
}

// generate the markers vector
var markers = new ol.source.Vector({
        features: markersList
});

// generate the markers layer
var markerVectorLayer = new ol.layer.Vector({
        source: markers,
});

// add the markers layer to the map
map.addLayer(markerVectorLayer);

/**
 * Add a click handler to the map to render the popup.
 */
map.on('singleclick', function(evt) {
    var clickedPosition = ol.proj.toLonLat(evt.coordinate);
    console.log(clickedPosition);;
    overlay.setPosition(ol.proj.fromLonLat(clickedPosition));
});

Now I'm stuck with a unexplicable behaviour; whenever I click, the popup is shown about one screen south-east, whatever zoom level of the map.

The coordinates of clickedPosition (I'm seeing them in the console) are the correct coordinates where I clicked, but the popup is shown in a wrong point, with a shift which is always the same in pixels.

What am I missing?

Answer 1

您可以参考叠加位置来显示任何世界中的要素。

follow the link