弹出式

Question

我正在尝试显示带有标记的地图。我想要能够点击这些标记，以便可以显示额外的信息（类似于它在谷歌地球中的工作方式）。我有地图和标记（或功能）但无法获得带有额外信息的“弹出窗口”。

JS：

function init(){
    var northSeaLonLat = [4.25, 52.05];
    var centerWebMercator = ol.proj.fromLonLat(northSeaLonLat);

    var tileLayer = new ol.layer.Tile({ source: new ol.source.OSM() });
    markerLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [], projection: 'EPSG:3857' }) });


    var map = new ol.Map({
        controls: ol.control.defaults().extend([
            new ol.control.MousePosition({
                coordinateFormat: ol.coordinate.createStringXY(3),
                projection: 'EPSG:4326',
                undefinedHTML: ' ',
                className: 'custom-mouse-position',
                target: document.getElementById('custom-mouse-position'),
            })
        ]),
        layers: [tileLayer, markerLayer],
        target: 'map',
        view: new ol.View({
            projection: 'EPSG:3857',
            center: centerWebMercator,
            zoom: 7
        })
    });

    // Add marker
    var circle = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 4,
            fill: new ol.style.Fill({
                color: 'rgba(200,0,0,0.9)',
            }),
            stroke: new ol.style.Stroke({
                color: 'rgba(100,0,0,0.9)',
                width: 2
            })
        })
    });

    coordinates = [[4.25, 52.05], [4.21, 52.01], [4.29, 52.29], [5.25, 52.05], [4.25, 51.05]];
    for (i = 0; i < coordinates.length; i++) { 
        var feature = new ol.Feature(
            new ol.geom.Point(ol.proj.transform(coordinates[i], 'EPSG:4326', 'EPSG:3857'))
        );
        feature.description = 'Coordinates: '+coordinates[i][0]+','+coordinates[i][1]+'\nBla';
        feature.setStyle(circle);
        markerLayer.getSource().addFeature(feature);
    }

    var element = document.getElementById('popup');
    var popup = new ol.Overlay({
      element: element,
      positioning: 'bottom-center',
      stopEvent: false
    });
    map.addOverlay(popup);

    // display popup on click
    map.on('click', function(evt) {
        var feature = map.forEachFeatureAtPixel(evt.pixel,
            function(feature, layer) {
                return feature;
            });
        if (feature) {
            popup.setPosition(evt.coordinate);
            $(element).popover({
                'placement': 'top',
                'html': true,
                'content': feature.get('description')
            });
            $(element).popover('show');
        } else {
            $(element).popover('destroy');
        }
    });
}

我从网站上的示例中获得的代码：http://openlayers.org/en/v3.11.1/examples/icon.html

它在那里工作，但我不能让我的版本工作。知道为什么吗？

Answer 1

popover不属于OpenLayers，但包含在Bootstrap中：http://getbootstrap.com/javascript/#popovers

另请参阅覆盖图上的OpenLayers示例：https://openlayers.org/en/latest/examples/overlay.html