問題描述

我想在

順便說一句，我在 Windows 7 和 Yosemite 上使用 Chrome 44.x.

我在這里創建了一個最小的示例:

我還是不明白，為什么我的第一種方法不起作用.

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.

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;}
}

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:

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:

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;}
}

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]
});

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:

Working example: http://jsfiddle.net/christianjunk/waturuoz/

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

這篇關于使用 CSS3 動畫的脈動傳單標記的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！