打印和大量Google地图（API）
[英]Printing and lots of google maps (api)
问题描述
I think I'm in over my head here but I'm so close to finish so I hope you can give me a hand. 
我想我在这里很忙，但是我已经快要完成了，所以希望您能帮上忙。
I made a web application to deal with invitations for an event. 我制作了一个Web应用程序来处理活动邀请。 It manages the invitations and clusters people together and also arranges all the letters that needs to be sent out to each participent with event instructions. 它管理邀请，将人们聚集在一起，并安排所有需要发送给每个参与者的信件以及活动说明。
In the best scenario I would like to have the letter also contain a google map which directs the participent to the correct address of the event (address is not fixed but changes depending on participent and time). 在最好的情况下，我想让这封信还包含一个Google地图，该地图将参与者分配到事件的正确地址（地址不是固定的，而是取决于参与者和时间）。
I create the letters with a printable web page which generates about 180 pages. 我用可打印的网页创建字母，该网页可生成约180页。 The google maps are working but the directions stop after about 15-20 pages and just show a picture of sweden. 谷歌地图正在工作，但方向在大约15-20页后停止，仅显示瑞典的图片。
Example codes below is simplified but generates same problem. 下面的示例代码已简化，但会产生相同的问题。 Any hints what i could do to get all 180 maps to draw correctly? 任何提示我该怎么做才能正确绘制所有180张地图？ It doesnt matter for me if it takes 1 min to load the entire page. 对我来说，是否需要1分钟来加载整个页面并不重要。
(I'm doing somthing wrong with fiddle so it doesnt iterate below but you get the point) （我正在用小提琴做一些错误的事情，因此它不会在下面重复，但是您明白了）
$(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>
1 个解决方案
解决方案1
0 已采纳 2015-05-26 10:58:11
Google doesn't like it when you query their server too many times in a short period of time. 当您在短时间内查询其服务器太多次时，Google不喜欢它。 They rate limit you to no more than 10 requests per second. 他们将您的速率限制为每秒不超过10个请求。 Check out their usage limits 查看其使用限制
With your code, you are trying to get directions for every single map at pretty much the same time. 使用您的代码，您几乎同时尝试获取每张地图的路线。
Try this JsFiddle that works (at least for me it does) 试试这个有效的JsFiddle （至少对我来说有用 ）
I would limit my queries to 1 every 1 to 5 seconds. 我将查询限制为每1至5秒1次。 In my example, I wait 2 seconds between requests. 在我的示例中，两次请求之间等待2秒。
Here is your updated code: 这是您更新的代码：
$(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);
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.