Question

我正试图在地图上打开带有标记的弹出窗口，从给出了经度和纬度的列表中获取标记点，并在地图中正确绘制它们。

在https://openlayers.org/en/latest/examples/popup.html之后，我添加了用于打开弹出窗口的代码，这是我的代码：

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));
});

现在，我陷入了无法解释的行为；每当我单击时，无论地图的缩放级别如何，都会在东南方向的一个屏幕上显示弹出窗口。

clickedPosition的坐标（我在控制台中看到它们）是单击的正确坐标，但是弹出窗口显示在错误的点上，其偏移始终以像素为单位。

我想念什么？

Answer 1

您可以参考overlay positioning来显示任何世界中的功能。

follow the link

openlayers5：点击事件位置未在地图上正确设置

1 个答案: