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

出了什么问题？

--- live：http://www.monde-du-rat.fr/pmr/new.php#/carte

Answer 1

您应该创建实例（在new之前添加myIconReplc），example，就像这样

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

您已忘记宣布new的{{1}}个实例。

变化：

myIconReplc

要：

e.target.setIcon(myIconReplc);

如果您希望能够像Leaflet中的大多数类一样声明一个没有e.target.setIcon(new myIconReplc);的图标，那么您可以这样做：

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();

您可能已经注意到，在不使用new关键字的情况下创建了Leaflet对象。这是通过使用小写工厂方法补充每个类来实现的

请参阅：http://leafletjs.com/reference.html#class（在类工厂下）

在传单上更改图标

2 个答案: