javascript - rotar una imagen.gif en google maps api v3?

google-maps-api-3 rotation

Question

Encuentro muchas respuestas sobre esta pregunta, pero no una que funcione cuando se usan imágenes .gif y no marcadores. Para usar imágenes .gif (y también gifs animados), uso el código (que funciona)

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

// para cualquiera que no haya usado .gif, la línea ''optimizado: falso'' es crítica

Lo que quiero hacer ahora es rotar la imagen gif (a un ángulo específico, no una rotación constante [que puedo hacer como gif animado]). Displice la configuración de la ID de la imagen con ''store_id: mkrID'', se creó anteriormente var mkrID y puedo leerlo de nuevo con el código marker.get (''store_id'') para saber que se ha configurado. No puedo acceder a la imagen con document.getElementById. Tampoco puedo obtener ninguno de los códigos de Google API API rotar eample para que funcione. Los ejemplos que encuentro parecen ser para v2 o se relacionan con marcadores propios de Google Maps, no con imágenes personalizadas que usan un gif.

¿Alguien ha podido rotar una imagen gif en un mapa de google?

Answer 1

La propiedad "store_id" del marcador no le da acceso al elemento DOM que contiene la imagen. Si tiene un ícono único para cada marcador, puede tomarlo usando su URL con JQuery, luego aplicarle una transformación CSS:

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

Nota: esto solo funcionará para marcadores con optimized: false

• violín de prueba de concepto
• prueba de concepto violín girando una imagen .png

fragmento de código:

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>

Answer 2

Otra forma de hacerlo es usar Superposición personalizada .

    .
    .
    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)'';
    .

Vea esta pluma de demostración para más claridad.