openlayers添加标记信息框

要点：一个marker就是一个 放置在地图相应位置的DOM元素

marker的样式可以随意扩展，然后调用API将DOM对象整个放置成为一个图层

 

var marker = new ol.Overlay({
            element: DOM,
            position: ol.proj.transform( lnglat , 'EPSG:4326', 'EPSG:3857'),
            positioning: 'center-center'
        });
 map.addOverlay(marker);

注明：需要先引入overlayer js类才可以调用这个api；

 

DOM：html字符串

lnglat: 地图坐标

 

信息框本质也是一个dom对象 创建方法与marker一样，一般的需要加上一个关闭按钮的元素节点，并且在添加到地图之前先绑定事件；

例如：

 

        var content = document.getElementById('popup-content');
        var container = document.getElementById('popup');
        var closer = document.getElementById('popup-closer');
        

var popup;

 

	closer.onclick = function() {
            popup.setPosition(undefined);
            closer.blur();
            return false;
        };
        popup = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
            element: container,
            positioning: 'bottom-center'
        }));
        map.addOverlay( this.popup );closer.onclick = function() {
            popup.setPosition(undefined);
            closer.blur();
            return false;
        };
        popup = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
            element: container,
            positioning: 'bottom-center'
        }));
        map.addOverlay( this.popup );

注明：在markerDOM 元素中绑定事件：得到marker的坐标 然后如下操作即可

popup.setPosition(ol.proj.transform(coordinate, 'EPSG:4326', 'EPSG:3857')); // coordinate是marker坐标值

 

 

 

 

 

 

 

 

转载自：https://blog.csdn.net/museions/article/details/78420220