Javascript 打印两张谷歌地图_Javascript_Css_Google Maps_Printing

Javascript 打印两张谷歌地图

javascript css google-maps printing

Javascript 打印两张谷歌地图,javascript,css,google-maps,printing,Javascript,Css,Google Maps,Printing,我有一个带有两个谷歌地图的简单页面。它们位于两个DIV元素中。之后有一个分页符：始终在第一个DIV上。它在屏幕上看起来不错，但打印不正确。第二张谷歌地图有一个奇怪的变形。就好像第二张地图上的第二排地图分幅忘记了它所属的位置。它实际上在IE11中打印得很好，但在IE9或chrome中打印得不好 <!DOCTYPE html> <html> <title>Google Maps API v3 - Two maps</title>

我有一个带有两个谷歌地图的简单页面。它们位于两个DIV元素中。之后有一个分页符：始终在第一个DIV上。它在屏幕上看起来不错，但打印不正确。第二张谷歌地图有一个奇怪的变形。就好像第二张地图上的第二排地图分幅忘记了它所属的位置。它实际上在IE11中打印得很好，但在IE9或chrome中打印得不好

    <!DOCTYPE html>
    <html>
    <title>Google Maps API v3 - Two maps</title>
    <head>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
    </script>

    <script type='text/javascript'>//<![CDATA[ 
    function initialize()
    {
        var latlng = new google.maps.LatLng(18.520266,73.856406);
        var latlng2 = new google.maps.LatLng(28.579943,77.330006);
        var myOptions =
        {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var myOptions2 =
        {
            zoom: 15,
            center: latlng2,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var map2 = new google.maps.Map(document.getElementById("map_canvas_2"), myOptions2);

        var myMarker = new google.maps.Marker(
        {
            position: latlng,
            map: map,
            title:"Pune"
       });

        var myMarker2 = new google.maps.Marker(
        {
            position: latlng2,
            map: map2,
            title:"Noida"
        });
    }
    //]]>  

    </script>
    </head>
    <body onload="initialize()">
<div id="map_canvas" style="top: 10px; left: 25px; width:800px; height:600px;page-break-after:always"></div>
<div id="map_canvas_2" style="top: 10px; left: 25px; width:800px; height:600px"></div>


    </body>
    </html>

我做了一个JSFIDLE，看起来效果不错。你能检查一下吗？我不认为JS fiddle会起作用-它与打印有关。问题是，它在屏幕上看起来不错，但无法从谷歌Chrome或IE9上正确打印。起初看起来不错，但如果仔细观察，您会注意到第二个贴图已扭曲。