我想在运行时动态设置自定义标记图标的阴影,因为我想强调当前单击的图标。我使用的是传单1.0。我尝试过的事情:
-
使用
createShadow
函数在运行时添加阴影 -
在自定义图标中添加一个空白的png阴影图像,并在运行时通过
createShadow
函数或直接修改阴影图像源来更改它
下面是一些伪代码:
function addMyShadow(marker) {
/* try Leaflet's `createShadow` function */
// directly modify marker: Uncaught TypeError: marker.createShadow is not a function
marker.createShadow('lib/images/shadow.png');
// the createShadow is available under options.icon,
// but this doesn't seem to change anything
marker.options.icon.createShadow('lib/images/shadow.png');
/* try directly modifying the shadow's image source */
// Successfully changes the `currectSrc` property,
// but also doesn't do anything to the icon on the map
marker._shadow.currentSrc = 'lib/images/shadow.png';
}
我还尝试添加一个自定义类与
-webkit-filter: drop-shadow
,但我已经使用-webkit-filter
颜色一组图标。我只想更改选定的图标,而不是整个类。显然,嵌套-webkit-filter
会覆盖外部的-webkit-filter
,而不是堆叠过滤器。所以这对我来说不是一个可行的选择目前我正在尝试添加一个自定义类,使用css
drop-shadow
;似乎我可以在运行时手动更改类,但我希望有一些更好的内置方法来添加阴影。这也不是很漂亮,因为即使图像是透明的,它也会使阴影变成方形。
EDIT:我希望标记是可拖动的(并有阴影跟随标记被拖动)。因此,任何有两个图标的解决方案都需要以某种方式将两个图标绑定在一起。
我认为你应该有两个L.icon对象:一个没有阴影,一个有阴影。
要显示阴影,只需切换L.Icon
marker.on('click', function(e) {
if(selectedMarker) {
if(selectedMarker !== e.target) { // selected marker is NOT this one
selectedMarker.setIcon(greenIcon);
e.target.setIcon(greenIconWithShadow);
selectedMarker = e.target;
}
else { // selected marker is this one
selectedMarker.setIcon(greenIcon);
selectedMarker = false;
}
}
else { // no marker selected
selectedMarker = e.target;
e.target.setIcon(greenIconWithShadow);
}
});
阴影是L.Icon的一部分,在拖拽
时应该跟随它参见示例http://plnkr.co/edit/PNxzJqMbcRTuo0jWPGyj?p=preview