【问题标题】:Print the google map with the markers用标记打印谷歌地图
【发布时间】:2018-02-08 03:55:28
【问题描述】:

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

这是我迄今为止尝试过的代码。我不确定我在哪里做错了。

<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>

【问题讨论】:

    标签: javascript php google-maps google-maps-api-3


    【解决方案1】:

    恐怕 Google Maps JavaScript API 不支持打印。请查看 Google 地图常见问题解答中的以下答案:

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

    上面写着

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

    根据常见问题解答和您的代码示例,我认为您应该生成以下静态地图 URL 并打印结果图像

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

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

    我希望这会有所帮助!

    【讨论】: