使用html2canvas捕获图像后无法加载Google地图

Question

我想使用html2canvas捕获Google地图图像，但问题是当我捕获图像时，除了方向我看不到Google地图。 有人可以帮我这个忙。下面是参考图片，我也附上了代码。

function getScreenShot() {

      html2canvas(document.querySelector("#map")).then(canvas => {

      var img = canvas.toDataURL();
      window.open(img);
      height=height,
      width=width

  });
 }

拍摄图像之前。

捕获图像后。

Answer 1

为什么不使用Google地图的staticmap概念？ 使用staticmap，您可以轻松创建图像。 您可以看到以下功能。

  function getScreenShot() {
    //google static map url
    var staticM_URL = "https://maps.googleapis.com/maps/api/staticmap";

    //Set the Google Map Center.
    staticM_URL += "?center=" + mapOptions.center.lat() + "," + mapOptions.center.lng();

    staticM_URL  += "&size=520x650";  //Set the Google Map Size. 

    staticM_URL  += "&zoom=" + mapOptions.zoom;  //Set the Google Map Zoom. 

    staticM_URL  += "&maptype=" + mapOptions.mapTypeId;//Set the Google Map Type.

    //Loop and add Markers.
    for (var i = 0; i < markers.length; i++) {
        staticM_URL  += "&markers=color:red|" + markers[i].lat + "," + markers[i].lng;
    }

   window.open(staticM_URL);
}

一些参考网址将为您提供帮助。 https://staticmapmaker.com/google/ https://www.aspsnippets.com/Articles/Take-Screenshot-Snapshot-of-Google-Maps-using-JavaScript.aspx