change size of marker in leaflet

问题

I have one marker on the map in leaflet:

var centerMarker = L.marker(centerPoint, { title: 'unselected' }).bindLabel(schools[i][0]);
centerMarker.on('click', selectMarker);
centerMarker.addTo(map);

I want to change the size of that marker on click.

I know that we can change icons but I just want to change the size of the same icon of the marker.

回答1:

You can get the old icon from the marker itself, change the size of the icon and then call setIcon with the changed icon:

var icon = centerMarker.options.icon;
icon.options.iconSize = [newwidth, newheight];
centerMarker.setIcon(icon);

回答2:

Use setIcon on the marker, providing a new icon with the same image but different size and anchors.

var centerPoint = L.latLng(55.4411764, 11.7928708);
var centerMarker = L.marker(centerPoint, { title: 'unselected' });
centerMarker.addTo(map);

centerMarker.on('click', function(e) {
    centerMarker.setIcon(bigIcon);
});

Demo (using somewhat sloppy settings for the center and shadow etc):

http://jsfiddle.net/pX2xn/4/

回答3:

Although it is an old question, but in case someone is looking for another possible option other than the answered ones.

L.marker([coord.latitude, coord.longitude], {
    color: 'red',
    icon: getIcon(), 
    data: coord
}).addTo(myMap).on("click", circleClick);

function getIcon(total_dead_and_missing) {
    var icon_size = [50, 50];   //for dynamic icon size, 
    var image_url = '1.png';        //for dynamic images

    L.icon({
        iconUrl: image_url,
        shadowUrl: 'leaf-shadow.png',

        iconSize:    icon_size , // size of the icon
        shadowSize:   [50, 64], // size of the shadow
        iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
        shadowAnchor: [4, 62],  // the same for the shadow
        popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    });
}

Resource : https://leafletjs.com/examples/custom-icons/

来源：https://stackoverflow.com/questions/16038153/change-size-of-marker-in-leaflet

标签

javascript

icons

leaflet