HB's Thoughts

If the Universe Is the Answer, What Is the Question?!

28.11.2024 г.

Простичък Vue плъгин за гео локация

Когато пиша плъгин, мисля за него, като самостоятелно парче код, което има собствена логика на работа и е независимо от мястото, на което ще се ползва. Това разбира се не е съвсем вярно, но при проектирането на плъгин, винаги изхождам от тази идея. Все пак всяка система има своя логика и архитектура, която трябва да се спазва - особено за изходящите данни.

Гео локация

В съвременните браузъри е много лесно може да достъпите APIто за гео локация. Извиквате

navigator.geolocation.getCurrentPosition(call_success_function, call_error_function);

и в обекта, който се връща към call_success_function ще получите всичко необходимо, в това число и latitude & longitude. При необходимост можете да проверите, дали браузъра поддържа APIто за гео локация if (!navigator.geolocation) { ... } else { ... }.

Ще добавя една малка абстракция към стандартната функция, която да я направи да работи в асинхронен среда.

async function GeoLocation(): Promise<GeolocationCoordinates> {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      (success) => resolve(location.coords),
      (error) => reject(error)
    );
  });
}

Чуден метод, който ще върне координатите и (както Ви казах в началото) работи независимо от средата в която ще се ползва.

Vue плъгин

В проект, където искаме да използваме, като плъгин, горния метод създавам папка plugins и в нея създавам под-папка geo-location. В тази папка добавям 2 файла - index.ts и GeoLocation.ts. Подразбира се, че съдържанието на GeoLocation.ts е горния метод.

// plugins/geo-location/GeoLocation.ts

export async function GeoLocation(): Promise<GeolocationCoordinates> {
  return new Promise((resolve, reject) => {
    navigator.geolocation.getCurrentPosition(
      (success) => resolve(location.coords),
      (error) => reject(error)
    );
  });
}

В index.ts спазвам стандартната структура на Vue плъгините.

// plugins/geo-location/index.ts

import type { App } from "vue";
import { GeoLocation } from "./GeoLocation";

export default {
  install(app: App) {
    app.provide("GeoLocation", GeoLocation);
  },
};

След което го добавяме в main.ts.

// main.ts

import { createApp } from "vue";
import App from "./App.vue";
import GeoLocationPlugin from "./plugins/geo-location";

const app = createApp(App);

app.use(GeoLocationPlugin);
app.mount("#app");

Използване на плъгина

Тук е причината да напиша тази статиика. За да използвате плъгина в TypeScript среда, ще трябва да внимавате с инициализацията във Vue компонента, в който ще го ползвате.

const GEOLocation = inject<() => Promise<GeolocationCoordinates>>('GeoLocation');

Ako пропуснете каста () => Promise<GeolocationCoordinates> ще получите грешка, че GeoLocation не е функция.


Може да дефинирате и собствен тип:
type GeoLocationType = () => Promise<GeolocationCoordinates>;
const GEOLocation = inject<GeoLocationType>('GeoLocation');

Ако имате мнение или въпроси за статията, не се колебайте да ги споделите.

Влезте в отворената дискусия в GitHub.


Компетентност: Маниак