Google Maps + Geolocation + Маршруты

Недавно мы добавили в раздел “Контакты” к нашей карте возможность прокладывать маршрут от того места, где сейчас находится пользователь, к нам в офис. Я бы хотел немного подробнее рассказать как это делается.

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

Пример кода.

Следующим шагом будет определение работает ли Geolocation API в браузере, и если работает, получаем позиции текущего местоположения:

Пример кода.

Теперь остается заключительная часть — получение маршрута и нанесение маркеров по всему пути на карту, все это описываем в функции showRouteService:

Пример кода.

Работающий пример можно посмотреть здесь.

Презентация: Операторы в JavaScript →

Презентация из 20 слайдов от Timmy Willison. Автор рассмотрел наименее распространенные операторы в JavaScript.

JavaScript Garden →

Все заковыристые вопросы по JavaScript очень хорошо освещены здесь. Если вы уже хорошо разбираетесь в JavaScript и готовы становится профессионалами, несомненно этот ресурс сильно поможет.

Есть перевод на русский язык.

Пошаговая установка Node.js на Windows без виртуальных машин →

Иногда бывает нужно установить Node.js на Windows. Официальных сборок для Windows пока не существует, поэтому приходится последовательно собирать самому.

Анимация с помощью Émile

Думаю в каждом известном сейчас JavaScript фреймворке есть отдельный модуль занимающийся CSS-анимацией. Только эти фреймворки с каждым днем становятся все пузатее и пузатее, с огромным, “богатым” набором возможностей ;). На простых проектах зачастую нехватает только CSS-анимации, и в этом нам очень сильно может помочь мини-фреймворк Émile. Он содержит всего 47 строк кода, занимает в сжатом виде 1,6Kb и добавляет всего лишь 1 функцию такого вида:

emile(element, style, options, after);

Поясню назначение параметров:

• element: id элемента или сам элемент над которым будет проходить анимация
• style: стили которые будут являтся конечной точкой анимации
• options: необязательный параметр, несколько опций
  • duration: время анимации в миллисекундах
  • after: функция которая будет вызвана после того как анимация закончится
  • easing: функция которая управляет ходом анимации
• after: необязательный параметр, функция которая будет вызвана после того как все закончится, в дополнение к options.after

Émile корректно работает на всех необходимых, по-моему мнению, браузерах:

• Microsoft Internet Explorer для Windows, версия 6.0 и выше
• Mozilla Firefox 1.5 и выше
• Apple Safari 2.0.4 и выше
• Opera 9.25 и выше
• Chrome 1.0 и выше

Это очень мощный фреймворк для работы с анимацией, с помощью его параметров можно организовать любую сложную анимацию на ваших сайтах. Несколько примеров можно увидеть в статье Getting Started With Emile.

Разработчиком Émile является Thomas Fuchs, который уже приложил руку к большому фреймворку script.aculo.us и его второй версии scripty2.com.

Исходники Émile можно взять с GitHub.

Май 11, 2010 at 12:18am
Метки: javascript github raphael

Перепечатоно от thechangelog

Raphaël JS 1.4 - теперь с поддержкой жестов →

thechangelog:

Dmitry Baranovskiy обновил Raphaël JS, это очень мощная JavaScript библиотека для векторной графики. С версии 1.4 появилась поддержка жестов, например это может быть очень удобным в устройствах таких как iPad.

[Исходники на GitHub] [Сайт проекта]