Animation d'impulsion Google Map Marker?

Je me demande est-il de toute façon de faire de Google Map Marqueur d'impulsion? Comme ici: http://plebeosaur.us/etc/map/

source d'informationauteur marverix

  1. 15

    Après avoir vérifié le code, j'ai remarqué que CSS vibrer est utilisé sur la démo que vous avez fournis. Il serait agréable de voir d'autres exemples de cette.

    Il utilise une image statique pour le centre.

    Voici le code pour jouer avec... 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)
);
  2. 6

    Le lien que vous fournissez utilise pure css pour faire de cette animation : 

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

    Peut confirmer qu'il fonctionne sur mon site quand je copie leur code et leur css

  3. 3

    Cela peut en partie répondre à votre question. Vous pouvez utiliser d'animation polyligne comme dans cet exemple:
    https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate

    Bien sûr, vous pouvez créer plus sophistiquées animations si besoin.
    Vous pouvez également alterner avec setInterval() des images (Png transparent) des marqueurs ou de ses styles css (box-shadow que par votre exemple) donc, il a l'aspect d'une animation.