经纬志
首页 / OpenLayers / 使用示例

自定义地图元素

把地图封装成自定义元素 ol-map-view,元素挂载时创建地图、卸载时释放 target,页面里只留一个标签。

OpenLayers 10.3.1 · 对应官方 es2015-custom-element.html · 更新 2026-10-27
源码与运行效果
运行效果

说明

自定义元素把「创建地图」这件事变成标签行为:connectedCallback 在元素进入 文档时调用,里面新建一个铺满元素的容器并构造 ol.Map; disconnectedCallback 在元素被移除时调用,setTarget(null) 断开地图与 DOM 的联系,避免事件监听与渲染循环残留。

样式放在元素自身:display:block 加 position:relative, 子容器用 inset:0 撑满。这样地图尺寸只由元素尺寸决定, 与页面其它布局解耦。

操作结果
查看页面结构只有一个自定义标签,没有额外的容器 div
缩放或拖动地图正常工作,事件绑定在元素内部
调整窗口大小元素尺寸变化,地图自动重算画布

自定义元素名必须带连字符,ol-map-view 合法,olmapview 不合法。