Центр Google Maps (V3) в браузерной печати

Question

У меня карта установлена ​​на 100% ширины страницы. Карта имеет один маркер и центрирована на этом маркере. Когда я печатаю браузер, я хочу, чтобы карта оставалась в центре маркера. Вот код, который я написал для этого:

var lastPos = map.getCenter();
google.maps.event.addListener(map, "idle", function() {
  lastPos = map.getCenter();
  console.log(lastPos.toString());
});      

google.maps.event.addDomListener(window, "resize", function() {
  google.maps.event.trigger(map, "resize"); 
  map.setCenter(lastPos);
  console.log("Re-center on " + lastPos.toString());
});

Это работает, когда я изменяю размер моего браузера, но не работает, когда браузер изменяет размеры перед печатью. Если размер моего браузера превышает определенную ширину, маркер полностью смещается за пределы страницы (вправо) при печати карты.

Вот мой тестовый пример: http://www -sf.talispoint.com / testmapprint.html

Answer 1

Вам нужно будет добавить @media отпечаток и указать размер карты при печати, а затем вы можете сделать то, что объясняется ниже.

При печати карты происходит то, что в левом верхнем углусохраняется, и карта настраивается в соответствии с размером печати @media.

Если вы хотите, чтобы центр оставался неизменным, вам нужно вручную изменить центр карты.http://jsbin.com/owiwox/33 - пример того, как обойти это.

Он использует прослушиватель для события применяемого материала для печати и корректирует центр карты, используя отношение изменения карты (стало меньше)

Одна вещь, о которой вам нужно позаботиться, это то, что вам, возможно, придется настроить этот браузер так, чтобы он работал на всех браузерах (это решение хорошо работает в Chrome). Хороший ресурс для того, чтобы заставить его работатьво всех браузерах: http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

Код js из приведенного выше примера прослушивает запросы на печать и сдвигает карту так, чтобы верхний левый угол имел тот же центр, что и большая карта.

Короче говоря, вот как это работает.

1. Вам необходимо указать соотношение карты к печатной карте (или получить размер, проверивэто из JS) Вы назначаете это: var widthRatio = 2;var heightRatio = 3;

2. Вы прослушиваете применяемый материал для печати и смещаете центр, чтобы он не менялся

3. После завершения печати вы отменяете изменение.

Тем не менее, здесь у вас есть проблема с тем, что часть карты будет обрезана, но здесь нет хорошего решения, так как плитки уровня масштабирования -1 могут не кэшироваться, поэтому при уменьшении масштабачтобы соответствовать границам, вы можете не получить плитки.

Answer 2

Кажется, проблема с вашим "печатью" или "принтером".

Я сделал тест:

1. загрузить тестовую карту и сделать браузер очень широким

2. Предварительный просмотр и увидел проблему, которую вы описали

3. Но: я могу изменить масштаб печати с «Shrint to fit» (по умолчанию для IE и FF) на 30% и смог распечатать карту, как видно на экране.

Другая мысль:

Вы можете попробовать использовать другой CSS для печати, чтобы ограничить ширину div карты, но я не уверен, что это сначала вызовет изменение размера карты (вы можете обратиться к этому сообщению: Обработчик событий Javascript для печати )