ein .gif Bild auf Google Maps API v3 drehen?

Question

Ich finde viele Antworten auf diese Frage, aber nicht eine, die funktioniert, wenn .gif Bilder und nicht Markierungen. So verwenden GIF-Bilder (und auch animierte GIFs) Ich verwende Code (das funktioniert)

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

// für alle, die nicht verwendet .gif hat, die Zeile 'optimiert: false' ist entscheidend

Was Ich möchte jetzt das GIF-Bild drehen (um einen bestimmten Winkel, nicht eine Konstante drehen [das kann ich als animiertes GIF tun]). Ungeachtet dessen, dass ich die ID für das Image mit 'store_id: mkrID', 'var mkrid' vorher erstellt habe, und ich kann es mit dem Code 'marker.get' ('store_id') zurücklesen, damit ich weiß, dass es gesetzt wurde. Ich kann nicht auf das Bild mit document.getElementById zugreifen. Noch kann ich irgendeinen der google maps API rotate eample Code zur Arbeit bekommen. Beispiele, die ich finde, scheinen für v2 zu sein oder beziehen sich auf Google Maps eigene Markierungen, nicht benutzerdefinierte Bilder mit einem gif.

Kann jemand ein gif Bild in einer Google Map drehen?

Answer 1

Die Eigenschaft "store_id" des Markers gibt Ihnen keinen Zugriff auf das DOM-Element, das das Bild enthält. Wenn Sie ein einzigartiges Symbol für jeden Marker haben, können Sie es mit der URL mit JQuery greifen, gilt dann eine CSS, um es umzuwandeln:

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

Hinweis: dies funktioniert nur für Markierungen mit optimized: false

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

Code-Schnipsel:

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>