Question

我使用谷歌地图javascript API在谷歌地图上实施了热图。您可以看到以下代码部分

  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。我希望能找到解决方案。

Answer 1

希望您可以使用以下方法解决问题。

html2canvas：http://html2canvas.hertzen.com/
jsFeedback：http://experiments.hertzen.com/jsfeedback/
google map image api：https://developers.google.com/maps/documentation/imageapis/

Answer 2

我找到了我的问题的解决方案。我想与所有社区分享。基本上我使用两个JavaScript liabries。他们是jsPDF和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 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');
            }
        });

在这种情况下，我们可以渲染热图并映射到pdf 但是将谷歌地图上的标记渲染成PDF有问题。我们可以在LINK找到解决方案。请分享任何好的解决方案，将谷歌标记导出为PDF

将Google地图热图图层导出为PDF格式

2 个答案: