2010-02-03 3 views
6

Я использую API Карт Google v2, и я хотел бы иметь возможность распечатывать карту так же, как Google, на странице своих Карт.Как просматривать Карты Google в режиме «печати»?

Вы можете щелкнуть значок маленького принтера и создать новое всплывающее окно с одной и той же картой, но все непечатные материалы (например, элементы управления) будут удалены. Я знаю, что они используют @media print для достижения этого эффекта, когда вы нажимаете «Предварительный просмотр» или «Печать» в навигаторе. Однако всплывающее окно не находится в режиме печати.

Есть ли способ сделать магический трюк, который они выполняют, например, установить текущий тип носителя для «печати»? Или или они обманывают и настраивают собственный стиль CSS?

У меня есть плагин Silverlight и карта Google на той же странице, и я хочу создать всплывающее окно, содержащее только карту, готовую к печати (например, Google).

Благодаря http://abcoder.com/google/google-map-api/print-button-for-google-map-api/ Я знаю, как получить содержимое HTML, но я могу получить контент со всеми элементами управления и т. Д. На нем (чего я не хочу).

Любая помощь будет оценена по достоинству.

ответ

6

Google карты поставить класс gmnoprint на всех элементах, которые они не хотят печатать .. поэтому установка это display:none в вашей печати файла CSS или всплывающего окна будет скрывать их ..

.gmnoprint{ 
    display:none; 
} 

Of'course это скроет то, что считает Google, как не для печати. ​​Если вы хотите выбрать другие элементы, вам придется как-то разобрать их код html :(

+0

Да, я, наконец, заметил это сам, играя с инструментами разработчика в IE. Я добавил стиль, и он работает так, как ожидалось :) – R4cOON

+0

Спасибо за помощь, это было частью того, что мне нужно. Он показал карту, но полилинии, которые у меня на ней, по-прежнему скрыты, любые идеи о том, как их показать? – MikeSchem

1

Другим полезным подходом к печати карт Google является использование Google Static Maps API. может генерировать статическое изображение на основе диапазона параметров отображения (местоположение, уровень масштабирования, размер, маркеры и т. д.) и включить это изображение на страницу просмотра печати.

+1

Это не вариант для меня. У меня есть множество пользовательских надписей на карте, и я не совсем понимаю, как дублировать логику создания, чтобы иметь возможность печатать, в то время как у меня очень хорошее изображение карты. – R4cOON

+0

Достаточно справедливо: P ... Ограничение статического API - это то, что вы не можете выполнять все пользовательские маркеры и т. Д. Итак, если у вас много наложений, не подходит для вас. +1 на вопрос, хотя :) – RedBlueThing

3

У меня была такая же проблема с пользовательским наложением изображения карты, добавленным через kml. Ключевым моментом стал гейппинг-гейппинг Gaby. В моем случае div с применяемым классом gmnoprint был прямым родителем моего элемента img, который исчезал. Я в основном создал "сделать наложение печати ссылки":

$("#printable-map").click(function() { 
     if($(this).text() == "Include overlay when printing") { 
      $(this).text("Exclude overlay when printing"); 
      $("[src$=blah.png]").parent().removeClass("gmnoprint"); 
     } else { 
      $(this).text("Include overlay when printing"); 
      $("[src$=blah.png]").parent().addClass("gmnoprint"); 
     } 
    }); 

протестирован и работает в Safari, FF и Chrome.

Смежные вопросы