OpenLayers之popup弹出框

代码说明：

1. html文件中添加map的div和弹框的div

2. js文件中，

   1. 创建一个覆盖来锚定弹出到地图。
   2. 创建地图，
   3. 向地图添加一个单击处理程序以呈现弹出窗口
   4. 添加一个单击处理程序来隐藏弹出窗口

html文件

js文件

function f() {
    //北京地理坐标
    var beijing = ol.proj.fromLonLat([116.28, 39.54]);
    /**
     * 组成弹出窗口的元素。
     */
    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
        }
    });


    /**
     * 添加一个单击处理程序来隐藏弹出窗口。
     * @return {boolean} 不要跟随href
     */
    closer.onclick = function () {
        overlay.setPosition(undefined);
        closer.blur();
        return false;
    };


    /**
     * Create the map.
     */
    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        overlays: [overlay],
        target: 'map',
        view: new ol.View({
            center: beijing,
            zoom: 2
        })
    });


    /**
     * 向地图添加一个单击处理程序以呈现弹出窗口。
     */
    map.on('singleclick', clickEvent);

    function clickEvent(evt) {
        var coordinate = evt.coordinate;
        var hdms = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate));

        content.innerHTML = '
You clicked here:
' + hdms + '';
        overlay.setPosition(coordinate);
    }
}