Активировать импульсную анимацию маркера Google Map?

Ответ 1

После проверки кода я заметил, что CSS-пульсация используется в демонстрации, которую вы предоставили. Было бы неплохо увидеть другие примеры этого.

Он использует статическое изображение для центра.

Вот код для игры с... 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

Используемая вами ссылка использует чистую 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 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 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

Ответ 3

Это может частично ответить на ваш вопрос. Вы можете использовать анимированную полилинию, как в этом примере: https://developers.google.com/maps/documentation/javascript/examples/overlay-symbol-animate

Конечно, при необходимости вы можете создавать более сложные анимации. Вы также можете переключаться с помощью маркеров setInterval() изображений (прозрачных PNG) или стилей css (тень окна в соответствии с вашим примером), поэтому он будет выглядеть как анимация.