Export google map Heatmap-Schicht als PDF

Question

ich eine Heatmap auf der Google-Karte mit google map implementiert haben Javascript API.You den Codeabschnitt

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

folgende sehen Dies ist Momentaufnahme der Heatmap Schicht,

Aber die Sache ist, ich möchte Heatmap-Layer als Bild oder PDF exportieren. Ich hoffe eine Lösung dafür.

Answer 1

Ich finde Lösung für meinen question.I gerne mit allen Community teilen .basischerweise verwende ich zwei JavaScript-Verbindungen. Sie sind jsPDF und html2canvas. jsPDF wird zum Rendern von PDFs verwendet, indem Text, Bilder platziert werden. und die html2canvas-Bibliothek verwendet, um ein canvas-Objekt zu erstellen, indem jquery-Element in html ausgewählt wird. Wir können Canvas-Objekte erstellen, indem wir auch div-Tags auswählen. bitte gehen Sie durch folgende Schritte

<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 Script-Code

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

In diesem Fall sind wir Heatmap machen können und Karte in pdf aber es gibt Problem Markierungen auf Rendering auf google map in PDF. Wir können Lösung auf diesem LINK finden. Bitte teilen Sie eine gute Lösung, um Google-Marker auch in PDF zu exportieren

Answer 2

Ich hoffe, Sie können folgende Möglichkeiten nutzen, um Ihr Problem zu lösen.

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

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

3. google map Bild api: https://developers.google.com/maps/documentation/imageapis/