在OpenLayers中更改默认标记图标

时间:2012-02-06 16:13:22

标签: openlayers

我正在尝试在OpenLayers中绘制国家/地区位置,并且在更改默认图标时遇到问题。

我的基本代码如下:

    function addCountryMarker(ll, popupClass, popupContentHTML, closeBox, overflow) {
        var feature = new OpenLayers.Feature(alumniCountries, ll); 
        feature.closeBox = closeBox;
        feature.popupClass = popupClass;
        feature.data.popupContentHTML = popupContentHTML;
        feature.data.overflow = (overflow) ? "auto" : "hidden";

        var marker = feature.createMarker();

        var markerClick = function (evt) {
            if (this.popup == null) {
                this.popup = this.createPopup(this.closeBox);
                map.addPopup(this.popup);
                this.popup.show();
            } else {
                this.popup.toggle();
            }
            currentPopup = this.popup;
            OpenLayers.Event.stop(evt);
        };
        marker.events.register("mousedown", feature, markerClick);
        alumniCountries.addMarker(marker);
    }

这一切都运行正常,但显示默认的openLayers图标。以下行更改了图标但它在markerClick函数中打破了弹出窗口:

feature.icon = new OpenLayers.Icon("marker-blue.png");

使用marker.icon的同一行也会更改图标,但也会中断弹出窗口。关于如何在不破坏弹出窗口的情况下更改图标的任何指示都将非常感激。

2 个答案:

答案 0 :(得分:5)

花了一段时间,但最后却非常简单:

feature.data.icon = new OpenLayers.Icon("marker-blue.png");

答案 1 :(得分:0)

function addMarker(ll, iconURL, popupClass, popupContentHTML, closeBox, overflow) {
    try 
    {
    var size = new OpenLayers.Size(32, 32);
    var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
    var newIcon = new OpenLayers.Icon( iconURL, size, offset );
    var feature = new OpenLayers.Feature(markers, ll);
    feature.closeBox = closeBox;
    feature.popupClass = popupClass;
    feature.data.popupContentHTML = popupContentHTML;
    feature.data.overflow = (overflow) ? "auto" : "hidden";
    feature.data.icon = newIcon;

    var marker = feature.createMarker();
    //marker.setUrl('http://maps.google.com/intl/en_us/mapfiles/ms/micons/orange-dot.png');

    var markerClick = function (evt) {
        if (this.popup == null) {
            this.popup = this.createPopup(this.closeBox);
            map.addPopup(this.popup);
            this.popup.show();
        } else {
            this.popup.toggle();
        }
        currentPopup = this.popup;
        OpenLayers.Event.stop(evt);
    };
    marker.events.register("mousedown", feature, markerClick);
    //marker.setUrl('');


    markers.addMarker(marker);
}
catch (err) {
    txt = "There was an error in initOsmMap\n\n";
    txt += "Error description: " + err.message + "\n------------------------------------------------------------------------------------------------------------------------------------------------------------\n";
    console.log(txt);
}

}