使用CSS3动画来脉动Leaflet标记 [英] Pulsating Leaflet marker using CSS3 animations

问题描述

我想在传单地图上创建自定义脉动地图标记图标.出于学习目的，我不想使用第三方插件.

I want to create a custom pulsating map marker icon on a Leaflet map. For learning purposes I don't want to use third party plugins.

我正在使用以下CSS代码创建脉冲式"动画:

I am using the following CSS code for creating the 'pulsating'-animation:

.gps_ring {
    border: 3px solid #999;
    -webkit-border-radius: 30px;
    height: 18px;
    width: 18px;    
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;     
}   
@-webkit-keyframes pulsate {
    0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

我正在使用Leaflet的 DivIcon 来更改标记的可视化效果(引用CSS上面的课程):

I am using Leaflet's DivIcon in order to change the visualization of a marker (referencing the CSS class above):

// Define an icon called cssIcon
var cssIcon = L.divIcon({
    // Specify a class name we can refer to in CSS.
    className: 'gps_ring'
});

// Create markers and set their icons to cssIcon
L.marker([50.5, 30.5], {icon: cssIcon}).addTo(map);

此方法目前不起作用.动画标记图标始终显示在地图的左上角.似乎转换(比例)破坏了当前标记的位置:

This approach doesn't work at the moment. The animated marker icon always shows up on the top left corner of the map. It seems that the transformation (scale) breaks the current marker location:

顺便说一句，我在Windows 7和优胜美地上使用Chrome 44.x.

BTW I am using Chrome 44.x on Windows 7 and Yosemite.

我在这里创建了一个最小的示例:

I have created a minimal example here:

http://jsfiddle.net/christianjunk/q69qx45c/1/

出了什么问题?为什么动画会中断标记的地图位置?

What is going wrong? Why does the animation breaks the marker's map position?

推荐答案

经过一段时间的研究，我找到了解决问题的方法:

After investigating for some more time I found a way to solve the problem:

我更改了CSS代码slighlty:

I changed the CSS code slighlty:

.css-icon {

}

.gps_ring { 
    border: 3px solid #999;
     -webkit-border-radius: 30px;
     height: 18px;
     width: 18px;       
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite; 
    /*opacity: 0.0*/
}

@-webkit-keyframes pulsate {
        0% {-webkit-transform: scale(0.1, 0.1); opacity: 0.0;}
        50% {opacity: 1.0;}
        100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.0;}
}

然后我更改了DivIcon类的实例化:

And I changed the instantiation of my DivIcon class:

// Define an icon called cssIcon
var cssIcon = L.divIcon({
  // Specify a class name we can refer to in CSS.
  className: 'css-icon',
  html: '<div class="gps_ring"></div>'
  // Set marker width and height
  ,iconSize: [22,22]
  // ,iconAnchor: [11,11]
});

以下是成功的窍门:我现在正在使用内部html 来运行CSS动画.这将保留标记的位置.还要注意 iconSize 属性，该属性具有转换后图标的总大小(21 px =〜18px x 1.2).以这种方式进行设置，将动画圆以坐标为中心:

The following did the trick: I am now using the inner html to run the CSS animation. This will preserve the marker's location. Also note the iconSize attribute, which has the total size of the icon after the transformation ( 21 px =~ 18px x 1.2). Setting it this way centers the animated circle at the coordinate:

工作示例: http://jsfiddle.net/christianjunk/waturuoz/

我仍然不知道为什么我的第一种方法不起作用.

I still couldn't figure out, why my first approach wasn't working.

这篇关于使用CSS3动画来脉动Leaflet标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！