Изучаем создание интерактивных карт используя API Google Maps и API Яндекс.Карт
суббота, 12 марта 2011 г.
среда, 16 сентября 2009 г.
Начинаем изучать API Яндекс.Карт
С этой заметки я начинаю цикл публикаций по работе с API Яндекс.Карт.
Раздел на сайте Яндекса – http://api.yandex.ru/maps/ с подробным описанием.
Для того чтобы использовать API Яндекс.Карт на своем сайте необходимо получить уникальный ключ.
Для этого Вы должны:
иметь логин и пароль на Яндексе и быть авторизованным;
ознакомиться и принять условия Пользовательского соглашения;
указать URL вашего сайта в регистрационной форме.
Если Вы не были ранее зарегистрированы на Яндексе , то в начале Вам необходимо пройти процедуру регистрации по адресу http://passport.yandex.ru/passport?mode=register
После этого Вы должны выполнить процедуру авторизации на сайте Яндекса (с этого шага следует начить и всем тем, кто уже раннее был зарегистрирован там).
Затем Вы должны посетить страницу по адресу http://api.yandex.ru/maps/form.xml для получения ключа
И если Вы авторизованы то увидите форму для получения ключа.
В первой графе необходимо указать адрес сайта на котором будут исользоваться Яндекс.Карты.
Лучше всего в качестве адреса сайта указывать только его домен (например, mysayt.ru).
Тогда ключ, зарегистрированный на отдельный домен, будет действителен для всех url внутри этого домена и для специальных поддоменов (например для “www”).
Ключ, зарегистрированный на домен http:// mysayt.ru /, будет действителен для:
http:// mysayt.ru /
http://www.mysayt.ru /
http://www.mysayt.ru /page/
http://host1.mysayt.ru /
http://host2.mysayt.ru /page/
Обратите внимание, что ключ, зарегистрированный на домен http://www. mysayt.ru / будет действителен только для домена http://www. mysayt.ru и его разделов (например, http://www. mysayt.ru /page/).
На локальном компьютере с доменом localhost можно использовать любой ключ.
Далее нужно прочитать и согласится с условиями пользовательского соглашения.
Нажать на кнопку Получить API-ключ.
После этого Вы получите с генерированный ключ и простой пример использования сервиса API Яндекс.Карт с Вашим ключом.
Например:
Ключ: AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==
Пример кода:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html” />
<script src=”http://api-maps.yandex.ru/1.1/?key=
AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==”
type=”text/javascript”></script>
<script type=”text/javascript” charset=”utf-8″>
var map;
function init () {
map = new YMaps.Map( document.getElementById(”YMapsID”) );
map.setCenter(new YMaps.GeoPoint(44.0,56.32811), 13,
YMaps.MapType.MAP);
};
</script>
</head>
<body onload=”init();”>
<div id=”YMapsID” style=”height:400px; width:600px;”></div>
</body>
</html>
Вы можете использовать данный пример кода для тестирования работы. При необходимости изменить координаты центра карты (44.0,56.32811) и уровень масштаба (13).
Все ранее полученные Вами ключи Вы всегда можете узнать на специальной странице http://api.yandex.ru/maps/keyslist.xml
Для тестирования и выполнения различных упражнений с API Яндекс.Карт на домашнем компьютере Вам будет необходимо установит локальный веб-сервер. Как это проще всего сделать я описал в специальной заметке в разделе База знаний.
воскресенье, 12 июля 2009 г.
Доработка плагина Яндекс.Карт для Joomla – продолжение
В заметках на своем блоге я уже рассказывал Вам о плагине Яндекс.Карт для Joomla – смотрите «Плагин Яндекс.Карт для Joomla» и «Доработка плагина Яндекс.Карт для Joomla».
В двух заметках я продолжу тему, как можно доработать данный плагин.
Мы добавим две новые возможности – это форму поиска по карте и загрузку файлов в формате YMapsML.
Нам для работы будут необходимы два файла – это plugin_yandexmap.xml и plugin_yandexmap.php
Мы их будем продолжать редактировать.
Используя ftp-клиент мы заходим на сервер Вашего сайта в папку, где установлена Joomla.
Находим там папку plugins, а в ней папку content.
В этой папке находиться два файла: plugin_yandexmap.xml и plugin_yandexmap.php.
Добавим сначала строку поиска по карте.
25 июня 2009 года вышла новая версия API Яндекс.Карт 1.1.0
В этой версии появился новый элемент управления, размещаемый на карте, YMaps.SearchControl – поиск по карте.
Его мы и будим использовать.
Открываем сначала файл plugin_yandexmap.xml в любом текстовом редакторе или Блокноте.
Находим в нем следующие строки:
Здесь прописываются элементы формы для добавления обзорной миникарты в режиме администрирования.
Joomla - Профессиональный сайт за один день |
И перед ними вставляем следующий код:
Он служит для дополнения элементов формы добавления строки поиска в режиме администрирования.
Сохраняем измененный файл.
После этого открываем файл plugin_yandexmap.php.
С начала меняем версию API.
Для этого находим строку
$doc->addScript('http://api-maps.yandex.ru/1.0/index.xml?key='.$my_params['apiKey']);
и изменяе значение версии с 1.0 на 1.1.
В результате
$doc->addScript('http://api-maps.yandex.ru/1.1/index.xml?key='.$my_params['apiKey']);
Находим в нем строки
if (intval($my_params['showMiniMap'])) {
$mmControl = 'var minimapControl = new YMaps.MiniMap();';
$mmControl .= 'map.addControl(minimapControl);';
} else {
$mmControl = '';
}
И передними добавляем следующий код:
if (intval($my_params['showSearchControl'])) {
$searchControl = 'map.addControl(new YMaps.SearchControl(), new YMaps.ControlPosition(YMaps.ControlPosition.BOTTOM_LEFT, new YMaps.Size(5, 20)));';
} else {
$searchControl = '';
}
Еще ищем строку '.$mmControl.' и перед ней добавляем строчку '.$searchControl.'
Сохраняем измененный файл.
Теперь необходимо зайти на сайт и на странице администрирования в менеджер плагинов и выбираем плагин Content - Yandex Maps.
Открываем его для редактирования.
В правой части окна, среди параметров должен появиться новый YMAP_SHOWSEARCHCONTROL и два переключателя состояния YMAP_YES и YMAP_NO.
Отмечаем состояние YMAP_YES и сохраняем изменения.
Открываем страницу с Яндекс.Картой. На карте должен появиться новый элемент управления YMaps.SearchControl.
Скачать измененные файлы: plugin_yandexmap.xml и plugin_yandexmap.php
В следующей заметке мы добавим возможность подгружать на карту файл в формате YMapsML.
среда, 1 июля 2009 г.
Отображение разнородных объектов на Яндекс.Картах
При нанесении различных объектов на Яндекс.Карты возникает потребность разделения их на отдельные группы, например, гостиницы и кафе, кинотеатры и т.д.
Как работать с группами объектов, удалять и добавлять их на Яндекс.Картау показано в двух видеороликах по материалам Я.Субботника в Киеве, прошедшего 25 апреля 2009 года.
Александр Тармолов. Мастер-класс: Отображение разнородных объектов на Яндекс.Картах. Часть 1
Александр Тармолов. Мастер-класс: Отображение разнородных объектов на Яндекс.Картах. Часть 2