Hoạt ảnh xung của Google Map Marker?

Question

Tôi tự hỏi có cách nào để làm cho Google Map Marker phát ra xung không? Như ở đây: http://plebeosaur.us/etc/map/

Answer 1

Điều này có thể trả lời một phần câu hỏi của bạn. Bạn có thể sử dụng polyline hoạt hình như trong ví dụ sau: https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate

Tất nhiên bạn có thể tạo các hoạt ảnh phức tạp hơn nếu cần. Bạn cũng có thể chuyển đổi với các điểm đánh dấu setInterval() (PNG minh bạch) hoặc các kiểu dấu css của nó (hộp đổ bóng theo ví dụ của bạn) để nó trông giống như một hình động.

Answer 2

Sau khi kiểm tra mã, tôi nhận thấy rằng xung CSS được sử dụng trên bản giới thiệu bạn đã cung cấp. Nó sẽ là tốt đẹp để xem các ví dụ khác về điều này.

Anh ấy sử dụng hình ảnh tĩnh cho trung tâm.

Đây là đoạn mã để chơi xung quanh với ... 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

Các liên kết mà bạn cung cấp sử dụng css tinh khiết để làm cho hình ảnh động này:

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

có thể xác nhận nó hoạt động trên trang web của tôi khi Tôi sao chép mã của họ và css của họ