打印和大量谷歌地图（api）答案

【问题标题】：Printing and lots of google maps (api)打印和大量谷歌地图（api）
【发布时间】：2015-05-26 08:44:11
【问题描述】：

我想我在这里不知所措，但我已经快要完成了，所以我希望你能帮我一把。

我制作了一个 Web 应用程序来处理某个活动的邀请。它管理邀请并将人们聚集在一起，并安排所有需要发送给每个参与者的信件以及活动说明。

在最好的情况下，我希望这封信还包含一个谷歌地图，它将参与者引导到事件的正确地址（地址不是固定的，但会根据参与者和时间而变化）。

我用一个可打印的网页创建了这些字母，该网页生成了大约 180 页。谷歌地图正在工作，但方向在大约 15-20 页后停止，只显示瑞典的图片。

下面的示例代码已简化，但会产生相同的问题。任何提示我可以做些什么来正确绘制所有 180 张地图？加载整个页面需要 1 分钟对我来说并不重要。

（我用小提琴做错了，所以它不会在下面迭代，但你明白了）

$(document).ready(function() {

  $maps = $('.googleMap');
  $maps.each(function(index, Element) {

    $infotext = $(Element).children('.infotext');
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var map;

    directionsDisplay = new google.maps.DirectionsRenderer();

    var begin = new google.maps.LatLng(60.216667, 16.333333);
    var mapOptions = {
      zoom: 6,
      center: begin 
    }

    map = new google.maps.Map(Element, mapOptions);
    directionsDisplay.setMap(map);

    var start = $infotext.children('.address_start').text() + ', ' + $infotext.children('.city_start').text() + ', ' + $infotext.children('.zip_start').text() + ', ' + $infotext.children('.country_start').text();
    var end = $infotext.children('.address_end').text() + ', ' + $infotext.children('.city_end').text() + ', ' + $infotext.children('.zip_end').text() + ', ' + $infotext.children('.country_end').text();

    var request = {
      origin: start,
      destination: end,
      optimizeWaypoints: false,
      travelMode: google.maps.TravelMode.BICYCLING
    };

    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        var route = response.routes[0];
      }
    });
  });
});

body {
  font-family: "Open Sans", sans-serif;
  font-size: 13px;
  line-height: 1.62em;
}
.page {
  width: 210mm;
  min-height: 297mm;
  padding: 20mm;
  margin: 10mm auto;
  border: 1px #D3D3D3 solid;
  border-radius: 5px;
  background: white;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.pageHeader {
  margin-bottom: 150px;
}
.pageMark {
  float: right;
  font-size: 0.8em;
}
@page {
  size: A4;
  margin: 0;
}
@media print {
  html,
  body {
    width: 210mm;
    height: 297mm;
  }
  .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js"></script>

<body>
  <?php for($i=0;$i<20;$i++){ ?>
  <div class="page">
    <div style="width:100%;height:500px;" class="googleMap">
      <div class="infotext">
        <div class="city_start">Stockholm</div>
        <div class="country_start">Sverige</div>
        <div class="city_end">Göteborg</div>
        <div class="country_end">Sverige</div>
      </div>
    </div>
  </div>
  <br>
  <?php } ?>
</body>

【问题讨论】：

标签： javascript php jquery google-maps google-maps-api-3

【解决方案1】：

Google 不喜欢您在短时间内多次查询他们的服务器。他们将您的速率限制为每秒不超过 10 个请求。 Check out their usage limits

使用您的代码，您几乎可以同时获取每张地图的路线。

试试这个有效的JsFiddle（至少对我来说有效）

我会将查询限制为每 1 到 5 秒 1 次。在我的示例中，我在请求之间等待 2 秒。

这是您的更新代码：

$(document).ready(function() {

    // Set the time to wait between requests
    var increment = 2000;

    // Added this line to keep track of the timeout
    var timeout = 0;

    $maps = $('.googleMap');
    $maps.each(function (index, Element) {

        // Add more timeout
        timeout += increment;

        // Set a timeout before we initialize each map
        setTimeout(function () {

            $infotext = $(Element).children('.infotext');
            var directionsDisplay;
            var directionsService = new google.maps.DirectionsService();
            var map;

            directionsDisplay = new google.maps.DirectionsRenderer();

            var begin = new google.maps.LatLng(60.216667, 16.333333);
            var mapOptions = {
                zoom: 6,
                center: begin
            }

            map = new google.maps.Map(Element, mapOptions);
            directionsDisplay.setMap(map);

            var start = $infotext.children('.address_start').text() + ', ' + $infotext.children('.city_start').text() + ', ' + $infotext.children('.zip_start').text() + ', ' + $infotext.children('.country_start').text();
            var end = $infotext.children('.address_end').text() + ', ' + $infotext.children('.city_end').text() + ', ' + $infotext.children('.zip_end').text() + ', ' + $infotext.children('.country_end').text();

            var request = {
                origin: start,
                destination: end,
                optimizeWaypoints: false,
                travelMode: google.maps.TravelMode.BICYCLING
            };

            directionsService.route(request, function (response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                    var route = response.routes[0];
                }
            });
        }, timeout);
    });

});

【讨论】：