代码说明：

html文件中添加map的div和弹框的div
js文件中，
1. 创建一个覆盖来锚定弹出到地图。
2. 创建地图，
3. 向地图添加一个单击处理程序以呈现弹出窗口
4. 添加一个单击处理程序来隐藏弹出窗口

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>popup弹出框</title>
    <link href="./css/ol.css" rel="stylesheet" type="text/css"/>
    <link href="./css/style.css" rel="stylesheet" type="text/css"/>
    <script src="./js/ol.js" type="text/javascript"></script>
    <script src="./externalJS/index.js" type="text/javascript"></script>
    <script src="./libs/jquery.min.js" type="text/javascript"></script>

    <style>
        .map {
            width: 100%;
            height:90%;
        }
        .ol-popup {
            position: absolute;
            background-color: white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
            /*filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));*/
            filter: drop-shadow(0 1px 4px   #FFC125);
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;

            bottom: 12px;
            left: -50px;
            min-width: 280px;
        }
        .ol-popup:after, .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }
        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }
        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }
        .ol-popup-closer:after {
            content: "✖";
        }
    </style>
</head>
<body>
<div id="map" class="map"></div>
<div id="popup" class="ol-popup">
    <a href="#" id="popup-closer" class="ol-popup-closer"></a>
    <div id="popup-content"></div>
</div>

<script>
    f()
</script>
</body>
</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 = '<p >You clicked here:</p><code class="popup_code">' + hdms + '</code>';
        overlay.setPosition(coordinate);
    }
}