在google maps api v3上旋转.gif图片？

Question

我在这个问题上找到了很多答案,但是在使用.gif图像而不是标记时却没有.要使用.gif图像(以及GIF动画)我使用代码(有效)

var image = {
  url: 'img/RedFlashYacht.gif',
  size: new google.maps.Size(75, 75),
  origin: new google.maps.Point(0, 0),
  anchor: new google.maps.Point(0, 32),
  scaledSize: new google.maps.Size(50, 50)
};
marker = new google.maps.Marker({
    position: pos , 
    map: map,
    icon: image,
    store_id: mkrID,
    optimized: false
}); 

//对于没有使用过.gif文件的人来说,'optimized:false'这一行很关键

我现在要做的是旋转gif图像(到指定的角度,而不是一个恒定的旋转[我可以做GIF动画]).Dispite设置ID与图像"STORE_ID:mkrID," VAR mkrID被先前创建的,并且可以读取它带回代码marker.get("STORE_ID"),所以我知道它被设置.我无法使用document.getElementById访问该图像.也不能让任何谷歌地图API旋转eample代码工作.我发现的示例似乎是针对v2或与谷歌地图自己的标记相关,而不是使用gif的自定义图像.

有没有人能够在谷歌地图中旋转gif图像？

Answer 1

标记的"store_id"属性不允许您访问包含图像的DOM元素.如果每个标记都有一个唯一的图标,您可以使用其带有JQuery的URL获取它,然后对其应用CSS转换:

$('img[src="http://www.geocodezip.com/mapIcons/boat-10-64.gif"]').css({
  'transform': 'rotate(45deg)'
});

注意:这仅适用于标记optimized: false

• 概念证明小提琴
• 旋转.png图像的概念证明

代码段:

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.47949, -122.083168),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var image = {
    url: 'http://www.geocodezip.com/mapIcons/boat-10-64.gif',
    size: new google.maps.Size(75, 75),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(0, 32),
    scaledSize: new google.maps.Size(50, 50)
  };
  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    icon: image,
    store_id: "mkrID",
    optimized: false
  });
  var rotationAngle = 10;
  google.maps.event.addListenerOnce(map, 'idle', function() {
    setInterval(function() {
      $('img[src="http://www.geocodezip.com/mapIcons/boat-10-64.gif"]').css({
        'transform': 'rotate(' + rotationAngle + 'deg)'
      });
      rotationAngle += 10;
    }, 1000);
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>