0

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

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(我在控制台中看到它们)的坐标是我单击的正确坐标,但弹出窗口显示在错误的点,偏移始终以像素为单位。

我错过了什么?

4

1 回答 1

0

您可以参考叠加定位 来显示任何世界中的特征。

follow the link
于 2019-02-01T07:15:09.200 回答