Google Map Marker animacji tętna?

Question

Zastanawiam się, czy istnieje sposób na zmusienie Google Map Marker? Jak tutaj: http://plebeosaur.us/etc/map/

Answer 1

To może częściowo odpowiedzieć na to pytanie. Możesz użyć animowanej polilinii, jak w tym przykładzie: https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate

Oczywiście w razie potrzeby możesz tworzyć bardziej wyrafinowane animacje. Możesz również przełączać znaczniki setInterval() (przezroczyste PNG) lub ich style css (box-shadow jak na przykładzie), aby wyglądał jak animacja.

Answer 2

Po sprawdzeniu kodu zauważyłem, że CSS pulsować jest używany na demo, który podałeś. Byłoby miło zobaczyć inne tego przykłady.

Używa statycznego obrazu do środka.

Oto kod, aby bawić się z ... 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

Link podać używa czystego css zrobić animację:

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

może potwierdzić, że działa na mojej stronie, kiedy Kopiuję ich kod i ich css