<div id="marker" title="Marker" style="height:40px;width:27px;"></div>//寬高為圖片大小

2.新增overlay

var marker = new ol.Overlay({
        position: [0,0],//預設空
        positioning: 'center-bottom',
        element: document.getElementById('marker'),//繫結上面新增的元素
        //stopEvent: false,
        offset: [-13.5
 
, -40]//圖片偏移量
    });
    map.addOverlay(marker);

3.實時改變動態圖片

    function changeStyle(name) {
        var f = ckLayer.getSource().getFeatureById(name);
        if (f) {
            var type = f.getProperties().type;
            var coordinate = f.getGeometry().getCoordinates(); //獲取圖層上某個feature座標           
 

            var src = '/Content/HomeMap/images/' + type + '.gif';//拼接圖片地址
            var css = {//在這裡設定css3支援的各種樣式
                background: 'url(' + src + ')'
            };
            $('#marker').css(css);//改變樣式
            marker.setPosition(coordinate); //顯示         

        } else {
            marker.setPosition(undefined
 
);//隱藏
        }
    }