如何在 Google 地图（如 Uber 或 OLA Cab 应用程序）中使用动画旋转标记？答案

【问题标题】：How can I rotate marker with animation in Google Map Like Uber or OLA Cab app?如何在 Google 地图（如 Uber 或 OLA Cab 应用程序）中使用动画旋转标记？
【发布时间】：2016-09-22 23:43:34
【问题描述】：

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

【问题讨论】：

Change Google map marker orientation according path direction 的可能重复项
@geocodezip 我正在寻找原生平台。谢谢你的回答。
请在您的帖子中添加android标签

标签： google-maps google-maps-api-3 google-maps-markers

【解决方案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/

【讨论】：

抱歉，我正在寻找 Android 原生代码。不期待混合动力车。谢谢。