Question

我想我在这里已经过了头，但我已经接近完成所以我希望你能帮我一臂之力。

我制作了一个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>

Answer 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);
    });

});

打印和许多谷歌地图（api）

1 个答案: