如何在谷歌地图像Uber或OLA Cab应用程序中使用动画旋转标记?我已经完成了从源到目标LatLng的标记移动。但是在像OLA app一样移动之前需要用动画旋转它。
答案 0 :(得分:0)
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/
的另一个很好的例子