Выбор отображаемого блока HTML-кода в соответствии с географией

Материал из Lblss.ru
Перейти к: навигация, поиск

Задача: автоматически отображать контакты региональных представительств в соответствии с регионом, откуда заходит на сайт пользователь.

Для определения географического положения использован API Яндекс-карт.

<script src="http://api-maps.yandex.ru/1.1/index.xml" type="text/javascript"></script>
 
<script>
    // Генерилка хеш-кода
    String.prototype.hashCode = function() {
        var hash = 0, i, chr, len;
        if (this.length === 0) return hash;
        for (i = 0, len = this.length; i < len; i++) {
            chr   = this.charCodeAt(i);
            hash  = ((hash << 5) - hash) + chr;
            hash |= 0; // Convert to 32bit integer
        }
        return hash;
    };
 
    // Инициализация
    $(document).ready(function(){
        var option;
        var selector = document.getElementById('RegionSelector');
        var maps = YMaps;
        var region = maps.location.region;
        var regionHash = '' + region.hashCode();
// Для тестового отображения названий регионов (+ html-код в конце)
//         document.getElementById('region').innerHTML = region;
//         document.getElementById('regionCode').innerHTML = regionHash;
 
        var regions = {
            "-2057674641": "Белгород", // "Белгородская область"
            "-1515466894": "Екатеринбург", // "Свердловская область"
            "125008614": "Казань", // "Республика Татарстан"
            "793401449": "Краснодар", // "Краснодарский край"
            "-1795410311": "Москва", // "Москва и Московская область"
            "-1372440751": "Санкт-Петербург", // "Санкт-Петербург и Ленинградская область"
            "357751849": "Уфа", // "Республика Башкортостан"
            "353433007": "Челябинск", // "Челябинская область"
        }
 
        if(!regions.hasOwnProperty(regionHash)) regionHash = "-1795410311"; // Москва по дефолту
        for(r in regions) { // Забивка селекта опциями по списку
            option = document.createElement('option');
            option.value = r; // Айди (хеш)
            option.text = regions[r]; // Название региона
            if(r == regionHash) {
                option.selected = true; // Подсветка определённого региона в селекте
                document.getElementById(r).style.display = "block"; // Отображение нужного фрагмента контактной инфо на странице
            }
            else
                document.getElementById(r).style.display = "none"; // Скрыть ненужный блок
            selector.appendChild(option);
        }
    });
 
    // Ручная переключалка
    function swRegion(id) {
        $(".contact").css("display", "none");
        document.getElementById(id).style.display = "block";
    }
</script>
 
<p>Выберите Ваш город (или ближайший к нему):</p>
<select id="RegionSelector" onchange="swRegion(this.value)"></select>
 
<div class="contactsMain">
    <div class="contact" id="-2057674641">
        <h3>Филиал в Белгороде</h3>
    </div>
    <div class="contact" id="-1515466894">
        <h3>Филиал в Екатеринбурге</h3>
    </div>
......
    <div class="contact" id="-1795410311">
        <h3>Филиал в Москве</h3>
    </div>
......
    <div class="contact" id="353433007">
        <h3>Филиал в Челябинске</h3>
    </div>
</div>
 
<!-- Тестирование названия региона.  -->
<!-- Когда будут выполнены все проверки по работе страницы в региоонах, это надо убрать от сих -->
<!--<br />
Определён регион: <span id="region"></span>
<br />
Хеш региона: <span id="regionCode"></span>-->
<!-- и до сих -->
Персональные инструменты