MiniTutor

15 Июль 2008

Yahoo! Maps на твоем сайте.

Posted by Vadim BELLinSKY under: Wwweb .

Небольшой, но содержательный урок о том, как прикрутить на страничку карту, используя Yahoo! Maps AS-Flash API.

Как это началось? Ну… да простит меня Yahoo, с Google =) ну как-то привык. Итак по запросу yahoo maps flash api я получил совершенно логичную ссылку:

Yahoo! Maps Web Services - ActionScript®-Flash® API Getting Started Guide

Заходим… и на этом поиски закончены — здесь есть все необходимое! Все, что я сделаю, так это немного направлю самых ленивых =)

Для того чтобы работать с Yahoo! Maps Web Services в среде Flash, используя AS2 (об этом мы еще поговорим), нам нужно всего-то скачать компоненту с этой страницы (внизу). После того как вы скачали архив, распаковали его, вы обнаружили в нем две папочки flash и flex. Нам нужен файл YahooMaps.mxp из flash.

Пуск > Программы > Adobe Design Premium CS3 > Adobe Extension Manager CS3

С помощью этого инструмента (Файл > Установить расширения) мы установим нашу компоненту YahooMaps.mxp.

Запускаем Flash, создаем новый документ Flash File (Action Script 2.0) и резко Window > Components (Ctrl+F7)! в списке легко замечаем группу Yahoo, а вней нашу компоненту com.yahoo.maps.api.flash.YahooMap. Двойного щелчка по ней! Закройте окошко Components. У вас в библиотеке появился новый объект, а на чистом белом холсте какая-то невзрачная синяя рамочка. Чёэт?.. А поздравляю! Это и есть ваша карта внутри вашего flash movie, который вы потом приправите всяким дизайном, интерфейсами и таким прочим! Выделите эту рамочку, во вкладке Properties задайте ей какой-то размер поприличней… 300×300, например… сдвиньте как-то по центру… ага… вот так… ну… Ctr+Enter…

Легко, правда? Вот этим меня и купили. Стояла задача сделать модуль для сайта — карту с маркерами и таким прочим, на Flash. Сначала полез на Google — я уже делал карту, используя их инструментарий, только на JavaScript. Изучив предложение Google для платформы Flash вынужден был отказаться — Action Script 3.0. Нет, ничего плохого про AS3 не скажу — правильный переход. Но блин не при аврале же мне разбираться, чиво эта я там недоприкрутил, что оно мнегавкает блин! Ну короче… расставание было тяжелым, потому что справедливости ради стоит отметить очевидное превосходство качества спутниковых фотографий у Google!

Но тут! Тут же я за несколько минут сделал карту! Да, пока она тупо показывает мне шматочок америки, ее нельзя двинуть с места. Но сейчас мы эти моменты проясним, а результат есть и уже!

Ну хорошо, теперь давайте превратим «цацу» в инструмент. Выделяем нашу карту и внизу переходим во вкладку Parameters:

Ничего особенного тут нет. Поля названы довольно понятно:

Address
Здесь можно указать адрес (вплоть до пересечения улиц, но это работает наверное только для Америки). Именно это место и будет находиться в центре карты в самом начале. Я, например, написал тут “Odessa Ukraine” — признали!

AppID
Это строка-идентификатор вашего онлайн ресурса. Получить application ID можно здесь. Если вы уже зарегистрированы в Yahoo! Developer Network, то все пройдет быстро. Если нет — ну когда-то ж надо начинать!

Language
Язык интефейса вашей карты. Губу не раскатываем, оставляем как есть.

Latitude и Longitude
Хм… широта и долгота? Ну точно! Если как-то несложилось с адресом. Ну, например, не найдет Yahoo! адрес “Mukhosranskoe Zhitomir Ukraine” и придется указывать карте начальную позицию по широте и долготе.

Map View Type
Имеет три возможных значения: map (обычная карта), hybrid (спутниковая фотография с наложенной картой) и satellite (фото со спутника).

Zoom Level
Степень приближения от 1 до 17 (по умолчанию 14). Чем меньше, тем ближе.

Ну вот и пробежались. Ставьте свои значение, любуйтесь, потирайте ручки, а все равно карта как картинка — ничего с ней делать нельзя, кроме как фтыкать. Но на то он и API, чтобы давать нам много великолепных возможностей работы с картой посредством Action Script 2.0 — а это особенно приятно.

Чтобы начать работу вплотную, дайте нашей карте имя-идентификатор. Для начала рекомендую как в примерах - myMap

Теперь выделите единственный в этой сцене ключевой кадр

И нажмите F9 — откройте окно Actions. И вставьте например этот код

import com.yahoo.maps.tools.PanTool;
myMap.addEventListener(com.yahoo.maps.api.flash.YahooMap.EVENT_INITIALIZE, onInitMap);
function onInitMap(eventData) {
var panTool = new PanTool();
myMap.addTool(panTool, true);
}

Теперь вашу карту можно таскать и увеличивать/уменьшать колесиком мыши. Уже хорошо! Этот и многие другие коды для “показать как оно работает” вы найдете на страничке, с которой мы начали наш урок.

Когда прощупаете, захочется большего. Ну вот теперь вы готовы — AS-Flash API Reference Manual, четко, с примерами.

Больше карт!.. козырных и разных =)

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website