在谷歌地图api v3上旋转.gif图像？ [英] rotate a .gif image on google maps api v3?

问题描述

我在这个问题上找到了很多答案，但没有一个在使用.gif图片而不是标记时有用。为了使用.gif图像（也是动画gif），我使用了代码（它可以）

  var image = {
 url：'img / RedFlashYacht.gif'，
尺寸：新增google.maps.Size（75,75），
来源：新增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，
优化：false 
}）; 
  

//对于任何没有使用过.gif的行，'optimize：false' / p>

我现在要做的是旋转gif图像（到一个指定的角度，而不是一个常量旋转[我可以做动画gif]）。尽管为'image_id：mkrID'设置了图片的ID，但之前创建了var mkrID，并且我可以使用代码marker.get（'store_id'）读取它，所以我知道它已被设置。我无法使用document.getElementById访问图像。我也无法获得任何谷歌地图API旋转示例代码。例子我发现似乎是v2或与谷歌地图自己的标记，而不是自定义图像使用GIF。

有没有人能够在谷歌旋转GIF图像map？

解决方案

标记的store_id属性不允许您访问包含图像的DOM元素。如果每个标记都有独特的图标，那么可以使用JQuery的URL来抓取它，然后对其应用CSS转换：

 'transform'：'rotate（45deg） '
}）; 
  

注意：只适用于优化：false

• 概念证明小提琴


• 概念验证小提琴旋转.png图片

代码段：
$ b

function initialize（）{var map = new google.maps。地图（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）;

< #map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//

I find lots of answers on this question but not one that works when using .gif images and not markers. To use .gif images (and also animated gifs) I use code (which works)

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
}); 

//for anyone who has not used .gif, the line 'optimized: false' is critical

What I want to do now is rotate the gif image (to a specified angle, not a constant rotate [that I can do as animated gif]). Dispite setting the ID for the image with 'store_id: mkrID,' var mkrID being previously created, and I can read it back with code marker.get('store_id') so I know it's been set. I cannot access the image with document.getElementById. nor can I get any of the google maps API rotate eample code to work either. Examples I find seem to be for v2 or relate to google maps own markers, not custom images using a gif.

Has anyone been able to rotate a gif image in a google map?

解决方案

The "store_id" property of the marker doesn't give you access to the DOM element which contains the image. If you have a unique icon for each marker, you can grab it using its URL with JQuery, then apply a CSS transform to it:

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

Note: this will only work for markers with optimized: false

• proof of concept fiddle
• proof of concept fiddle rotating a .png image

code snippet:

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>

这篇关于在谷歌地图api v3上旋转.gif图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！