javascript - 打印带有标记的谷歌地图-6ren

javascript - 打印带有标记的谷歌地图

转载作者：行者123 更新时间：2023-12-03 02:32:26

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

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

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

最佳答案

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

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

上面写着

Printing from the JavaScript API is not supported. This is because printing support is inconsistent across commonly used browsers. We recommend using the Static Maps API for printing purposes.

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

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

<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=" />

希望这会有所帮助!

关于javascript - 打印带有标记的谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48677278/