Question

我试图打印包含谷歌地图和一些标记的页面。我在互联网上发现了如何打印页面。但它只打印谷歌地图而不是地图内的标记。

这是我到目前为止尝试过的代码。我不确定我错在哪里。

<body>
    <div class="container">
        <div id="button-container">
            <a href="#" id="PrintDiv" class="btn btn-success btn-primary"><span class="glyphicon glyphicon-print" aria-hidden="true"></span>Print</a>
        </div>

        <div id="map"></div>
    </div>
</body>
<script type="text/javascript">
$(function(){
    $('#PrintDiv').click(function(){
        $(this).hide();
        var contents = document.getElementById("container").innerHTML;
        var frame1 = document.createElement('iframe');
        frame1.name = "frame1";
        frame1.style.position = "absolute";
        frame1.style.top = "-1000000px";
        document.body.appendChild(frame1);
        var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
        frameDoc.document.open();
        frameDoc.document.write('<html><head><title></title>');
        frameDoc.document.write('</head><body>');
        frameDoc.document.write(contents);
        frameDoc.document.write('</body></html>');
        frameDoc.document.close();
        return false;
    })
})
var beaches = [
    ["Place A", 21.984606, 89.974250],
    ["West Bengal", 21.681855, 88.584980],
    ["Sea Beach", 21.617401, 87.500898]
];
var markers = [];
var map; //set scope here so various functions can use them

function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 2,
        center: new google.maps.LatLng(beaches[0][1], beaches[0][2]),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();
    var marker, i;
    for (i = 0; i < beaches.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
            map: map
        });
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(beaches[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
        markers.push(marker);
    }

}
</script>

Answer 1

我担心Google Maps JavaScript API不支持打印。请在Google地图常见问题解答中查看以下答案：

https://developers.google.com/maps/faq#print

它读取

不支持从JavaScript API打印。这是因为在常用浏览器中打印支持不一致。我们建议您使用Static Maps API进行打印。

根据常见问题解答和您的代码示例，我相信您应该生成以下静态地图网址并打印生成的图像

https://maps.googleapis.com/maps/api/staticmap?size=800x800&maptype=roadmap&markers=label%3A1%7C21.984606%2C89.974250&markers=label%3A2%7C21.681855%2C88.584980&markers=label%3A3%7C21.617401%2C87.500898&key=YOUR_API_KEY

＆＃13;

<img src="https://maps.googleapis.com/maps/api/staticmap?size=800x800&maptype=roadmap&markers=label%3A1%7C21.984606%2C89.974250&markers=label%3A2%7C21.681855%2C88.584980&markers=label%3A3%7C21.617401%2C87.500898&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&signature=wwmJyiXitiZNdkisy3P4qsRKj64=" />

＆＃13;

我希望这有帮助！

使用标记打印谷歌地图

1 个答案: