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