Как создать импульсную анимацию за изображением в Google Maps API - PullRequest
Новая
       7

Как создать импульсную анимацию за изображением в Google Maps API

0 голосов
/ 15 сентября 2018

Я бы хотел сделать анимацию импульсов за pin при Google Maps API.

пример

Сейчас у меня есть следующее: 

var locations = [
        [locationData('Pizzeiro', 'manhã', 'McDonalds'), 37.788181, -122.461270, 5, ''],
        [locationData('Pizzeiro', 'manhã', 'McDonalds'), 37.750812, -122.471934, 2, ''],
        [locationData('Pizzeiro', 'manhã', 'McDonalds'), 37.735609, -122.458201, 3, ''],
        [locationData('Pizzeiro', 'manhã', 'McDonalds'), 37.745382, -122.500773, 4, ''],
        [locationData('Pizzeiro', 'manhã', 'McDonalds'), 37.762963, -122.388506, 1, ''],
        [locationData('Pizzeiro', 'manhã', 'McDonalds'), 37.801745, -122.409085, 6, ''],
        [locationData('Pizzeiro', 'manhã', 'McDonalds'), 37.730511, -122.383679, 7, ''],
        [locationData('Pizzeiro', 'manhã', 'McDonalds'), 37.750457, -122.478779, 8, ''],
        [locationData('Pizzeiro', 'manhã', 'McDonalds'), 37.732810, -122.415951, 9, ''],
        [locationData('Pizzeiro', 'manhã', 'McDonalds'), 37.733625, -122.378872, 10, ''],
        [locationData('Pizzeiro', 'manhã', 'McDonalds'), 37.723578, -122.457493, 11, ''],
        [locationData('Pizzeiro', 'manhã', 'McDonalds'), 37.751543, -122.418354, 12, '']
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        scrollwheel: true,
        center: new google.maps.LatLng(37.754929, -122.429416),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [], i, marker, myoverlay;
    var infowindow = new google.maps.InfoWindow();

    for(i = 0; i < locations.length; i++){
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: "images/misc/bluedot1.png"
        });

        markers.push(marker);

        myoverlay = new google.maps.OverlayView();

        myoverlay.draw = function () {
            this.getPanes().markerLayer.id='marker-container';
        };

        myoverlay.setMap(map);

        // google.maps.event.addListener(marker, 'click', (function(marker, i) {
    }

    var clusterStyles = [
        {
            textColor: 'white',
            url: 'images/misc/bluedot1.png',
            height: 50,
            width: 50
        },
        {
            textColor: 'white',
            url: 'images/misc/bluedot1.png',
            height: 50,
            width: 50
        },
        {
            textColor: 'white',
            url: 'images/misc/bluedot1.png',
            height: 50,
            width: 50
        }
    ];

    var mcOptions = {
        gridSize: 50,
        styles: clusterStyles,
        maxZoom: 15
    };

    var mc = new MarkerClusterer(map, markers, mcOptions);

Как вы могли заметить, я попытался добавить id из marker-container, который я бы оживил, выполнив: 

#marker-container img{
    position: relative;
    margin: -9px 0 0 -9px;
    width: 18px;
    z-index: 1;
    border-radius: 50%;
    cursor: pointer;
    top: 0;
    animation: pulse 2.5s infinite;
    transition: .4s;
}
@keyframes pulse {
  0% {
    background-color: #f40011;
  }
  100% {
    background-color: #FF4136;
  }
}

Что мало переводит к тому примеру, который я привел выше. Это добрый импульс внутрь вместо паузы за синим изображением.

...