如何在openlayers 6中将位置弹出窗口锚定到左侧屏幕答案

【问题标题】：How to anchor position popup to left screen in openlayers 6如何在openlayers 6中将位置弹出窗口锚定到左侧屏幕
【发布时间】：2022-08-03 03:46:25
【问题描述】：

单击以在地图上分层并在选定位置显示弹出窗口时，我有一个弹出窗口。我想在左侧屏幕上显示弹出窗口，我该怎么做。请帮帮我，我的英语不好。谢谢

我的快闪秀是这样的

Popup here

我希望点击弹出窗口时会显示左侧屏幕，而不是中心

你能再描述一下你的意思吗
@BR75 我正在更新我的问题，希望你知道我的问题并给我建议，非常感谢
所以你真的不需要弹出窗口。您可以像 div 一样创建自己的 HTML 元素并将其显示在左侧。
@BR75 非常感谢您的回复，我将我的数据放入 popup 中，所以我希望弹出窗口锚定在固定位置。我会试试你的方法。再次感谢♥

标签： openlayers-6

【解决方案1】：

如果你想要左中的弹出窗口，你可以这样做：

<html>

<head>
  <meta charset="utf-8" />
  <style>
    .map {
      height: 100%;
      width: 100%;
    }

    html,
    body {
      height: 100%
    }
    
    .ol-popup {
        background-color: white;
        box-shadow: 0 1px 4px rgba(0,0,0,0.2);
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        min-width: 280px;
      }
      
      .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;
      }
      
  </style>
  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/build/ol.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.13.0/css/ol.css"> 
</head>

<body>
  <div id="popup" class="ol-popup">
      <a href="#" id="popup-closer" class="ol-popup-closer"></a>
      <div id="popup-content"></div>
  </div>
  <div id="map" class="map"></div>

  <script type="text/javascript">   
    const container = document.getElementById('popup');
    const content = document.getElementById('popup-content');
    
    document.addEventListener("DOMContentLoaded", function () {
        drawMap();
    });
    
    function drawMap() {
        const osmLayer = new ol.layer.Tile({
            source: new ol.source.OSM({
                attributions: '© OpenStreetMap',
            })
        });
          
        map = new ol.Map({
            target: 'map',
            layers: [
                osmLayer,
            ],
            view: new ol.View(),
        });
        
        const popup = new ol.Overlay({
          element: document.getElementById('popup'),
        });
        
        map.addOverlay(popup);
        
        map.getView().fit([0,0,0,0]);
        
        map.on('click', function (evt) {
          const element = popup.getElement();
          const popupMap = popup.getMap();
          
          const coordinate = evt.coordinate;
           
          const viewExtent = popupMap.getView().calculateExtent();
          const centerPoint = ol.extent.getCenter(viewExtent);
          content.innerHTML = '<p>You clicked here:</p><code>' + coordinate + '</code>';
          
          popup.setPosition( [viewExtent[0], centerPoint[1]] );
          
        });
    }
     
  </script>
</body>

</html>

删除绝对位置并确定位置： https://jsfiddle.net/ve5mn0by/5/

编辑：

没有 Openlayers 覆盖，只有 HTML：

map.on('click', function (evt) {
        
            const container = document.createElement('div');
            const content = document.createElement('div');
            
            container.style.width = '10rem';
            container.style.height = '100%'
            //container.style.backgroundColor = '#FF0000';
            container.style.position = 'absolute';
            container.style.display = 'flex';
            
            content.style.width = '100%';
            content.style.height = '10rem'
            content.style.backgroundColor = '#FFFF00';
            content.style.alignSelf = 'center';
            
            
            container.appendChild(content);
            document.body.appendChild(container);
          
        });

【讨论】：

感谢您的回复，并对延误表示歉意。它对我帮助很大，但如果可能的话，我希望弹出窗口保持固定在屏幕上的某个位置，而不是沿着地图移动。非常感谢你