Журнал Компьютерра - 37 от 10 октября 2006 года - Компьютерра Журнал 619 26 стр.


Ну а я, чтя традиции программистского цеха, заложил в последнюю карту незамысловатое «пасхальное яйцо». Думаю, пытливый читатель его отыщет, руководствуясь информацией приспешника Шер-Хана из советского мультфильма «Маугли» о направлении их движения перед нашествием диких собак…

Шаг 3. Точки притяжения

Положим, вы гуляли по городу, стране, миру с GPS и, увидев что-либо примечательное, аккуратно заносили координаты этого места вместе с комментариями… Самое время нанести эти точки на карту!

Для каждой из них надо составить три строчки:

а. Объявить переменную, которой будут присвоены географические координаты метки.

б. Объявить переменную, которая будет указывать на вновь созданный объект-метку.

в. Отобразить метку на карте.

Вот как это выглядит в коде:

1. var Moscow_point = new GLatLng(55.752,37.616);

2. var Moscow = new GMarker(Moscow_point);

3. Map.addOverlay(Moscow);

Но чтобы сделать метку более информативной для посетителей сайта, добавим всплывающую подсказку с ее названием, которая будет отображаться каждый раз при наведении курсора мышки (рис. 2).

1. var Moscow_point = new GLatLng(55.752,37.616);

2. var Moscow = new GMarker(Moscow_point, {title:”Москва”});

3. Map.addOverlay(Moscow);

У созданной нами метки — стандартная иконка, но ее легко заменить своей, оригинальной (например, что-то говорящей о событии):

1. var MoscowIcon = new GIcon();

2. MoscowIcon.iconSize=new GSize(40,48);

6. var Moscow_point = new GLatLng(55.752,37.616);

7. var Moscow = new GMarker(Moscow_point, {icon: MoscowIcon, title:”Москва”});

8. GEvent.addListener(Moscow, “click”, function() {

9. Moscow.openInfoWindowHtml(“Москва — столица нашей Родины!”);

10. });

11. Map.addOverlay(Moscow); www.vkph.com/t2006/t2006_03.html

В строках 1—5 объявляется новая переменная, которая будет ссылаться на объект-иконку, а также задаются необходимые свойства объекта:

• строка 2: размер иконки в пикселах;

• строка 3: привязка иконки к координате метки (точка отсчета — левый верхний угол иконки);

• строка 4: привязка всплывающего окна к иконке (об этом ниже);

• строка 5: указание ссылки на изображение;

• в строке 7 п ри создании метки необходимо указать имя переменной для иконки, которое можно использовать и для других меток.

В приведенном выше коде задаются параметры для всплывающего окошка-надписи, которое может содержать произвольный текст (строки 8—10). В 8-й строке объявляется, что для нашей метки с именем «Moscow» при щелчке на ней мышью («click») происходит действие — отображается окно с заранее заданным текстом (строка 9). Ну а размеры всплывающего окна определяются автоматически в зависимости от количества текста в вашем комментарии (рис. 3).

Шаг 4. Идем на три буквы (XML)

То, что мы с вами наваяли, годится, лишь когда меток не очень много. Если же вы из тех людей, с кем постоянно что-то происходит, то стоит научиться использовать импорт внешних данных в формате XML. Тем самым мы не только получим удобный и изящный код, но и разделим по разным файлам дизайн и текст. Импорт данных из файла в формате XML осуществляется с помощью специальной функции GDownloadUrl, которой передается имя файла с заметками (у нас «t2006.xml»), а также указывается функция для обработки данных (строки 16—29). Обработка заключается в создании массива записей, каждая из которых является блоком из файла XML (строка 18). В нашем случае в каждой записи содержатся четыре поля:

• name (заголовок метки),

• message (сообщение),

• lat (широта),

• lng (долгота),

и выглядит она следующим образом:

1.

8. var marker = new GMarker(point, {icon:micon, title:name});

9. GEvent.

addListener(marker, “click”, function() {

10. Marker.openInfoWindowHtml(“

18. var markers = xml.documentElement.getElementsByTagName(«marker»);

19. for (var k = 0; k

(mark ers[k].getAttribute(“lng”)));

21. var name = markers[k].getAttribute(“name”);

22. var message = markers[k].getAttribute(“message”);

23. var micon = new GIcon(baseIcon);

24. var icon_number = k + 1;

25. micon.image = “http://www.vkph.com/t2006/i” + icon_number + “.png”;

26. var marker = createMarker(point,name,message,micon);

27. map.addOverlay(marker);

28. }

29. });

После загрузки всех данных из файла в память, массив записей перебирается в цикле (строки 19—28). Для каждого элемента осуществляется выборка и присвоение значений необходимым переменным. В строке 20 функции GLatLng передаются полученные значения lat и lng, результат присваивается переменной point (функция parseFloat служебная — используется для преобразования числового значения к плавающей точке).

Значения переменных name и message переносятся в соответствии с их «тезками» из XML-файла (21—22).

В строках 23—25 создается новый объект-иконка, наследующий свойства ранее объявленного baseIcon (23), со своей уникальной картинкой (25). В нашем случае картинки — это просто цифры, которые должны помочь посетителю странички понять, в какой последовательности нужно обходить метки на карте, но вы можете назначать любые картинки. В следующей строке вызывается функция createMarker, результат действия которой присваивается переменной-метке marker. В строке 27 очередная метка добавляется на карту (рис. 4).

Функция createMarker (26) выполняет те действия, что мы разбирали ранее: объявление метки с определенной иконкой (в нашем случае одна на все города — флаг Российской Федерации) и всплывающей подсказкой, а также обработчика мышиного клика для вывода комментариев (см. строки 8—15).

Выложив XML— и HTML-файлы на сайт и дав на них ссылку с главной странички, можете считать, что карта «кругокремлевского» путешествия готова (примерwww.vkph.com/t2006/t2006_04.html ).

Стартовая страница со всеми примерами, разобранными в статье, находится по адресуwww.vkph.com/t2006 . Вопросы, касающиеся описанной технологии, можно без стеснения задавать по указанному там адресу электронной почты.

Cправка

В отношении отладки кода и выявления возможных ошибок GMaps трудно назвать дружелюбным — сервис просто остановит выполнение кода на первой же ошибке, не выдав никакого сообщения. Поэтому внимательно следите за «чистотой» кода! Со своей стороны могу посоветовать использовать функцию GLog.write(var_name), которая позволяет выводить заданную информацию (например, имя переменной) во всплывающем окошке браузера. Расставляя вызовы этой функции в «контрольных точках» HTML-файла, вы сможете понять, где останавливается обработка и что происходит с вашими данными.

СОФТЕРРА: Tor’ная дорога к приватности: Практическое руководство по сохранению анонимности в Сети

Автор: Илья Щуров Voyager

Бывают ситуации, когда «privacy» перестает быть просто словом. Когда каждый оставленный в Сети след, каждая запись в лог-файлах становится если не трагедией, то кусочком большой проблемы. Проблемы, которая может привести к трагедии. Проблемы анонимности и приватности, проблемы свободы слова — а порой и физической свободы.

Доброкачественная паранойя

Развитие технологий иногда напоминает качающийся маятник. Появление Интернета предоставило такие возможности для свободного обмена информацией, о которых никто не мог и мечтать. Маятник качнулся в одну сторону. Люди начали использовать эти возможности, но быстро выяснилось, что и здесь за каждым вашим шагом могут следить, а каждое ваше слово может быстро оказаться обращенным против вас.

Назад Дальше