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

Question

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

Answer 1

Значок маркера карты Google имеет свойство 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/