Как да разпознаете местоположението на посетителите на уебсайта си чрез JavaScript

Снимка на Горан Ивос на Unsplash

Откриването на местоположението на потребителите на уебсайта Ви е полезно поради различни причини.

Можете например да искате да показвате различно съдържание, може би на различни езици за хора от различни страни, или да показвате насочена информация на посетители от различни места.

Каквито и да са причините ви, имате две възможности:

  1. API за геолокация и
  2. Търсене на IP адрес

API за геолокация

API за геолокация е нова функция на HTML5, която позволява на посетителя на уеб страница да сподели местоположението си с вас, ако решат.

Когато се опитвате да извлечете местоположението с помощта на този API, на потребителя се показва подкана, която ги пита дали биха искали да споделят местоположението си с вашия сайт.

Пример за вида на подканата, показана на потребителя

Очевидно това означава, че няма да получите местоположението, ако потребителят реши да не споделя местоположението си с вас.

Недостатъци: Работи само на защитени сървъри (https). Не се поддържа в Internet Explorer 10 и по-нови версии, нито в OperaMini.

Изходът от кода ни дава само координатите. Ами ако се нуждаете от действителното местоположение или получите адреса с думи? Ще говорим за това, след като обсъдим търсене на IP.

Търсене на IP адрес

Търсене на IP адрес е друг начин да получите местоположението на вашия посетител. Обикновено използваме публични услуги / API за търсене на IP адреси за тази опция. Някои от тях са платени услуги, а някои са безплатни.

Примерите включват IP Geolocation API, IPinfo и GEOIP DB. Те предоставят и данните в различни формати, като JSON, XML и CSV. За да разберете добре как да използвате тези услуги, прочетете тяхната документация.

Ще използвам IP Geolocation API за моя пример. Бих могъл да използвам ванилов JavaScript, но няма да го направя. По-лесно е с библиотеки като jQuery.

Това като изход на конзолата ми:

Недостатъци: Въпреки че страната, предоставена от повечето услуги за търсене на IP, е почти винаги точна, координатите не винаги са точни. Освен това, ако ще отправяте много заявки, някои от тези услуги изискват да получите API ключ и може да се наложи да платите за услугата.

Можете да използвате IP търсенето като алтернатива или резервно копие за API за геолокация в браузъри, които не поддържат геолокация, или да ви кажат, когато възникне грешка, като тази:

След като разполагаме по един или друг начин с местоположението си, ще преобразуваме получената от нас географска ширина и дължина в по-изчерпателен адрес с помощта на API за обратно геокодиране на Google Maps.

Според google обратното геокодиране е процесът на преобразуване на географски координати в четими за човека адреси. Всичко, от което се нуждаем, е api ключ. Следвайте стъпките, за да го получите тук.

Ето какво имам:

Примерен изход на API за обратно геокодиране

Можете да играете с обекта, за да получите желания адрес във формат, който най-много ви харесва.

Поставяйки всичко заедно, имаме следния код. (Обърнете внимание, че функцията ipLookUp беше променена.)

На този етап ние знаем как да възстановим местоположението на нашия потребител, независимо какво и сега можете да персонализирате кода към вашия собствен уникален проект.

Надявам се да сте научили нещо, благодаря за четенето!

Програмен код

Можете да намерите кода за тази статия в GitHub.