導出谷歌地圖的熱圖的層PDF

Question

我已經使用谷歌地圖實現的谷歌地圖上的熱圖的javascript API.You可以看到代碼段以下

function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 14, 
      center: {lat: -33.865143, lng: 151.209900}, // longitude and latitude of initial map center point 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      minZoom:4 
     }); 
     setupHeatMapData(); 
    } 
function setupHeatMapData(){ 
     heatmap = new google.maps.visualization.HeatmapLayer({ 
      data: heatmapdata, 
     }); 
     heatmap.setMap(map); 
} 

這是熱圖層的快照，

但事情是，我想導出熱圖層作爲圖像或PDF.I希望爲此提供解決方案。

Answer 1

我找到我的question.I解決方案與所有社區分享基本上我使用兩個JavaScript聯繫人，分別是jsPDF和html2canvas。 jsPDF用於通過放置文本，圖像來呈現pdf。和html2canvas庫通過選擇html中的jquery元素來創建畫布對象。我們也可以通過選擇div標籤來創建畫布對象。請到通過以下步驟

<div class="row map-containner"><div id="map"></div><div> 

<script src="js/jspdf/jspdf.min.js"></script> 
<script src="js/jspdf/html2canvas.min.js"></script> 

// JAVA腳本代碼

 var element = $('#map'); 
     var pdfOptions = { 
      orientation: "landscape", // One of "portrait" or "landscape" (or shortcuts "p" (Default), "l") 
      unit: "mm",    //Measurement unit to be used when coordinates are specified. One of "pt" (points), "mm" (Default), "cm", "in" 
      format: "legal"   //One of 'a3', 'a4' (Default),'a5' ,'letter' ,'legal' 
     }; 

     var doc = new jsPDF(pdfOptions); 

     var pageWidth = doc.internal.pageSize.width-20; 
     var width = pageWidth; 

     html2canvas(element, { 
      useCORS: true, // MUST 
      onrendered: function(canvas) { 
       var imgWidth = element.width(); 
       var imgHeight = element.height(); 

       var height = (pageWidth * imgHeight)/ imgWidth 
       var imgData = canvas.toDataURL(
         'image/png'); 
       doc.addImage(imgData, 'PNG', 10, 30 , width, height); 
       doc.save('heatmap.pdf'); 
      } 
     }); 

在這種情況下，我們可以呈現熱圖和地圖轉換成PDF 但問題在谷歌地圖上繪製的標記我們可以在這個LINK找到解決方案。請分享任何好的解決方案，將Google標記也導出爲PDF

Answer 2

希望您可以使用以下方法解決您的問題。

1. html2canvas：http://html2canvas.hertzen.com/

2. jsFeedback：http://experiments.hertzen.com/jsfeedback/

3. 谷歌地圖圖像API：https://developers.google.com/maps/documentation/imageapis/