Yamaps

API 2.1 beta
В версии 2.1-бета полностью изменился дизайн элементов управления картой. Изменения
коснулись не только внешнего вида интерфейса, но и поведения его отдельных частей. Теперь
они автоматически адаптируются под фактические размеры контейнера карты. Адаптивное
поведение можно настроить и для собственных кнопок и списков.

API 2.1 beta

Новый дизайн
 Размеры
 Новые балуны
 Векторные метки

API 2.1 beta


Новые элементы управления

 Размеры

 Геолокация


 Полноэкранный режим


API 2.1 beta


Новые элементы управления

 Размеры

 Геолокация


 Полноэкранный режим


Обратная совместимость

Структура файлов

Создаем папку mymaps


Создаем файл
index.php



index.php


maps.js

Что мы будем делать
1. Подключаем API

2. Создаем карту

3. Добавить элементы управления на карту


4. Добавить на карту метку


4. Добавить на карту метку
5. Создаем наш плагин

 Какой язык будем использовать

 Задаем пакеты которые будем использовать
Параметр

Тип

Описание

packages

String[]|String

Имена пакетов, которые требуется загрузить.

callback

Function

Функция, которая будет вызвана при успешной
загрузке пакетов.

context

Object

Контекст выполнения.

<script type="text/javascript">
if (window.location.pathname == '/special-page') {
ymaps.load(['package.traffic', 'package.search']); // Для этой страницы нужны пробки и панель поиска }
</script>

Открываем и редактируем файл maps.js
ymaps.ready(function () {

var myMap = new ymaps.Map('YMapsID', {
center: [??????, ??????],
zoom: ??????,
controls: [??????]
});
});

Открываем и редактируем файл maps.js
ymaps.ready(function () {

var myMap = new ymaps.Map('YMapsID', {
center: [55.740575,37.609395],
zoom: 16,
controls: ['smallMapDefaultSet']
});
});

Для добавления карты на сайт
прописываем в BODY

<body>
……
<div id="YMapsID"></div>

……
</body>

Для вывода элементов по умолчанию используем параметр:

controls: ['smallMapDefaultSet']
Подключение элементов по отдельности:

controls: [ 'zoomControl', 'searchControl', 'typeSelector',
'geolocationControl', 'trafficControl', 'fullscreenControl']

4. Добавляем метку на карту
Для добавления меток на карту допишем

Открываем и редактируем файл index.php

<?php /*
Plugin Name: Название плагина
Plugin URI: http://страница_с_описанием_плагина_и_его_обновлений
Description: Краткое описание плагина.
Version: Номер версии плагина, например: 1.0
Author: Имя автора плагина
Author URI: http://страница_автора_плагина
*/ ?>

Открываем и редактируем файл 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
*/ ?>

Подключаем 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');
}

Выводить нашу карту будем используя шорткод [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>';
}

Добавляем кнопку в редактор текста

Добавляем код в index.php

Полезные ссылки
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/ - песочница

Спасибо
за
внимание!
Вопросы?

Кульпин Алексей / Dyadya Lesha
Tel: +7 (953) 950 9822

Website: dd-l.name
Mail: info@dd-l.name
Twitter: @dyadya_lesha

Yamaps

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (8)

Similar a Yamaps

Similar a Yamaps (20)

Yamaps