openlayers实现地图弹窗

本文实例为大家分享了openlayers实现地图弹窗的具体代码，供大家参考，具体内容如下

 
 
 
 
 
 
 body, #map {
 border: 0px;
 margin: 0px;
 padding: 0px;
 padding: 0px;
 padding: 0px;
 width: 100%;
 height: 100%;
 font-size: 13px;
 }
 
 .ol-popup {
 display: none;
 position: absolute;
 background-color: white;
 -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
 -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));
 border: 1px solid #cccccc;
 bottom: 12px;
 left: -50px;
 width: 200px;
 }
 .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;
 }
 .popup-title{
 font-weight: bold;
 border-bottom:1px solid #cccccc;
 padding: 5px 8px;
 }
 .popup-content{
 padding: 5px 8px;
 }
 .ol-popup-closer {
 text-decoration: none;
 position: absolute;
 top: 6px;
 right: 6px;
 }
 .ol-popup-closer:after {
 content: "✖";
 }
 

 



 
 
 
 
 

效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。