谷歌地图API v3打印页面出现白线

时间:2017-05-07 16:22:42

标签: javascript html google-maps google-maps-api-3 google-static-maps

我创建了一个包含谷歌地图的页面,我需要打印它,但是地图的某些坐标中出现了一条白线,而不是它出现的所有位置。

Print

HTML代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<title>Google Maps - Teste</title>

<!-- # CSS Imports # -->
<link href="css/site.css" rel="stylesheet">

</head>
<body>
  <div id="map"></div>

<!-- # Javascript Imports # -->
<script src="js/site.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY_GOOGLEMAPS_API&callback=initMap"></script>
</body>
</html>

CSS代码(css / site.css):

#map {
  height: 100%;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
@media print {
  img {
    max-width: none !important;
  }
}

Javascript代码(js / site.js):

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 9,
    center: {
      lat: -27.6301719, 
      lng: -49.0330395
    },
    mapTypeId: 'terrain'
  });
}

编辑1:

我找到了一个解决方案...使用Google Maps Static API,而不是截取相关div的屏幕截图,您可以在其中发送一些参数并返回图像... BUUUUUT请参阅编辑2 ...

https://developers.google.com/maps/documentation/static-maps/?hl=pt-br

编辑2:

谷歌地图静态的URL受到8192个字符的限制,我需要在地图中绘制ALOOOOT线...所以...我回到初始化...

[##抱歉,我的英文不好:(]

0 个答案:

没有答案