Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Yamaps

  • Soyez le premier à commenter

Yamaps

  1. 1. API 2.1 beta В версии 2.1-бета полностью изменился дизайн элементов управления картой. Изменения коснулись не только внешнего вида интерфейса, но и поведения его отдельных частей. Теперь они автоматически адаптируются под фактические размеры контейнера карты. Адаптивное поведение можно настроить и для собственных кнопок и списков.
  2. 2. API 2.1 beta В версии 2.1-бета полностью изменился дизайн элементов управления картой. Изменения коснулись не только внешнего вида интерфейса, но и поведения его отдельных частей. Теперь они автоматически адаптируются под фактические размеры контейнера карты. Адаптивное поведение можно настроить и для собственных кнопок и списков. Новый дизайн  Размеры  Новые балуны  Векторные метки
  3. 3. API 2.1 beta В версии 2.1-бета полностью изменился дизайн элементов управления картой. Изменения коснулись не только внешнего вида интерфейса, но и поведения его отдельных частей. Теперь они автоматически адаптируются под фактические размеры контейнера карты. Адаптивное поведение можно настроить и для собственных кнопок и списков. Новый дизайн Новые элементы управления  Размеры  Геолокация  Новые балуны  Полноэкранный режим  Векторные метки
  4. 4. API 2.1 beta В версии 2.1-бета полностью изменился дизайн элементов управления картой. Изменения коснулись не только внешнего вида интерфейса, но и поведения его отдельных частей. Теперь они автоматически адаптируются под фактические размеры контейнера карты. Адаптивное поведение можно настроить и для собственных кнопок и списков. Новый дизайн Новые элементы управления  Размеры  Геолокация  Новые балуны  Полноэкранный режим  Векторные метки Обратная совместимость
  5. 5. Структура файлов Создаем папку mymaps
  6. 6. Структура файлов Создаем файл index.php Создаем папку mymaps
  7. 7. Структура файлов Создаем файл index.php Создаем папку mymaps Создаем файл maps.js
  8. 8. Что мы будем делать 1. Подключаем API
  9. 9. Что мы будем делать 1. Подключаем API 2. Создаем карту
  10. 10. Что мы будем делать 1. Подключаем API 2. Создаем карту 3. Добавить элементы управления на карту
  11. 11. Что мы будем делать 1. Подключаем API 2. Создаем карту 3. Добавить элементы управления на карту 4. Добавить на карту метку
  12. 12. Что мы будем делать 1. Подключаем API 2. Создаем карту 3. Добавить элементы управления на карту 4. Добавить на карту метку 5. Создаем наш плагин
  13. 13. 1. Подключаем API <script src=“http://api-maps.yandex.ru/2.1-dev/?lang=ru-RU&load=package.full" type="text/javascript"> </script>  Какую версию API подключаем:  http://static-maps.yandex.ru/1.x/  http://api-maps.yandex.ru/2.0/  http://api-maps.yandex.ru/2.0-stable/  http://api-maps.yandex.ru/2.1-dev/
  14. 14. 1. Подключаем API <script src=“http://api-maps.yandex.ru/2.1-dev/?lang=ru-RU&load=package.full" type="text/javascript"> </script>  Какой язык будем использовать
  15. 15. 1. Подключаем API <script src=“http://api-maps.yandex.ru/2.1-dev/?lang=ru-RU&load=package.full" type="text/javascript"> </script>  Задаем пакеты которые будем использовать Параметр Тип Описание packages String[]|String Имена пакетов, которые требуется загрузить. callback Function Функция, которая будет вызвана при успешной загрузке пакетов. context Object Контекст выполнения. <script type="text/javascript"> if (window.location.pathname == '/special-page') { ymaps.load(['package.traffic', 'package.search']); // Для этой страницы нужны пробки и панель поиска } </script>
  16. 16. 2. Создаем карту Открываем и редактируем файл maps.js ymaps.ready(function () { var myMap = new ymaps.Map('YMapsID', { center: [??????, ??????], zoom: ??????, controls: [??????] }); });
  17. 17. 2. Создаем карту Открываем и редактируем файл maps.js ymaps.ready(function () { var myMap = new ymaps.Map('YMapsID', { center: [55.740575,37.609395], zoom: 16, controls: ['smallMapDefaultSet'] }); });
  18. 18. 2. Создаем карту Для добавления карты на сайт прописываем в BODY <body> …… <div id="YMapsID"></div> …… </body>
  19. 19. 3. Добавить элементы управления на карту Для вывода элементов по умолчанию используем параметр: controls: ['smallMapDefaultSet'] Подключение элементов по отдельности: controls: [ 'zoomControl', 'searchControl', 'typeSelector', 'geolocationControl', 'trafficControl', 'fullscreenControl']
  20. 20. 4. Добавляем метку на карту Для добавления меток на карту допишем
  21. 21. 5. Создаем наш плагин Открываем и редактируем файл index.php <?php /* Plugin Name: Название плагина Plugin URI: http://страница_с_описанием_плагина_и_его_обновлений Description: Краткое описание плагина. Version: Номер версии плагина, например: 1.0 Author: Имя автора плагина Author URI: http://страница_автора_плагина */ ?>
  22. 22. 5. Создаем наш плагин Открываем и редактируем файл index.php <?php /* Plugin Name: YaMaps – Яндекс.Карты Plugin URI: http://dd-l.name Description: Простой способ использования Яндекс.Карт на сайте. Version: 0.1 Author: Dyadya Lesha (info@dd-l.name) Author URI: http://vcard.dd-l.name */ ?>
  23. 23. 5. Создаем наш плагин Подключаем API и CSS в HEADER используя функцию wp_enqueue_script(); add_action('wp_enqueue_scripts', 'add_head_scripts'); function add_head_scripts() { wp_enqueue_script('yamaps', 'http://api-maps.yandex.ru/2.1-dev/?load=package.standard&lang=ru-RU'); wp_enqueue_script('maps', plugins_url('/maps.js', __FILE__)); wp_enqueue_style('true_style', 'http://yandex.st/bootstrap/3.0.0/css/bootstrap.min.css'); }
  24. 24. 5. Создаем наш плагин Выводить нашу карту будем используя шорткод [yamaps] add_shortcode('yamaps', 'ya_function'); function ya_function($atts) { extract(shortcode_atts(array( 'id' => 'maps', 'w' => '100%', 'h' => '400px', ), $atts)); return '<div id=" . esc_attr( $id ) . " style="width: ' . absint( $w ) . '; height: ' . absint( $h ) . '"></div>'; }
  25. 25. 5. Создаем наш плагин Добавляем кнопку в редактор текста
  26. 26. 5. Создаем наш плагин Добавляем код в index.php
  27. 27. Полезные ссылки http://beta.maps.yandex.ru/ - бета-версия новых Яндекс.Карт http://api.yandex.ru/maps/doc/intro/concepts/intro.xml - документация http://api.yandex.ru/maps/tools/constructor/ - конструктор карт http://api.yandex.ru/maps/jsbox/ - песочница
  28. 28. Спасибо за внимание! Вопросы? Кульпин Алексей / Dyadya Lesha Tel: +7 (953) 950 9822 Website: dd-l.name Mail: info@dd-l.name Twitter: @dyadya_lesha

    Soyez le premier à commenter

    Identifiez-vous pour voir les commentaires

  • dyadyal

    Oct. 19, 2013
  • marin_nikolay

    May. 3, 2014

Vues

Nombre de vues

922

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

1

Actions

Téléchargements

8

Partages

0

Commentaires

0

Mentions J'aime

2

×