`r`n
经纬志
`r`n
`r`n
首页 / OpenLayers / 使用示例
`r`n

独立窗口地图

把同一个地图实例的目标容器换到新窗口,主窗口与之共享视图状态。

OpenLayers 10.3.1 · 更新 2026-10-27
`r`n
源码与运行效果
运行效果
`r`n

说明

map.setTarget() 可以把地图挂到任意 DOM 元素上。示例先打开一个空白窗口, 写入最小 HTML 骨架并引入 ol.css,再把地图实例的目标指向新窗口的容器。

地图对象没有重建,图层与视图状态原样保留;关闭子窗口时把目标设回主窗口, 地图会立刻重新渲染,不会丢失当前中心与缩放。

操作结果
点「在新窗口打开」弹出独立窗口,地图整体迁移过去
在子窗口平移缩放视图状态保存在同一实例上
点「收回主窗口」地图回到页面内,状态不变

弹出窗口可能被浏览器拦截,必须在点击事件里同步调用 window.open(),异步之后再开会失败。

`r`n
`r`n