В данной статье будет рассказано о том, как можно сформировать ссылку на фрагмент карты. Например, данная функциональность может потребоваться, если на карте размещены объекты, а пользователям необходимо обмениваться ссылками на фрагменты карты с этими объектами.
Рассмотрим как можно менять адрес страницы, используя JavaScript. Для манипуляций с адресом страницы обратимся к глобальному объекту document.location, который содержит информацию об адресе текущего документа. Адрес текущей загруженной страницы можно изменить, используя свойство href объекта document.location.
Адрес на текущий фрагмент карты будем сохранять в HTML-элементе «Ссылка» в атрибуте href. Код для создания данного HTML-элемента выглядит следующим образом:
<a id="YMapsLink" href="#">Получить ссылку на карту</a>
Чтобы сформировать адрес на фрагмент карты, необходимо сохранять в ссылке центр карты, линейный размер области, а также тип карты.
Для перевода типа карты в строковое представление и обратно напишем небольшой класс TypeConverter, для перевода остальных параметров воспользуемся стандартным методом toString().
// Конвертер типов карт
// Если тип карты не был определен, то по умолчанию возвращается тип карты YMaps.MapType.MAP (или имя "map")
function TypeConverter () {
// Доступные типы карты
var types = [YMaps.MapType.MAP, YMaps.MapType.SATELLITE, YMaps.MapType.HYBRID],
// Имена карт
names = ["map", "sat", "hyb"];
// Возвращает имя карты по ее типу
this.typeToName = function (type) {
return names[valid(YMaps.jQuery.inArray(type, types))];
};
// Возвращает тип карты по имени
this.nameToType = function (name) {
return types[valid(YMaps.jQuery.inArray(name, names))];
};
// Проверяет правильность полученного индекса
function valid (index) {
return (index == -1) ? 0 : index;
}
};
Теперь приступим к формированию адреса на фрагмент карты. Сделать это несложно, для этого необходимо установить обработчики для событий карты BoundsChange и TypeChange.
// Динамически формируем URL
YMaps.Events.observe(map, [map.Events.BoundsChange, map.Events.TypeChange], function () {
YMaps.jQuery("#YMapsLink")
.attr("href", "?l=" + typeConverter.typeToName(map.getType()) +
"&ll=" + map.getCenter().toString() +
"&spn=" + map.getBounds().getSpan().toString(6)
);
});
В итоге ссылка будет иметь следующий вид:
?l=hyb&ll=37.664725,55.842762&spn=0.823971,0.30908 4
Напишем код, который будет обрабатывать параметры из ссылки и изменять параметры карты.
Для начала необходимо получить параметры из URL'а. Для этого напишем функцию, которая по имени параметра будет возвращать его значение.
// Получение параметра из URL'а
function getParam (name, location) {
location = location || window.location.hash;
var res = location.match(new RegExp('[#&]' + name + '=([^&]*)', 'i'));
return (res && res[1] ? res[1] : '');
}
Далее создадим объект, который будет содержать все параметры, обнаруженные в URL'е.
// Получаем параметры из URL'а
var params = {
ll : getParam("ll"), // Центр карты
spn : getParam("spn"), // Линейный размер области
t : getParam("t") // Тип карты
};
С помощью метода fromString() можно создать объекты классов YMaps.GeoPoint и YMaps.Size из строкового представления.
По координатам центра и линейному размеру области с помощью метода класса YMaps.GeoBounds fromCenterAndSpan() можно определить область, которую необходимо отобразить на карте.
// Центрируем карту в нужном месте
map.setBounds(YMaps.GeoBounds.fromCenterAndSpan(YM aps.GeoPoint.fromString(p arams.ll), YMaps.Size.fromString(params.spn)));
Тип карты из строкового вида в объект переводим с помощью описанного выше класса TypeConverter:
// Устанавливаем требуемый тип карты
map.setType(typeConverter.nameToType(params.l));
Посмотреть пример в новом окне
Можно немного изменить данный пример и сохранять параметры карты в якоре. Преимущество якоря в том, что его можно формировать и отображать динамически без перезагрузки страницы.