在傳單上更改圖標

Question

根據這個問題： https ： //gis.stackexchange.com/questions/54651/change-marker-icon-on-click-using-leaflet ，我做了這個：

// onEachFeature
function onEachFeature(feature, layer) {
    layer.on('click', function (e) {

        // change icon
        console.log(layer.options.icon);
        e.target.setIcon(myIconReplc);

    });
}

var myIconReplc = L.Icon.extend({
    options: {
        iconUrl: "../resources/img/map/icons/orange/ambulance.png",
        iconSize: [30,35],
        shadowUrl: "../resources/img/map/icons/shadow.png",
        shadowAnchor: [8, 20],
        shadowSize: [25, 18],
        iconSize: [20, 25],
        iconAnchor: [8, 30] // horizontal puis vertical
    }
});

我有這個錯誤： Uncaught TypeError: undefined is not a function

怎么了 ？

---直播： http ： //www.monde-du-rat.fr/pmr/new.php#/carte

Answer 1

您應該創建實例（在myIconReplc之前添加new ）， 例如 ，像這樣

var myIconReplc = L.Icon.extend({
    options: {
        iconUrl: "../resources/img/map/icons/orange/ambulance.png",
        iconSize: [30,35],
        shadowUrl: "../resources/img/map/icons/shadow.png",
        shadowAnchor: [8, 20],
        shadowSize: [25, 18],
        iconSize: [20, 25],
        iconAnchor: [8, 30] // horizontal puis vertical
    }
});

layer.on('click', function (e) {
   e.target.setIcon(new myIconReplc);
});

Answer 2

您忘記了聲明myIconReplc的new實例。

更改：

e.target.setIcon(myIconReplc);

至：

e.target.setIcon(new myIconReplc);

如果您希望能夠像Leaflet中的大多數類一樣聲明一個沒有new圖標的圖標，您可以這樣做：

// Normal extending
var MyIconReplc = L.Icon.extend({
    options: {
        iconUrl: "../resources/img/map/icons/orange/ambulance.png",
        iconSize: [30,35],
        shadowUrl: "../resources/img/map/icons/shadow.png",
        shadowAnchor: [8, 20],
        shadowSize: [25, 18],
        iconSize: [20, 25],
        iconAnchor: [8, 30] // horizontal puis vertical
    }
});

// Shorthand
var myIconReplc = function (options) {
    return new MyIconRepl(options);
}

現在你可以這樣做：

var icon = new MyIconReplc();

和：

var icon = myIconReplc();

您可能已經注意到，在不使用new關鍵字的情況下創建了Leaflet對象。 這是通過使用小寫工廠方法補充每個類來實現的

請參閱： http ： //leafletjs.com/reference.html#class （在Class工廠下）