代码说明：
-
html文件中添加map的div和弹框的div
-
js文件中，
- 创建一个覆盖来锚定弹出到地图。
- 创建地图，
- 向地图添加一个单击处理程序以呈现弹出窗口
- 添加一个单击处理程序来隐藏弹出窗口
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);
}
}
网友评论