javascript - html2canvas no funciona con Google Maps Pan

google-maps

Question

Estoy usando html2canvas para guardar mi mapa en línea como una imagen (vea el enlace Guardar como imagen). Lo he probado en Firefox, Chrome y Opera.

Tiende a funcionar más a menudo si no modifica el mapa predeterminado. Si hace zoom y luego desplaza el mapa, es menos probable que funcione. El mapa se desplazará, pero html2canvas usará el punto central anterior y los límites del mapa. Y html2canvas no podrá cargar mosaicos de mapas para los nuevos límites del mapa.

El mapa se desplaza correctamente, pero html2canvas utiliza el punto central antiguo y los límites del mapa. ¿Por qué es esto?

Para admitir la obtención de imágenes de diferentes dominios, tengo la configuración:

useCors: true;

He intentado las siguientes soluciones

-Cambiando manualmente el tipo de mapa. A veces esto lo arregla.

-Trigger el evento de cambio de tamaño del navegador - no es útil.

-Utilizando setTimeout () para esperar 2000 ms para asegurarse de que los mosaicos estén cargados, no es útil

-Utilizar un proxy (html2canvas_proxy_php.php) - no es útil

-Utilizando el evento inactivo de google maps para esperar a que el mapa esté inactivo antes de guardar, no es útil

Answer 1

Aparentemente, el problema parece deberse a que html2canvas no puede procesar transformaciones CSS, al menos en Chrome (solo pude reproducir el problema en Chrome, en OSX). El contenedor que contiene los mosaicos, se traduce mediante -webkit-transform . Entonces, lo que podríamos hacer es tomar los valores que el contenedor está desplazado, eliminar la transformación, asignar la left y la top de los valores que obtuvimos de la transform luego usar html2canvas . Entonces, para que el mapa no se rompa, restablecemos los valores css del mapa cuando se realiza html2canvas .

Así que pegué esto en la consola de javascript de su sitio y al parecer funcionó.

//get transform value
var transform=$(".gm-style>div:first>div").css("transform")
var comp=transform.split(",") //split up the transform matrix
var mapleft=parseFloat(comp[4]) //get left value
var maptop=parseFloat(comp[5])  //get top value
$(".gm-style>div:first>div").css({ //get the map container. not sure if stable
  "transform":"none",
  "left":mapleft,
  "top":maptop,
})
html2canvas($(''#map-canvas''),
{
  useCORS: true,
  onrendered: function(canvas)
  {
    var dataUrl= canvas.toDataURL(''image/png'');
    location.href=dataUrl //for testing I never get window.open to work
    $(".gm-style>div:first>div").css({
      left:0,
      top:0,
      "transform":transform
    })
  }
});

Answer 2

Después de que una actualización de Google Maps la solución de mfirdaus deje de funcionar, la nueva solución es esta:

var transform = $(".gm-style>div:first>div:first>div:last>div").css("transform")
var comp = transform.split(",") //split up the transform matrix
var mapleft = parseFloat(comp[4]) //get left value
var maptop = parseFloat(comp[5])  //get top value
$(".gm-style>div:first>div:first>div:last>div").css({ //get the map container. not sure if stable
  "transform": "none",
  "left": mapleft,
  "top": maptop,
})

es el mismo pero necesitas cambiar el selector de

.gm-style>div:first>div

a

.gm-style>div:first>div:first>div:last>div

Manos arriba 🙂

Answer 3

Tengo el mismo problema, pero utilicé Leaflet Map en lugar de Google Map.

El codigo esta abajo

var transform=$(".leaflet-map-pane").css("transform");
if (transform) {
    var c = transform.split(",");
    var d = parseFloat(c[4]);
    var h = parseFloat(c[5]);
    $(".leaflet-map-pane").css({
        "transform": "none",
        "left": d,
        "top": h
    })
}           


html2canvas(document.body).then(function(canvas){
    $(".leaflet-map-pane").css({
        left: 0,
        top: 0,
        "transform": transform
    })
   }
// Here is used html2canvas 1.0.0-alpha.9