Openlayer 3 最简单的弹出框
<!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>
转载于:https://www.cnblogs.com/mina-huojian66/p/6145374.html
Openlayer 3 最简单的弹出框相关推荐
- android 弹窗有边框_Android 多种简单的弹出框样式设置代码
简介 这是一个基于AlertDialog和Dialog这两个类封装的多种弹出框样式,其中提供各种简单样式的弹出框使用说明.同时也可自定义弹出框. 特性 1.使用链式开发代码简洁明了 2.所有的弹出框样 ...
- android开发自动提示框,Android 多种简单的弹出框样式设置代码
简介 这是一个基于AlertDialog和Dialog这两个类封装的多种弹出框样式,其中提供各种简单样式的弹出框使用说明.同时也可自定义弹出框. 项目地址:http://www.easck.com/j ...
- Android 多种简单的弹出框样式设置
简介 这是一个基于AlertDialog和Dialog这两个类封装的多种弹出框样式,其中提供各种简单样式的弹出框使用说明.同时也可自定义弹出框. 项目地址:https://github.com/Liu ...
- html仿苹果桌面导航js css,CSS简单实现弹出框、输入框等的背景幕布，模仿苹果官网导航块的半透明效果。...
需求提要 我们如果想写一个效果类似弹出框的组件,首先简单分析一下弹出框的几个特性:弹出框肯定位于当前页面的最顶端,并且在弹出框关闭之前,其他控件都无法点击.focus等. 为了更好突出弹出框的效果,除 ...
- IOS8中SWIFT 弹出框的显示
弹出框不管是在网页端,还是在手机APP端,都是常用的控件.在网页中实现个简单的弹出框只需要调用alert,在IOS中,也不是那么复杂,也是容易使用的. 我先用xcode6创建一个名为iOS8Swift ...
- html弹出框教程,JavaScript 弹出框
JavaScript 弹出框 在JavaScript中,您可以创建对话框或弹出窗口来与用户进行交互. JavaScript具有三种不同类型的弹出框:警告框,确认框和提示框. 警告框 警告框是最简单的弹 ...
- js的三种弹出框（alert、confirm、prompt）简单介绍
一.具体内容 1.alert() alert 方法有一个参数,就是用户想弹出的内容,弹出框很简单,就一个显示功能.你可以点击确认关闭这个弹出框. 例如:alert("hello wo ...
- android自定义模态框,安卓开发自定义弹出框的简单方式（纯代码布局）
弹出框在安卓开发中是经常会用到的,如果单纯的只是用安卓自带的对话框模式肯定是十分单调的. 再来我看来安卓一定有一个功能让我们像Layout添加Layout一样把Layout添加到提示框里面. 所以忘了 ...
- jQuery实现简单弹出框
功能点 1.点击"更多"出现弹出框 2.点击下拉列表触发回调 3.点击空白区域收起弹出框 效果演示 PS:鼠标右键效果图`另存为`到本地 ,再将图片后缀gif改为rar即可得到完整 ...
最新文章
- java 发送邮件_老板要实现SpringBoot发送邮件?大神发了这篇文章后,今晚准点下班...
- unity鼠标控制镜头旋转_Unity3D实现鼠标控制视角转动|chu
- 阿里帝国到底有多庞大
- 刚刚！频域通道注意力网络FcaNet开源了！
- python（六）切片，生成式，生成器，迭代
- [Android]使用Dagger 2依赖注入 - DI介绍（翻译）
- 【从 0 开始机器学习】逻辑回归识别手写字符！
- 【限时免费】真实数据操练，经典算法分析，实战NLP领域，只等你来！
- Javascript：流程控制
- Java使用Thumbnails实现图片指定大小压缩
- Java 每半年就会更新一次新特性，再不掌握就要落伍了：Java17 的新特性
- 我的 2020 总结：Never Settle
- 颜色空间：RGB，CMY，HSV，HSL，Lab详解
- BitComet的简介与下载
- 开课通知 | 《AISHELL-3语音合成实战》课程
- NLP Learning | 初识NLP
- 语音芯片JQ8400的使用心得
- 【雷达基础知识】-------德雅村支书第三更（雷达距离方程的讲解，原创内容，转载请标注德雅村支书）
- python计算召回率_分词结果准确率、召回率计算-python
- 大三使用Turtle库画太极八卦图