<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>弹出框</title>

    <link rel="stylesheet" href="css/ol.css">

    <script src="js/jquery-1.11.3.js"></script>

    <script src="js/ol.js"></script>

    <style>

        .map {

            height: 100%;

            width: 100%;

        }

        .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));

            padding: 15px;

            border-radius: 10px;

            border: 1px solid #cccccc;

            bottom: 12px;

            left: -50px;

        }

        .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>

<h2>My Map</h2>

<div id="map" class="map">

    <div id="popup" class="ol-popup">

        <a href="#" id="popup-closer" class="ol-popup-closer"></a>

        <div id="popup-content" style="width:300px; height:120px;"></div>

    </div>

</div>

<script type="text/javascript">

    var map = new ol.Map({

        target: 'map',

        layers: [

            new ol.layer.Tile({

                source: new ol.source.OSM()

            })

        ],

        view: new ol.View({

            center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),

            zoom: 4

        })

    });

    var container = document.getElementById('popup');

    var content = document.getElementById('popup-content');

    var closer = document.getElementById('popup-closer');

    closer.onclick = function() {

        overlay.setPosition(undefined);

        closer.blur();

        return false;

    };

    var overlay = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({

        element: container,

        autoPan: true,

        autoPanAnimation: {

            duration: 250   //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.

        }

    }));

    map.addEventListener('click', function(evt) {

        var coordinate = evt.coordinate;

        var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(coordinate, 'EPSG:3857', 'EPSG:4326'));

        content.innerHTML = '<p>你点击的坐标是：</p><code>' + hdms + '</code>';

        overlay.setPosition(coordinate);

        map.addOverlay(overlay);

    });

</script>

</body>

</html>

Openlayer 3 最简单的弹出框的更多相关文章

  1. 代码录播：jQueryMobile 实现一个简单的弹出框效果

    今天给大家带来的是 jQueryMobile 实现一个简单的弹出框效果,有兴趣的童鞋可以试试哦~ ^_^ 阅读原文:www.gbtags.com  

  2. JavaScript 实现简单的 弹出框关闭框

    JavaScript 实现简单的 弹出框关闭框 知识点: 1.javaScript 添加HTML标签 2.javaScript 添加HTML标签属性 3.javaScript 追加元素 代码献上: & ...

  3. jquery实现简单的弹出框

    弹出框本身是一个div,默认是隐藏不展示的,在需要弹框的时候使其显示,并浮在当前页面之上 弹框样式: .tanchuang { width: 100%; height: 100%; display: ...

  4. js简单的弹出框有关闭按钮

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Openlayer 3 的点击弹出框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. QMessageBox 弹出框上的按钮设置为中文

    Qt 默认的弹出框上的按钮式英文,虽然也知道是什么意思,但终究不如中文看着顺眼. QMessageBox box(QMessageBox::Warning,"标题","弹 ...

  7. vue--vant组件库Dialog弹出框

    安装vant UI框架: cnpm install vant –-save-dev 导入组件-在main.js里: import Vant from 'vant'; import'vant/lib/v ...

  8. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  9. css超简单实现div页面居中【适合做弹出框】

    1.前言 现在项目中用到弹出框的话大部分都是直接用控件的.不过有控件虽方便,但有时候会有冲突的地方.我上次用layui的弹出框控件,然后也用到了百度的编辑器uEditor,然后一切都好好的,结果编辑赋 ...

随机推荐

  1. mini2440裸机之I2C

    // File Name : IIC.c // Function  : S3C2440 IIC-bus Master Tx/Rx mode Test Program //             (I ...

  2. HNCU1324:算法2-2：有序线性表的有序合并(线性表)

    http://hncu.acmclub.com/index.php?app=problem_title&id=111&problem_id=1324 题目描述 已知线性表 LA 和 L ...

  3. x86中的页表结构和页表项格式

    一.页表结构 分页转换功能由驻留在内存中的表来描述,该表称为页表(page table),存放在物理地址空间中.页表可看做简单的220个物理地址数组.线性到物理地址的映射功能可以简单地看做进行数组查找 ...

  4. 使用 EasyUI 创建左侧导航菜单

    使用 JQuery EasyUI 创建左侧导航菜单,菜单的数据由后台服务提供. 效果图 HTML 元素 <div id="menuAccordion"></div ...

  5. 使用 IDEA 创建 Maven Web 项目 （一）- 使用IEAD创建Maven项目

    创建IDEA项目 单击 Create New Project 按钮,弹出 New Project 对话框. 选择 Maven 选项,单击 Next 按钮. 输入 GroupId.ArtifactId. ...

  6. VS2015下的Android开发系列02——用VS开发第一个Android APP

    配置Android模拟器 这算是第一篇漏下说的,配置好VS的各参数,新建Android项目后,会发现菜单下的工具栏会多出Android相关的工具栏,红色圈出的就是AVD. 打开AVD后可以从模版处选一 ...

  7. 最详细win7下手动搭建PHP环境：apache2.4.23+php7.0.11

    ♣资源下载(apache24,php7,phpStorm9) ♣修改apache24配置文件 ♣安装和启动Apache服务 ♣修改php7.0.11配置文件 配置前说明:电脑需要有vc运行库环境,否则 ...

  8. OpenGL的状态机理解

    OpenGL是一种状态机模式,比如你用glEnable打开一个状态,在以后的绘图中将一直保留并应用这个状态,除非你调用glDisable及同类函数来改变该状态或程序退出.例如当前颜色是一个状态变量,可 ...

  9. 不要错过 DevOps 之父出席的2017 DevOpsDays 北京站！

    通过 DevOpsDays 活动,Patrick 将 DevOps 这项伟大的运动带到了地球的东方,带到了北京.同时,他将亲自参加2017年3月18日的 DevOpsDays 北京站,并作精彩演讲. ...

  10. C#动态创建两个按钮，btn2复制btn1的Click事件，匿名委托

    现在有一个按钮btn1,要动态创建出一个btn2,需要btn2点击时调用btn1的点击. 在delphi中这种操作很简单:btn2.onClick:=btn1.onClick,因为onClick就是个 ...