Формирование ссылки на фрагмент карты

В данной статье будет рассказано о том, как можно сформировать ссылку на фрагмент карты. Например, данная функциональность может потребоваться, если на карте размещены объекты, а пользователям необходимо обмениваться ссылками на фрагменты карты с этими объектами.

Рассмотрим как можно менять адрес страницы, используя 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.309084

Напишем код, который будет обрабатывать параметры из ссылки и изменять параметры карты.

Для начала необходимо получить параметры из 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(YMaps.GeoPoint.fromString(params.ll), YMaps.Size.fromString(params.spn)));

Тип карты из строкового вида в объект переводим с помощью описанного выше класса TypeConverter:

// Устанавливаем требуемый тип карты
map.setType(typeConverter.nameToType(params.l));

Посмотреть пример в новом окне 

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

Посмотреть пример в новом окне