问题
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