CODE

GEO: автоопределение города и вывод информации по условию jQuery

Содержание

Приветствую, коллеги! Сегодня, в материале этой статьи, мы научимся определять город на автомате и по условию показывать какой-то определенный контент.

Для чего это?

Я буду рассматривать пример, когда нам нужно определить город и показать его посетителю, в добавок отобразить ему определенный номер телефона. Думаю, многие видели такую фишку на множестве «больших» сайтов. И так, поехали!

Кстати, о похожей фишке я писал в предыдущей статье, обязательно посмотрите (в блоке ссылок).

Что понадобится?

Нам понадобится всего пара манипуляций, каких-то сверх сложностей не требуется. Первым делом, как обычно, подключаем необходимые скрипты. Если библиотека jQuery уже подключена, то второй раз ее не подключаем.

<script src="http://yastatic.net/jquery/2.1.1/jquery.min.js"></script>
<script src="https://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"></script>

Следом, наш скрипт, который и организовывает волшебство.

jQuery(document).ready(function($) {
   ymaps.ready(function() {
      var geolocation = ymaps.geolocation;
      if (geolocation.city == undefined) {
         // Если город не определился, то выводим "неопределен"
         // По умолчанию город Москва (указываем в html)
         $('.ci-ty span').html('неопределен');
      } else {
         $('.ci-ty span').html('' + geolocation.city);
      }
      // Для нужных городов прописываем свои телефоны
      // Для других городов покажется номер по умолчанию - "+7 (123) 000-00-00" (указываем в html)
      if (geolocation.city == "Москва") {
         $('.num-ber').html('+7 (123) 111-11-11')
      };
      if (geolocation.city == "Химки") {
         $('.num-ber').html('+7 (123) 222-22-22')
      };
      if (geolocation.city == "Зеленоград") {
         $('.num-ber').html('+7 (123) 333-33-33')
      };

   });
});

Читайте также:

Далее, добавляем html блоки или указываем в скриптах уже существующие при помощи классов. Также в этих блоках указываем город и телефон по умолчанию или оставляем разметку пустой.

<!-- Указываем текст для города по умолчанию -->
<div class="ci-ty">Ваш город: <span>Москва</span></div>

<!-- Указываем текст для телефона по умолчанию -->
<div class="num-ber">+7 (123) 000-00-00</div>