openlayers pop弹出框

效果

代码

//页面
 <div id="mapCon"></div>
    <div id="mouse-position"></div>
    <div id="popup" class="ol-popup">
<!--        <a href="#" id="popup-closer" class="ol-popup-closer"></a>-->
        <div id="popup-content">

        </div>
    </div>



var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var popup;
popup = new ol.Overlay({
    //要转换成overlay的HTML元素
    element: container,
    //当前窗口可见
    autoPan: true,
    //Popup放置的位置
    positioning: 'bottom-center',
    //是否应该停止事件传播到地图窗口
    stopEvent: false,
    autoPanAnimation: {
        //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
        duration: 250
    }
});
map.addOverlay(popup);
popup.setPosition(e.coordinate);//配合鼠标悬停事件或者点击事件