OpenLayers 3 添加返回 null 的信息弹出元素

Question

我试图在单击矢量图层功能时弹出一个。

这与地图在同一个 .cshtml 页面上...

<div id="popup" title="Welcome to ol3">
        &nbsp;
    </div>

然后在我加载地图的单独 .js 文件中创建弹出窗口，添加它...

var popup = new ol.Overlay({
        element: document.getElementById('popup')
    });
    map.addOverlay(popup);

然后在 map.on('click')...

var element = popup.getElement();
        var coordinate = evt.coordinate;
        $(element).popover('destroy');
        popup.setPosition(coordinate);
        // the keys are quoted to prevent renaming in ADVANCED mode.
        $(element).popover({
            'placement': 'top',
            'animation': false,
            'html': true,
            'content': '<p>Something happened...good for you</code>'
        });
        $(element).popover('show');

但是 document.getElementById("popup") 正在返回 "null"

非常感谢任何帮助！！

Answer 1

感谢@Neelesh 的回复，这似乎是 OL3 代码更改和运行变成过时示例的情况，这种情况经常发生，因为库变化很大。使用您在 fiddle 中提供的示例，我更改了...

var element = popup.getElement();
    var coordinate = evt.coordinate;
    angular.element(element).popover('destroy');
    popup.setPosition(coordinate);
    // the keys are quoted to prevent renaming in ADVANCED mode.
    $(element).popover({
        'placement': 'top',
        'animation': false,
        'html': true,
        'content': '<p>Something happened...good for you</code>'
    });
    $(element).popover('show');

至...

 var coordinate = evt.coordinate;
        document.getElementById('popup-content').innerHTML = '<p>It is working</p>';
        popup.setPosition(coordinate);

...这可以显示弹出窗口，现在我只需要弄清楚如何确定我单击了哪个矢量图层特征:)

OpenLayers 3 添加返回 null 的信息弹出元素

OpenLayers 3 add info popup element returning null

jquery

angularjs

openlayers-3