Google地图标记脉冲动画？

Question

我想知道有什么方法可以让Google Map Marker发出脉冲？像这里：http://plebeosaur.us/etc/map/

Answer 1

这可能部分回答你的问题。您可以使用如下示例中的动画折线： https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate

当然，如果需要，您可以构建更复杂的动画。 您也可以使用setInterval（）图像（透明PNG）标记或其css样式（根据示例中的框阴影）进行切换，使其看起来像动画。

Answer 2

检查完代码后，我注意到在您提供的演示中使用了CSS pulsate。很高兴看到其他例子。

他使用静态图像作为中心。

这是一起玩的代码... http://jsfiddle.net/ryanoc/86Ejf/

var image = new google.maps.MarkerImage(
    'bluedot_retina.png', 
    null, // size 
    null, // origin 
    new google.maps.Point(8, 8), // anchor (move to center of marker) 
    new google.maps.Size(17, 17) // scaled size (required for Retina display icon) 
); 

Answer 3

您所提供的链接使用纯CSS来制作这个动画：

@-moz-keyframes pulsate { 
    from { 
     -moz-transform: scale(0.25); 
     opacity: 1.0; 
    } 
    95% { 
     -moz-transform: scale(1.3); 
     opacity: 0; 
    } 
    to { 
     -moz-transform: scale(0.3); 
     opacity: 0; 
    } 
} 
@-webkit-keyframes pulsate { 
    from { 
     -webkit-transform: scale(0.25); 
     opacity: 1.0; 
    } 
    95% { 
     -webkit-transform: scale(1.3); 
     opacity: 0; 
    } 
    to { 
     -webkit-transform: scale(0.3); 
     opacity: 0; 
    } 
} 
/* get the container that's just outside the marker image, 
    which just happens to have our Marker title in it */ 
#map_canvas div.gmnoprint[title="I might be here"] { 
    -moz-animation: pulsate 1.5s ease-in-out infinite; 
    -webkit-animation: pulsate 1.5s ease-in-out infinite; 
    border:1pt solid #fff; 
    /* make a circle */ 
    -moz-border-radius:51px; 
    -webkit-border-radius:51px; 
    border-radius:51px; 
    /* multiply the shadows, inside and outside the circle */ 
    -moz-box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f; 
    -webkit-box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f; 
    box-shadow:inset 0 0 5px #06f, inset 0 0 5px #06f, inset 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f, 0 0 5px #06f; 
    /* set the ring's new dimension and re-center it */ 
    height:51px!important; 
    margin:-18px 0 0 -18px; 
    width:51px!important; 
} 


/* hide the superfluous marker image since it would expand and shrink with its containing element */ 
/* #map_canvas div[style*="987654"][title] img {*/ 
    #map_canvas div.gmnoprint[title="I might be here"] img { 
     display:none; 
    } 
    /* compensate for iPhone and Android devices with high DPI, add iPad media query */ 
    @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (device-width: 768px) { 
     #map_canvas div.gmnoprint[title="I might be here"] { 
      margin:-10px 0 0 -10px; 
     } 
    } 

可以证实它的作品在我的网站时，我复制他们的代码和他们的CSS