openlayers5学习笔记-添加Overlay

最新推荐文章于 2025-06-03 17:12:42 发布

转载最新推荐文章于 2025-06-03 17:12:42 发布 · 496 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/YrRoom/p/9366802.html

文章标签：

#javascript #ViewUI

本文介绍了一种在网页地图上添加带有图片和链接的位置标记的方法。通过创建HTML元素并使用自定义覆盖物的方式，实现地图上的位置标注。该示例展示了如何设置标记的位置、图标及名称链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

tmp.addPosition = function (map, item) {
                var ele = document.createElement("div");
                var img = document.createElement("img");
                img.setAttribute('src', '/images/blueIcon.png');

                var a = document.createElement("a");
                a.setAttribute('href', '/pdf?username=' + item.name);
                a.setAttribute('target', '_black');
                a.setAttribute('class', 'positionTitle');
                a.innerHTML = item.name;

                ele.append(img);
                ele.append(a);

                var vienna = new Overlay({
                    position: [item.x,item.y],
                    element: ele
                });

                tmp.map.addOverlay(vienna);
            }

//调用：
tmp.addPosition(map, { x: 102.57374, y:30.51035,name:'测试点'})