如何在Google Map Like Uber或OLA Cab应用程序中使用动画旋转标记？

Question

如何在Google Map Like Uber或OLA Cab应用程序中使用动画旋转标记？我已经完成了从源到目标LatLng的标记移动。但是在像OLA app一样移动之前需要用动画旋转它。

Answer 1

谷歌地图标记图标有一个属性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/的另一个很好的例子