无法使用html2canvas将Google Map转换为图像 [英] Cannot convert google map to image using html2canvas

问题描述

我尝试使用hml2canvas将google map转换为图像.但这并没有帮助我.我有一个空的png文件.请帮忙.

I tried to convert google map to image using hml2canvas. But it didn't help me. I got an empty png file. Please help.

我尝试了几种解决方案，但对我没有用 https://github.com/niklasvh/html2canvas/issues/145#issuecomment- 11449761 http://jsfiddle.net/Behseini/j17mwmjm/

I tried few solutions but it didn't work for me https://github.com/niklasvh/html2canvas/issues/145#issuecomment-11449761 http://jsfiddle.net/Behseini/j17mwmjm/

我无法使用Google静态API，因为我从kml文件生成了Google地图，并且坐标超过了GET Url限制.

I'm not able to use google static API because I generate google map from kml file and have lot of coordinates which exceeds the GET Url limits.

    <div id="map-canvas" style="height: 500px;"></div>
    <div id="maptoimage"><img id="imagemap" src="" /></div>
     <script>
        html2canvas($("#map-canvas"), {
        seCORS: true,
        onrendered: function(canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);

            // Convert and download as image 
            Canvas2Image.saveAsPNG(canvas);
            // to show the generated image in div
            $("#maptoimage").append(canvas);
            // Clean up 
            //document.body.removeChild(canvas);
        }
     });
     </script>

Google地图已加载到地图画布div中.

The google map is loaded in map-canvas div.

推荐答案

这是一个工作代码段，通过该代码段，我可以获取有效且可读的PNG文件，并带有适当的.png扩展名和自定义文件名.

Here is a working code snippet with which I get a valid and readable PNG file with the appropriate .png extension and a custom filename.

function initMap() {

  var map;
  var latlng = new google.maps.LatLng(49.241943, -122.889318);
  var myOptions = {
    zoom: 12,
    center: latlng,
    disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
}

function saveAs(uri, filename) {

  var link = document.createElement('a');

  if (typeof link.download === 'string') {

    link.href = uri;
    link.download = filename;

    //Firefox requires the link to be in the body
    document.body.appendChild(link);

    //simulate click
    link.click();

    //remove the link when done
    document.body.removeChild(link);
  } else {
    window.open(uri);
  }
}

$(function() {
  $("#btnSave").click(function() {
    html2canvas($("#map-canvas"), {
      useCORS: true,
      onrendered: function(canvas) {
        saveAs(canvas.toDataURL(), 'my-cool-filename.png');
      }
    });
  });
});

#map-canvas {
  height: 150px;
  width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map-canvas"></div>

<script src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>

<script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script>

<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

<input type="button" id="btnSave" value="Save PNG" />

这篇关于无法使用html2canvas将Google Map转换为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！