Локализация карты

Введение
Основы
Класс DG.Locale
- Методы
- Пример переключения языков

Введение

В данной статье мы рассмотрим возможности работы картографического API с несколькими языками.

Основы

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

Поддерживаемые языки

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

английский;
русский;
итальянский;
чешский;
испанский.

Возможности

Картографический API на данный момент предусматривает следующие возможности:

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

Установка языка при начальной загрузке

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

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

<script src="http://maps.api.2gis.ru/1.0/it"></script>

Если язык при подключении не будет указан, тогда будет использоваться язык по умолчанию — русский.

Класс DG.Locale

Ниже мы подробно рассмотрим все методы класса DG.Locale. Для наглядности допустим, что myMap — объект карты.

Описание методов представляет собой действие (что делает метод, для чего он нужен?) и название метода. Вместе с тем, представлены дополнительно параметры, возвращаемое значение метода и особенности, если таковые имеются.

Методы

Получить список поддерживаемых языков

myMap.locale.getLangs()

Возвращает:

Тип	Описание
`Array`	Массив с кодами допустимых языков, например: `it`, `ru`.

Получить текущий язык карты

myMap.locale.getLang()

Возвращает:

Тип	Описание
`String`	Код текущего языка карты, например: `it`.

Установить язык карты

myMap.locale.setLang(langCode)

Параметры:

Имя	Тип	Обязательный	Описание
`langCode`	`String`	Да	Код языка, например: `ru`.

После того, как будет вызван метод setLang, будет инициировано событие DgLanguageChange, на которое можно "подписать" собственный обработчик. Обработчик, например, может отвечать за изменение подписи какого-либо пользовательского графического элемента, относящегося к карте, при изменении языка.

Пример переключения языков

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Примеры. Изменение языка карты.</title>
    <script src="http://maps.api.2gis.ru/1.0/it"></script>
    <script>
        DG.autoload(function() {
            // Инициализируем первую карту, устанавливаем её центр и масштаб:
            var myMap1 = new DG.Map('map1');
            myMap1.setCenter(new DG.GeoPoint(82.927, 55.028), 16);
             
            // Инициализируем вторую карту, устанавливаем её центр и масштаб:
            var myMap2 = new DG.Map('map2');
            myMap2.setCenter(new DG.GeoPoint(82.927, 55.028), 16);
             
            // Получаем объекты кнопок изменения языка первой карты:
            var map1RuBtn = document.getElementById('map1Ru');
            var map1ItBtn = document.getElementById('map1It');
             
            // Получаем объекты кнопок изменения языка второй карты:
            var map2RuBtn = document.getElementById('map2Ru');
            var map2ItBtn = document.getElementById('map2It');
             
            // Добавляем обработчики кликов по кнопкам первой карты:
            map1RuBtn.onclick = function() {
                myMap1.locale.setLang('ru');
            }
            map1ItBtn.onclick = function() {
                myMap1.locale.setLang('it');
            }
             
            // Добавляем обработчики кликов по кнопкам второй карты:
            map2RuBtn.onclick = function() {
                myMap2.locale.setLang('ru');
            }
            map2ItBtn.onclick = function() {
                myMap2.locale.setLang('it');
            }
             
            // Функция, которая следит за картами и печатает на экране историю переключения языков:
            function logCallback(localeEvent) {
                var logContainer = document.getElementById('langChangeLog');
                var text = document.createTextNode('Язык карты ' + localeEvent.getDgMap().getContainerId() + ': ' + localeEvent.getLang());
                var br = document.createElement('br');
                logContainer.appendChild(text);
                logContainer.appendChild(br);
            }
             
            // Включаем логирование истории переключения языков для первой карты:
            myMap1.addEventListener('DgLanguageChange', logCallback);
             
            // Включаем логирование истории переключения языков для второй карты:
            myMap2.addEventListener('DgLanguageChange', logCallback);
        });
    </script>
</head>   
<body>
    <div style="float: left">
        <div>map1:</div>
        <input id="map1Ru" type="button" value="Сменить язык на русский" /> <input id="map1It" type="button" value="Сменить язык на итальянский" />
        <div id="map1" style="width: 800px; height: 200px; margin: 10px;"></div>
 
        <div>map2:</div>
        <input id="map2Ru" type="button" value="Сменить язык на русский" /> <input id="map2It" type="button" value="Сменить язык на итальянский" />
        <div id="map2" style="width: 800px; height: 200px; margin: 10px;"></div>
    </div>
    <div id="langChangeLog" style="float: right; margin: 50px; width: 300px; height: 400px; overflow: auto;"><b>История:</b><br /></div>
</body>
</html>

Открыть пример в новом окне