javascript 更改传单中标记的大小

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16038153/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 03:00:42  来源:igfitidea点击:

change size of marker in leaflet

javascripticonsleaflet

提问by vaibhav shah

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.

我知道我们可以更改图标,但我只想更改标记的相同图标的大小。

回答by m13r

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

您可以从标记本身获取旧图标,更改图标的大小,然后setIcon使用更改后的图标调用:

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

回答by flup

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

setIcon在标记上使用,提供具有相同图像但不同大小和锚点的新图标。

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/

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

回答by masud_moni

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: //leafletjs.com/examples/custom-icons/