vue-openlayers实现地图坐标弹框效果

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

openlayers

这个效果是点击地图，弹出坐标信息。

点击地图边缘时，底图会跟着移动，使弹窗能完整显示出来。

 

 

 
 .popup {
  min-width: 280px;
  position: relative;
  background: #fff;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  transform: translate(-50%, calc(-100% - 12px));
 
  
  &::after {
   display: block;
   content: '';
   width: 0;
   height: 0;
   position: absolute;
   border: 12px solid transparent;
   border-top-color: #fff;
   bottom: -23px;
   left: 50%;
   transform: translateX(-50%);
  }
 }
 
 .icon-close {
  cursor: pointer;
  align-self: flex-end;
  margin-bottom: 10px;
 }

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