将 google 地图热图图层导出为 PDF

Question

我已经在 google 地图上使用 google 地图实现了热图 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

希望您可以通过以下方式解决您的问题。

html2canvas : http://html2canvas.hertzen.com/
js反馈：http://experiments.hertzen.com/jsfeedback/
google 地图图像 api : https://developers.google.com/maps/documentation/imageapis/

Answer 2

我为我的 question.I 找到了解决方案，想与所有人分享 community.basically 我使用两个 JavaScript liabries.They 是 jsPDF and html2canvas。 jsPDF 用于通过放置文本、图像来呈现 pdf。 html2canvas 库用于通过选择 html 中的 jquery 元素来创建 canvas 对象。我们也可以通过选择 div 标签来创建 canvas 对象。请完成以下步骤

<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 但是在将 google 地图上的标记渲染到 PDF.we 上存在问题，可以在此 LINK 上找到解决方案。请分享将 google 标记也导出为 PDF

的任何好的解决方案

将 google 地图热图图层导出为 PDF

Export google map heatmap layer as PDF

javascript

pdf

google-maps

export

heatmap