OpenLayershtml5 Overlay 示例!DOCTYPE html html langzh head meta charsetUTF-8 titleOpenLayers Overlay 示例/title !-- 引入 OL 样式 -- link relstylesheet hrefhttps://cdn.jsdelivr.net/npm/ol7.4.0/ol.css style body { margin: 0; padding: 0; } #map { width: 100%; height: 100vh; } /* 弹窗样式 */ .ol-popup { position: absolute; 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; left: -50px; min-width: 200px; display: none; /* 默认隐藏 */ } .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; } .closer { text-decoration: none; position: absolute; top: 2px; right: 8px; color: #999; } /style /head body div idmap/div !-- 弹窗 DOM 结构 -- div idpopup classol-popup a href# idpopup-closer classcloser×/a div idpopup-content/div /div !-- 引入 OL JS -- script srchttps://cdn.jsdelivr.net/npm/ol7.4.0/dist/ol.js/script script // 1. 获取 DOM 元素 const container document.getElementById(popup); const content document.getElementById(popup-content); const closer document.getElementById(popup-closer); // 2. 创建 Overlay 实例 const overlay new ol.Overlay({ element: container, autoPan: true, // 弹窗超出视野时自动平移地图 positioning: bottom-center, stopEvent: true, // 【关键】阻止点击弹窗时事件穿透到地图 offset: [0, 0] }); // 3. 初始化地图 const map new ol.Map({ target: map, layers: [ ], overlays: [overlay], // 将 Overlay 加入地图 view: new ol.View({ center: ol.proj.fromLonLat([112.9, 28.2]), // 长沙附近 zoom: 10 }) }); // 4. 加载高德底图 const gaodeLayer new ol.layer.Tile({ source: new ol.source.XYZ({ title:高德, url:http://wprd0{1-4}.is.autonavi.com/appmaptile?langzh_cnsize1style7x{x}y{y}z{z} }) }) map.addLayer(gaodeLayer) // 5. 点击关闭弹窗 closer.onclick function() { overlay.setPosition(undefined); closer.blur(); return false; }; // 6. 监听地图单击事件 map.on(singleclick, function(evt) { // 设置弹窗内容 const coordinate evt.coordinate; const hdms ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate)); content.innerHTML p你点击了这里:/pcode hdms /code; // 设置弹窗位置并显示 overlay.setPosition(coordinate); container.style.display block; // 确保显示 }); /script /body /html