Как повернуть маркер с анимацией в Google Map, как Uber или OLA Cab app?

Как повернуть маркер с анимацией в Google Map, как Uber или OLA Cab app? Я сделал перемещение маркера из источника в пункт назначения LatLng. Но нужно повернуть его с анимацией перед перемещением, как приложение OLA.

1 ответ

  1. Google map marker icon имеет свойствоrotation, которое может быть установлено соответствующим образом.

    Образец:

    var marker = new google.maps.Marker({
        position : new google.maps.LatLng(35.678494,139.744205),
        map: myMap,
        icon: {
            url: '../images/car.png',
        // This marker is 20 pixels wide by 32 pixels high.
            scaledSize: new google.maps.Size(50, 50),
            rotation: 45
        }
      });
    

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

    Но если вы хотите вращение с анимацией, то вы можете попробовать добавить это в свой файл css:

    img[src^='../images/car.png']{
       -webkit-transition: -webkit-transform .8s ease-in-out;
       transition: transform .8s ease-in-out;
    }
    
    img[src^='../images/car.png']:hover{
        -ms-transform: rotate(45deg); /* IE 9 */
        -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
        transform: rotate(45deg);
    }
    

    Ссылка : https://jsfiddle.net/doktormolle/nBsh4/

    Я нашел еще один отличный пример пользовательской анимации http://dylanvann.com/custom-animated-google-maps-markers/