在谷歌地圖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注意，該生產線的優化：假「是關鍵

什麼我現在要做的是旋轉gif圖像（到一個特定的角度，而不是一個不斷的旋轉[我可以做動畫gif]）。儘管爲'image_id：mkrID'設置了圖片的ID，但之前創建了var mkrID，並且我可以使用代碼marker.get（'store_id'）讀取它，所以我知道它已被設置。我無法使用document.getElementById訪問圖像。我也無法獲得任何谷歌地圖API旋轉示例代碼。我發現的例子似乎是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

工作

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

代碼片段：

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>