В прошлый раз я рассказал вам о плагине добавления карт Google Maps в статьи компонента K2 на сайте Joomla.
Теперь давайте изменим наш плагин так, чтобы можно было вместо карт Google Maps использовать Яндекс.Карты.
Мы будем использовать два вида отображения Яндекс.Карт — статические и динамические.
С начала мы будем использовать API Яндекс.Карт версии 1.1., а затем для динамической карты применим недавно вышедшее API 2.0.
Загрузим архив с плагином из предидущей заметки
Первым мы отредактируем файл maps.xml
В нем мы должны добавить поле для ввода ключа к API Яндекс.Карт.
Между строчками
<params> </params> |
добавляем строку кода:
<param name="apikey" type="text" size= "40" default="" label="API ключ Яндекса" description="API ключ Яндекса. Вы должны получить его здесь: http://api.yandex.ru/maps/form.xml" /> |
Затем изменяем обозначения параметров для цветов меток статической Яндекс.Карты (посмотреть обозначения можно здесь )
Вместо участка кода:
<option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> <option value="yellow">Yellow</option> <option value="pink">Pink</option> |
у нас будет:
<option value="rd">Red</option> <option value="gn">Green</option> <option value="bl">Blue</option> <option value="yw">Yellow</option> <option value="pn">Pink</option> |
Далее удаляем лишние уровни масштаба от 18 по 21, т. к. у Яндекс.Карт максимальный уровень 17.
Также переопределяем типы карты заменяя код:
<option value="roadmap">Roadmap</option> <option value="satellite">Satellite </option> <option value="terrain">Terrain</option> <option value="hybrid">Hybrid</option> |
на следующий:
<option value="map">Roadmap</option> <option value="sat">Satellite </option> <option value="sat,skl">Hybrid</option> |
После этого, сохраняем измененный файл maps.xml.
Теперь редактируем файл maps.php
Раз мы добавили новый параметр для ключа API, нужно сначала получить его значение.
Для этого сразу после строки
$view = Jrequest::getCmd('view'); |
добавляем строчку:
$apikey = $pluginParams->get('apikey'); |
А также заменяем строку кода:
if ($longitude=="") { |
на
if ($apikey=="") { |
Мы здесь будем проверять присутствует или нет параметр ключа API.
Далее, если установлен режим использования статической карты, мы должны сформировать запрос для ее отображения.
Для этого код:
$output = '<img src="http://maps.google.com/maps/api/staticmap?center='.$longitude.','.$latitude.'&zoom='.$zoom.'&size='.$width.'x'.$height.'&maptype='.$type.' &markers=color:'.$color.'|label:'.$marker.'|'.$longitude.','.$latitude.'&sensor=false"/>'; |
заменяем следующим:
$output = '<img src="http://static-maps.yandex.ru/1.x/?ll='.$latitude.','.$longitude.'&size='.$width.','.$height.'&z='.$zoom.'&l='.$type.'&pt='.$latitude.','.$longitude.',pm'.$color.'m'.$marker.'&key='.$apikey.'"/>'; |
Подробнее о статических картах можно прочитать в документации.
Для отображения динамической Яндекс.Карты, мы заменим весь код внутри условия else на следующий:
switch($color)
{
case 'gn': $style = "default#greenPoint";
break;
case 'bl': $style = "default#bluePoint";
break;
case 'yw': $style = "default#yellowPoint";
break;
case 'pn': $style = "default#pinkPoint";
break;
default: $style = "default#redPoint";
}
switch($type)
{
case 'sat': $type_map = 'YMaps.MapType.SATELLITE';
break;
case 'sat,skl': $type_map = 'YMaps.MapType.HYBRID';
break;
default: $type_map = 'YMaps.MapType.MAP';
}
$output ='<script src="http://api-maps.yandex.ru/1.1/index.xml?key='.$apikey.'" type="text/javascript"></script>
<script type="text/javascript">
// Создание обработчика для события window.onLoad
YMaps.jQuery(function () {
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
map.setCenter(new YMaps.GeoPoint('.$latitude.','.$longitude.'), '.$zoom.');
map.setType('.$type_map.');
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.Zoom());
var placemark = new YMaps.Placemark(new YMaps.GeoPoint('.$latitude.','.$longitude.'), {style:"'.$style.'"});
map.addOverlay(placemark);
})
</script>
<div id="YMapsID" style="width:'.$width.'px;height:'.$height.'px;"></div>'; |
Сохраняем файл maps.php
Скачать архив с версией плагина для Яндекс.Карт.
Теперь изменим код вывода динамической Яндекс.Карты, чтобы использовать возможности API Яндекс.Карт версии 2.0.
Заменяем в файле map.php код вывода динамической Яндекс.Карты на следующий:
switch($color)
{
case 'gn': $style = "twirl#greenIcon";
break;
case 'bl': $style = "twirl#blueIcon";
break;
case 'yw': $style = "twirl#yellowIcon";
break;
case 'pn': $style = "twirl#pinkIcon";
break;
default: $style = "twirl#redIcon";
}
switch($type)
{
case 'sat': $type_map = 'yandex#satellite';
break;
case 'sat,skl': $type_map = 'yandex#hybrid';
break;
case 'pmap': $type_map = 'yandex#publicMap';
break;
case 'sat,pskl': $type_map = 'yandex#publicMapHybrid';
break;
default: $type_map = 'yandex#map';
}
$output ='<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map("map", {
center: ['.$longitude.','.$latitude.'],
zoom: '.$zoom.',
type: "'.$type_map.'"
});
myMap.controls
// Кнопка изменения масштаба
.add("zoomControl")
// Список типов карты
.add("typeSelector")
// Стандартный набор кнопок
.add("mapTools");
myPlacemark = new ymaps.Placemark(['.$longitude.','.$latitude.'], {iconContent: "'.$marker.'"}, {preset: "'.$style.'"});
myMap.geoObjects.add(myPlacemark);
}
</script>
<div id="map" style="width:'.$width.'px;height:'.$height.'px;"></div>'; |
Сохраняем изменения.
Нам также необходимо изменить файл maps.xml
Мы добавим в него при выборе типа карты еще два новых: Народная карта (PublicMap) и гибрид Народной карты (PublicMapHybrid).
Т.е код выбора типа карты будет иметь вид:
<param name="type" type="list" default="roadmap" label="Map Type" description="Please select a map type!" > <option value="map">Roadmap</option> <option value="sat">Satellite </option> <option value="sat,skl">Hybrid</option> <option value="pmap">PublicMap</option> <option value="sat,pskl">PublicMapHybrid</option> </param> |
Сохраняем файл maps.xml
Загрузить архив с измененой версией плагина.
Посмотрим на примере как работает наш плагин.
После установки новой версии плагина в его параметрах появилось новое поле API ключ Яндекса
Добавляем карту к заметке.
Вид статической карты
Вид динамической карты
Вид динамической карты с API Яндекс.Карт версии 2.0.
Отлично то как! А существуют ли подобные плагины для добавления в статьи joomla полилинии по заданному массиву координат?
Плагины для K2 существуют, но во-первых они платные, а во-вторых все используют Google Maps.
Можно доработать плагин для Яндекс.Карт для K2, если добавить поле для ввода пути к YMapsML-файлу.
Добрый день все замечательно работает
есть вопрос как сделать народную карту по умолчанию
и изменение масштаба колесиком мышки
сорри народную карту по умолчанию разобрался
Чтобы работало изменение масштаба колесиком мышки необходимо в код файла maps.php добавить две строчки:
после строки type: «‘.$type_map.'» через запятую строку behaviors: [«default», «scrollZoom»]
А перед строчками определения метки на карте:
myMap.behaviors.enable("ruler");Не работает. Гугл работает, а эти два варианта нет.
Может из joomla 2.5.9 и K2 2.6.5?
Не поможете?
Неужели автор статьи даже предположить ничего не может?
Нашел ошибку в плагине, переделал. Все отлично работает. Теперь даже не обязательно указывать ключ к API Яндекс.Карт для статической карты.
Загрузить плагин можно отсюда