谷歌地圖API V3打印地圖

我正在尋找一種方法來高效地打印谷歌地圖，這些谷歌地圖已經在使用谷歌地圖API v3的網站上實現。谷歌地圖API V3打印地圖

我看到有些人只使用window.print JS，然後

@media print 
{ 
    body * { visibility: hidden; } 
    #map * { visibility: visible; } 
    #map {visibility: visible;position:absolute; top: 5px; left: 5px;} 
}

目前較大的地圖顯示用的fancybox用戶，我還增加了打印按鈕了這一點。理想情況下，我只是想添加一些jquery或類似的打印地圖。

但是，這似乎並沒有真正的工作。有沒有人有任何建議，以最好的方式做到這一點

來源

2012-10-24 Purple Hexagon

檢查http://stackoverflow.com/a/11739627/1055987或http://stackoverflow.com/a/11485923/1055987如果有幫助。 – JFK

非常感謝，這很好，很容易。不知道我是如何找到這些帖子的。再次歡呼:) –

我想通過簡單而細微的DOM操作，你可以得到你的谷歌地圖的「快照」（當然，理論上 - 任何地圖:)）瀏覽器，完美在任何瀏覽器中打印。假設$mapContainer是你的地圖的主容器，相關的代碼是：

// printAnyMaps :: 
function printAnyMaps() { 
    const $body = $('body'); 
    const $mapContainer = $('.map-container'); 
    const $mapContainerParent = $mapContainer.parent(); 
    const $printContainer = $('<div style="position:relative;">'); 

    $printContainer 
    .height($mapContainer.height()) 
    .append($mapContainer) 
    .prependTo($body); 

    const $content = $body 
    .children() 
    .not($printContainer) 
    .not('script') 
    .detach(); 

    /** 
    * Needed for those who use Bootstrap 3.x, because some of 
    * its `@media print` styles ain't play nicely when printing. 
    */ 
    const $patchedStyle = $('<style media="print">') 
    .text(` 
     img { max-width: none !important; } 
     a[href]:after { content: ""; } 
    `) 
    .appendTo('head'); 

    window.print(); 

    $body.prepend($content); 
    $mapContainerParent.prepend($mapContainer); 

    $printContainer.remove(); 
    $patchedStyle.remove(); 
}

注意，您可以通過靈活的打印模板替換$printContainer。在這裏我只使用一個簡單的<div>作爲快照的佔位符。

工作代碼在這裏：http://jsfiddle.net/glenn/6mx21ted

來源

2015-11-18 15:58:50

此功能打印正確，但有一個小問題。儘管地圖只能放入一頁，但它正在打印3頁。 –

我試過這個，但是它顯示空白地圖，只顯示Markers – eronax59

@RonakP在JSFiddle或GitHub這樣的地方分享你的代碼，以便更好地理解原因並改進解決方案？ –

在HTML中，#Gmap是你顯示谷歌地圖的div，打印按鈕將調用函數gmapPrint（）一旦被點擊。

<!-- HTML --> 
<div id="Gmap"></div> 
<div onclick="gmapPrint();">Print Button</div>

在JavaScript中，gmapPrint（）函數讀取地圖詳細信息並將其寫入新窗口。然後打印新窗口。

<!-- JS Script --> 
function gmapPrint() { 
    var content = window.document.getElementById("Gmap"); // get you map details 
    var newWindow = window.open(); // open a new window 
    newWindow.document.write(content.innerHTML); // write the map into the new window 
    newWindow.print(); // print the new window 
}

來源

2013-04-25 12:12:13 Jingwen

hi @Jingwen我想打印含有頁面內容的地圖嗎？當我使用window.Print（）打印一個div中的所有文本但無法打印google Map時，我有收據佈局可以在其中打印地圖位置？任何想法？ suggessions？ –

這裏標記不打印 – eronax59

請注意，如果您還使用引導它會破壞地圖打印你。加入該代碼：

@media print { 
    img { 
    max-width: auto !important; 
    } 
}

請參閱Twitter Bootstrap CSS affecting Google Maps。

來源

2016-03-19 01:20:14 tempranova

您可以使用html2canvas.js將地圖div轉換爲canvas元素，然後您可以將其打印爲圖像。下面的代碼工作非常適合我：

HTML

<div id="map" style="width:500px;height:500px;"></div> 
<input type="button" value="Print Map" class="printBtn" />

的JavaScript

var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 13, 
      center: defLocation, 
      mapTypeId: 'satellite', 
      streetViewControl: false 
     });  
$(document).on('click', '.printBtn', function() { 
      map.setOptions({ 
       mapTypeControl: false, 
       zoomControl: false, 
       streetViewControl: false, 
       panControl: false 
      }); 
      var printWin = window.open('', '', 'width=1000,height=700'); 
      var windowContent = '<!DOCTYPE html>'; 

      html2canvas($("#map"), { 
       useCORS: true, 
       onrendered: function (canvas) { 
        windowContent += '<html>' 
        windowContent += '<head><title>Print canvas</title></head>'; 
        windowContent += '<body>' 
        windowContent += '<img src="' + canvas.toDataURL() + '">'; 
        windowContent += '</body>'; 
        windowContent += '</html>'; 
        printWin.document.open(); 
        printWin.document.write(windowContent); 
        printWin.document.close(); 
        printWin.focus(); 
        setTimeout(function() { printWin.print(); printWin.close(); }, 500); 

        map.setOptions({ 
         mapTypeControl: true, 
         zoomControl: true, 
         streetViewControl: true, 
         panControl: true 
        }); 
       } 
      }); 
     });

來源

2017-11-15 07:56:04 Ceyhun

谷歌地圖API V3打印地圖

回答

相關問題