在谷歌地图 api v3 上旋转 .gif 图像？

Posted 2023-03-25

【中文标题】在谷歌地图 api v3 上旋转 .gif 图像？

【英文标题】：rotate a .gif image on google maps api v3?

【发布时间】：2016-12-07 23:50:30

【问题描述】：

我在这个问题上找到了很多答案，但没有一个在使用 .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 动画]）。尽管使用 'store_id: mkrID' 为图像设置 ID，但之前创建了 var mkrID，我可以使用代码 marker.get('store_id') 将其读回，所以我知道它已被设置。我无法使用 document.getElementById 访问图像。我也不能让任何谷歌地图 API 旋转示例代码工作。我发现的示例似乎适用于 v2 或与谷歌地图自己的标记有关，而不是使用 gif 的自定义图像。

有人可以在谷歌地图中旋转 gif 图像吗？

【问题讨论】：

感谢optimized 参数。让我开心。

【参考方案1】：

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

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

注意：这仅适用于带有optimized: false的标记

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

代码 sn-p：

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?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

【讨论】：

感谢您的回复。有趣的。目前所有图像都是相同的（但旋转角度不同），所以为了实现这一点，我可以创建具有不同名称的相同 gif 的副本。有点笨拙的方式，但只要地图上没有很多图像是可行的

添加一个 GET 变量（什么都不做），例如 nonclumsy.gif?1 / nonclumsy.gif?2 / nonclumsy.gif?3 将帮助您复制 gif。仍然不是很好，因为浏览器会单独下载，但如果不是数千个......

可以从 store_id 旋转吗？如果在地图上加载超过 10 个标记，则重复图像不好

【参考方案2】：

另一种方法是使用Custom Overlay。

    .
    .
    var overlay = new google.maps.OverlayView();
    overlay.draw = function() 
        this.getPanes().markerLayer.id = 'markerLayer';
    
    overlay.setMap(map);
    .
    .
    var deg = 270;
    document.querySelector("#markerLayer img").style.transform = 'rotate(' + deg + 'deg)';
    .

请参阅此demo pen 以获得更清晰的信息。