Блог API Яндекс.Карт

май 2010
Переключение версий API: 1.0.x -> 1.0.7, 1.1.x -> 1.1.8
13 мая 2010, 19:24

При загрузке API Яндекс.Карт можно указать версию с точностью до третьей цифры.

На странице, посвященной версионированию, мы предупреждали, что по истечении месяца  со дня  выхода новой версии, номер кторой отличается от номера предыдущей только третьей цифрой, предыдущая версия автоматически удаляется. Например, через месяц после выхода версии 1.0.6, версия 1.0.5 будет удалена.

Через 2 недели  мы сделаем принудительное переключение всех подветок каждой линейки на использование последних версий.

На текущий момент последней версией в линейке 1.0 считается 1.0.7, а в линейке 1.1 - 1.1.8.

Мы советуем заранее самостоятельно переключиться на новую версию API и проверить работоспособность своих скриптов.

4 комментария
Проблемы при использовании API Яндекс.Карт и их решения
20 мая 2010, 21:32
В клубе разработчиков опубликована страница по решению ряда проблем, возникающих при использовании API Яндекс.Карт.
Проблемы при использовании API Яндекс.Карт и их решения

На данной странице собраны советы по решению некоторых проблем, связанных с использованием API Яндекс.Карт.

  1. Проблемы с картой при использовании CMS

    Рассмотрены популярные бесплатные CMS и модули по работе с Яндекс.Картами. Освещены проблемы, которые могут возникнуть при вставке кода карт в эти CMS.

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

  2. Решение проблем с версткой

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

 

Проблемы с картой при использовании CMS

Первоначально мы решили осветить работу с такими CMS, как Drupal, Wordpress, Joomla и систему Ucoz. В сумме они занимают более 80% рынка бесплатных CMS по данным компании iTrack. DataLife Engine решили не учитывать, т. к. полная версия этой CMS - платная.

Пожалуйста, учтите, что даже, проблемы у всех CMS схожие, поэтому даже если вашей CMS нет в списке, то прочитайте этот обзор полностью!

В качестве основной задачи, принятой в данном обзоре, является вставка Яндекс.Карты на страницу без использованием или с использованием дополнительных плагинов/модулей. JavaScript-код, показывающий карту, был получен из инструмента "Конструктор схем проезда".

На настоящий момент список расмотренных CMS следующий:

 

Drupal

Drupal — один из представителей CMS. Drupal может быть использован для построения самых разных типов сайтов. В базовой поставке возможности движка наиболее хорошо подходят для построения интернет-сообществ: новостных и форумных сайтов, персональных и коллективных блогов и подобных вещей, где основная задача — не потеряться в массе регулярно поступающих материалов, иметь возможность их структурировать и архивировать для легкого доступа в будущем. Функционал наращивается дополнительными модулями, которые можно доустанавливать по мере необходимости. (drupal.ru)

Используемая версия в обзоре: 6.16

 

Стандартный редактор

По умолчанию Drupal не снабжен визуальным редактором, редактирование контента осуществляется в обычных textarea.

Разрешенные теги контролируются с помощью фильтров. После установки доступна два фильтра:

  • Filter HTML (по умолчанию).
  • Full HTML.

В режиме Filter HTML тег <script> не допускается, поэтому при использовании данного режима JavaScript-код будет отображен в виде обычного текста. Поэтому для вставки кода, отображающей карту, подходит только режим Full HTML (либо можно написать свой фильтр, который будет допускать ввод javascript).

 

Интерфейс стандартного редактора

 

 

Результат

 

Карта, вставленная через стандартный редактор, отображается корректно. Однако html-комментарии (выделены красными прямоугольниками) не скрываются, а отображаются в опубликованной записи. Это баг самой CMS, поэтому перед вставкой кода их необходимо удалить вручную.

При открытии балуна можно увидеть конфликт ccs-стилей, который приводит к разъезжанию балуна.

 

 

Для устранения данного конфликта нужно в файле style.css (строка 193) убрать следующий стиль (или заменить на более частный):

table {
    margin : 1em 0;
    width : 100%;
}

 

Визуальные редакторы

Рассмотрим самые популярные визуальные редакторы, используемые вместе с Drupal:

 

TinyMCE

TinyMCE (англ. Tiny Moxiecode Content Editor) платформонезависимый Javascript HTML WYSIWYG редактор на основе Web. К основным характеристикам программы относятся поддержка тем/шаблонов, языковая поддержка и возможность подключения модулей (плагинов).

Модуль для Drupal: http://drupal.org/project/tinymce.

После установки модуля необходимо создать профиль для редактора, в котором можно задать некоторый набор параметров для TinyMCE. Для начала можно создать профиль со стандартными настройками.

Вставлять код нужно в режиме html (для этого в редакторе предусмотрена специальная кнопочка). TinyMCE вырезает атрибут src из тега <script> подключения API.

Исправить поведение редактора с помощью настроек CMS нельзя, однако можно задать дополнительные параметры при инициализации TinyMCE: convert_urls и remove_script_host.

 

 

Необходимо открыть файл modules\tinymce\tinymce\jscripts\tiny_mce\tiny_mce_src.js и удалить строки с 1999 по 2002:

// Convert the src attribute of the scriptsattribs = attribs.replace(/src=\"([^\"]+)\"?/i, function(a, url) {if (s.url_converter)url = t.encode(s.url_converter.call(s.url_converter_scope || t, t.decode(url), 'src', 'script'));return '_mce_src="' + url + '"';}

Далее переименовать tiny_mce_src.js в tiny_mce.js.

 

 

BUEditor

BUEditor – это не WYSIWYG редактор, а лишь надстройка над стандартной textarea. BUEditor добавляет ряд кнопочек, которые упрощают вставку часто используемых тегов (например, img). Данный редактор был написано специально для Drupal.

Модуль для Drupal: http://drupal.org/project/bueditor.

Вставить javascript-код можно без ухищрений, результат будет такой же, как и в случае со стандартным редактором.

 

FCKEditor

FCKEditor (начиная с версии 3.0, редактор называется CKeditor) имеет такой же принцип действия, как и TinyMCE.

Модуль для Drupal: http://drupal.org/project/fckeditor.

Кнопки html у него нет, зато с помощью ссылки “Switch to plain text editor” (которая находится под редактором) можно переключиться на обычную textarea и ввести код. Никаких проблем не возникло.

 

Модули для работы с Яндекс.Картами

 

Модуль YandexMap (от bohart)

Данный модуль позволяет к любому типу контету добавлять карту с одной меткой

Ссылка: http://www.drupal.ru/node/26296 (доступны для скачивания версия 1.1.4 и 1.3)

Возможности модуля:

  • Можно выбрать для каких материалов отображать карту.
  • Смена типа, центра и масштаба карты. Тип карты и масштаб задается радиокнопками, а центр – в виде адреса.
  • Можно задать размер карты в текстовых полях.
  • Добавление нужных элементов управления с помощью флажков.
  • Добавление одной метки на карте, названия и описания к ней.
  • Можно добавить свою строку в копирайт.
  • Поиск работает через раз (используется наш геокодер).

 

Интерфейс редактирования параметров модуля

Настройка элементов управления

Настройка карты

 

 

Интерфейс редактирования карты


Результат

 

 

WordPress

WordPress — CMS с открытым исходным кодом, распространяемая под GNU GPL. Написан на PHP, в качестве базы данных использует MySQL. Сфера применения — от блогов до достаточно сложных новостных ресурсов и даже интернет-магазинов. Встроенная система «тем» и «плагинов» вместе с удачной архитектурой позволяет конструировать практически любые проекты (википедия).

Используемая версия в обзоре: 2.9.2

CMS Word Press из коробки имеет свой визуальный редактор для текста с возможность переключения в режим редактирования HTML.

 

Стандартный редактор

WordPress "из коробки" имеет своей собственный редактор, который позволяет редактировать исходный код записи на вкладке HTML.

Вставляем в режиме html любой javascript-код (например, полученный из конструктора) и на выходе получаем вот такое:

YMaps.jQuery(function () {
        var map = new YMaps.Map(YMaps.jQuery("#YMapsID-914")[0]
        map.setCenter(new YMaps.GeoPoint(37.609218,55.753559), 9, YMaps.MapType.MAP);
        map.addControl(new YMaps.Zoom()
        map.addControl(new YMaps.ToolBar()
        map.addControl(new YMaps.TypeControl()</p>
<p>         function createObject (type, point, style, description) {
            var allowObjects = ["Placemark", "Polyline", "Polygon"],
                index = YMaps.jQuery.inArray( type, allowObjects),
                constructor = allowObjects[(index == -1) ? 0 : index];
                description = description || "";</p>
<p>         var object = new YMaps[constructor](point, {style: style, hasBalloon : !!description}
        object.description = description;</p>
<p>         return object;
}
}

Вставленные теги вызывают синтаксическую ошибку javascript и карта отображаться не будет. Это происходит из-за того, что WordPress даже в режиме HTML делает автовставку переносов строк. Отключить такое поведение настройками в админ-панели нельзя

Вариантов два: либо записать весь код в одну строку (в этом случае дальнейшее редактирование кода будет затруднено), либо поправить тему для WordPress, добавив туда дополнительную настройку. Поэтому лучше выбрать второй вариант.

В используемой схеме в файл functions.php необходимо добавить следующую строчку:

remove_filter('the_content', 'wpautop');

Например, для дефолтной темы файлик нужно искать по следующему пути: wp-content\themes\default\functions.php.

Важно! Отключение автовставки переносов в теме CMS затронет все опубликованные записи, т. е. в тех записях, в которых данная функция использовалась, может измениться оформление.

 

Плагины для работы с Яндекс.Картами

 

Yandex Maps for Word Press v. 1.2.1 (from Mee)

Данный плагин позволяет добавить на карту одну метку с названием и описанием. Метка и карта позиционируются с помощью геокодирования (т. е. координаты указать нельзя - только адрес)

Ссылка: http://wordpress.org/extend/plugins/yandex-maps-for-wordpress/

После того, как в редакторе карты введена необходимая информация, нужно нажать на кнопку "Send Map to Editor" и код для карты появится в редакторе текста.

 

Редактор карты


Редактор текста с кодом карты


В результате будет отображена карта с открытым балуном

 

 

Плагин Яндекс.Карт для Word Press (from otrip)

Данный плагин может отображать либо карту с заданным центром и масштабом, либо YMapsML-файл. В RSS вместо интерактивной карты выводится статичная.

Ссылка: http://www.otrip.ru/2009/05/yandex-map-xml-for-wordpress/#more-879

Плагин ищет в редакторе текста строки вида [yamap: 37.61, 55.75, 6] или [yamap: URL]. В первом случае будет вставлена карта с заданным центром и масштабом, а во втором – отображен YMapsML, загруженный с адреса "URL".

Таким образом можно отображать и данные, экспортированные из сервиса "Мои карты":

[yamap: http://maps.yandex.ru/export/usermaps/3nXNKaog57QqpRlvteW0DJWI-CGmUzf6/]

Плагин имеет небольшую админку (которая находится в меню Параметры – Yandex Map (XML)), в которой можно указать API-ключ, начальный центр и масштаб карты, а также ее размеры.

 

Настройка плагина

 

 

Joomla

Joomla! (бывшая Mambo) – система управления содержимым, написанная на языках PHP и JavaScript, использующая в качестве хранилища базу данных MySQL. Является свободным программным обеспечением, распространяемым под лицензией GNU GPL. CMS Joomla! включает в себя различные инструменты для изготовления веб-сайта. Важной особенностью системы является минимальный набор инструментов при начальной установке, который дополняется по мере необходимости. Это снижает загромождение административной панели ненужными элементами, а также снижает нагрузку на сервер и экономит место на хостинге (википедия).

Используемая версия в обзоре: 1.5.17

 

Стандартный редактор

По умолчанию в Joomla в качетве стандартного редактора используется TinyMCE.

Если вставить код, то редактор удалит контейнер с картой, потому что он пустой. Это происходит из-за установленной опции clean для TinyMCE.

Для того, чтобы контейнер для карты не вырезался, в него нужно написать либо какой-то текст

<div id="YMapsID" style="width:450px;height:350px">map</div>

либо добавить внутрь контейнера комментарий

<div id="YMapsID" style="width:450px;height:350px"><!--карта--></div>

 

Плагины для работы с Яндекс.Картами

 

Компонент и плагин от yar-it.com

Компонент дает возможность создавать неограниченное количество карт и меток (для меток можно задавать разные значки).

Ссылка: http://yar-it.com/blog/yandexmap.html

 

Интерфейс редактирования карты


Интерфейс редактирования метки


Настройка внешнего вида метки

 

Искать центр карты или местоположение метки можно с помощью специального встроенного инструмента.

 

Инструмент для определения координат

 

Для отображении карты в тексте статьи, необходимо вставить специальный код. Например,

{yandexmaps view=map|id=1}

Эти коды отображаются в списке карт: http://YOUR_DOMAIN/administrator/index.php?option=com_yandexmaps&view=yandexmapsmaps

 

Список карт с кодами

 

Сам этот компонент не умеет отображать карты в статьях. Для обработки кодов, которые отдает компонент, необходим еще дополнительный плагин.

Ссылка: http://yar-it.com/component/option,com_yfiles/Itemid,95/task,view.download/cid,16/

Плагин вместо кода вставит ссылку, при щелчке на которой откроется модальное окно с картой:

 

 

 

SaaS платформа uCoz

uCoz – это SaaS платформа, включающая в себя хостинг и систему управления сайтом. uCoz работает по принципам Web 2.0 и позволяет создавать сложнейшие проекты с необычайной простотой и скоростью (ucoz.ru).

Вставить JavaScript легко во строенном редакторе, никаких проблем не наблюдается. Главное включить html-теги и отключить вставку автопереносов.

 

 

 

Решение проблем с версткой

С помощью css-стилей можно произвольным образом изменить внешнее оформление любых элементов, отображенных на веб-странице.

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

Например, этот стиль приведет к растягивнию балуна:

table { width : 100% }

Его лучше заменить, например, на такой:

table.myTable { width : 100% }

Полный список конфликтов и их причин приведен на отдельной странице

http://rodlex.narod2.ru/css-problems.html

Нет комментариев
faq,вопросы и ответы
API Яндекс.Карт версия 1.1.10
25 мая 2010, 20:20

Опубликована новая версия API Яндекс.Карт.

Добавлено:

  • Возможность задать пользовательский размер стороны тайла.
  • Добавлен метод YMaps.Layer.getTileDataSource, возвращающий указатель на источник данных для тайлов слоя.
  • В класс YMaps.Layer добавлена опция zIndex, позволяющая управлять наложением слоев.
  • В класс YMaps.Map добавлена опция propagateEvents, позволяющая управлять распространением DOM-событий, возникающих в карте.
  • В элемент управления YMaps.SearchControl добавлена опция prefLang, позволяющая задавать предпочитаемый язык результатов поиска.
  • В список опций режима редактирования графических объектов YMaps.GraphicsEditingOptions добавлены опции vertexLockedLayout, vertexLayout, edgeLayout, позволяющие задавать внешний вид меток в режиме редактирования.
  • Методы YMaps.SearchControl.collapse и YMaps.SearchControl.expand, позволяющие, соответственно, сворачивать и разворачивать панель результатов поиска в элементе управления YMaps.SearchControl. Метод YMaps.SearchControl.isExpanded позволяет определять свернута ли в текущий момент панель результатов поиска или нет.
  • В класс YMaps.ToolBarButton добавлена опция конструктора shown, позволяющая скрывать/показывать кнопки в элементе управления "Тулбар".
  • В класс YMaps.Placemark добавлены опции zIndex, zIndexActive, zIndexDrag, zIndexHover, zIndexShadow, позволяющие управлять наложением меток в различных режимах.
  • В классы YMaps.Polygon и YMaps.Polyline добавлена опция zIndex, позволяющая управлять взаимным наложением ломаных линий и многоугольников.

Исправлено:

  • Исключение при удалении с карты элемента управления YMaps.SmallZoom.
  • Ошибка, из-за которой элемент управления YMaps.SmallZoom не обрабатывал опцию smooth.
  • Для браузера Microsoft Internet Explorer: исключение, возникавшее при попытке создания графических объектов до события window.onload.
  • Для Mozilla Firefox 3.6: размеры всплывающей подсказки рассчитывались неверно.
  • Для Opera 9.27: размеры подсказок инструмента "Линейка" рассчитывались неверно.
  • Ошибка в вычислении координат событий мыши на веб-страницах, где указан DOCTYPE и у элемента body задан атрибут border.
  • Возможность возникновения исключения при подключении API с опцией loadByRequire и вызове YMaps.load до определения document.body
  • Ошибка, из-за которой при подключении API c опцией loadByRequire класс YMaps.jQuery.boxModel возвращал undefined.

Изменено:

  • Повышена производительность при редактировании графических объектов с большим количеством точек.


Для всех пользователей API, которые в вызове указывают версию 1.1 перечисленные изменения применены автоматически. Никаких дополнительных действий не требуется.

Подробнее о версионировании API Яндекс.Карт вы можете прочитать здесь.

Нет комментариев
API 1.x,обновление