Экспорт слоя карты Google Map в формате PDF

Я реализовал тепловую карту на карте Google, используя API javascript карты Google. Вы можете увидеть следующий раздел кода.

  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. Я надеюсь, что это решение.


google-maps javascript pdf export heatmap
person Sandun Priyanka    schedule 20.07.2016    source источник
comment
У меня может быть одно предложение: посмотреть, сможете ли вы каким-то образом получить данные изображения base64 для этой тепловой карты. Затем возьмите этот base64 и используйте jdPDF для его рендеринга в PDF.   -  person Daniel Jamrozik    schedule 20.07.2016
comment
На самом деле не обращайте внимания на мой комментарий выше, это, вероятно, стратегия, которой вы будете следовать, когда вы конвертируете html в pdf (вы также можете сделать это с помощью jsPDF): htmlpdfapi.com/blog/export_google_map_to_pdf   -  person Daniel Jamrozik    schedule 20.07.2016

Ответы (2)


arrow_upward
1
arrow_downward

Надеюсь, вы можете использовать следующие способы решения вашей проблемы.

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

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

  3. API изображения карты Google: https://developers.google.com/maps/documentation/imageapis/< /а>

person Anushka Ekanayake    schedule 21.07.2016

arrow_upward
1
arrow_downward

Я нахожу решение своего вопроса. Мне нравится делиться со всем сообществом. В основном я использую две библиотеки JavaScript. Это jsPDF и html2canvas. jsPDF используется для рендеринга PDF путем размещения текста, изображений. и библиотека html2canvas используется для создания объекта холста путем выбора элемента jquery в html. мы также можем создать объект холста, выбрав тег 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, но есть проблема с рендерингом маркеров на карте Google в PDF. Мы можем найти решение на этом ССЫЛКА. Пожалуйста, поделитесь любым хорошим решением для экспорта маркеров Google также в PDF.

person Sandun Priyanka    schedule 23.07.2016