نحوه استفاده از پلاگین Ionic Capacitor Google Maps با Vue JS

در این پست وبلاگ، نحوه ساخت یک برنامه تلفن همراه Vue.js که با Google Maps با استفاده از پلاگین Ionic Capacitor Google Map ادغام می شود را بررسی خواهیم کرد. ما به صورت گام به گام کد را مرور خواهیم کرد و در مورد کد در بخش اسکریپت و بخش قالب اجزای مورد استفاده برای ساخت این برنامه وب و موبایل بحث خواهیم کرد.

این برنامه با استفاده از Ionic Framework و Vue JS ساخته شده است. ما فقط از Ionic Framework برای مؤلفه‌های UI استفاده می‌کنیم، و این مؤلفه‌ها را می‌توان با هر مؤلفه رابط کاربری سازگار vue js جایگزین کرد.

HomePage.vue

بخش اسکریپت:

واردات:
ما با وارد کردن وابستگی ها و اجزای لازم شروع می کنیم. ما اجزای چارچوب Ionic را از داخل وارد می کنیم @ionic/vue بسته، و ما از بسته vue برای دسترسی به تابع ref استفاده می کنیم، که ما را قادر می سازد ارجاعات واکنشی ایجاد کنیم. علاوه بر این، ما دو جزء سفارشی وارد می کنیم، MyMap و MarkerInfoWindow، از فایل های دیگر در نهایت ما وارد می کنیم Capacitor از چارچوب خازن، که برای ساخت برنامه های چند پلتفرمی استفاده می شود.

import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonPopover,
  modalController,
} from "@ionic/vue";
import { ref } from "vue";
import MyMap from "./MyMap.vue";
import MarkerInfoWindow from "../components/MarkerInfoWindow.vue";
import { Capacitor } from "@capacitor/core";

اعلامیه های متغیر:
ما دو متغیر مرجع واکنشی را اعلام می کنیم: markerInfo و markerIsOpen. این متغیرها به ترتیب اطلاعات مربوط به نشانگر انتخابی فعلی و باز یا بسته بودن نشانگر باز یا بسته را در خود نگه می دارند.

یک آرایه به نام تعریف می کنیم markerData که داده های نمونه را برای نشانگرهای روی نقشه نگه می دارد. هر شی نشانگر شامل coordinates (طول و عرض جغرافیایی)، الف title، و الف snippet. در صورت نیاز می‌توانید این داده‌ها را با افزودن نشانگرهای بیشتر سفارشی کنید.

const markerInfo = ref<any>();
const markerIsOpen = ref<boolean>(false);

// sample data for the map
const markerData = [
  {
    coordinate: { lat: 37.769, lng: -122.446 },
    title: "title one",
    snippet: "title one snippet content will be presented here",
  },
  {
    coordinate: { lat: 37.774, lng: -122.434 },
    title: "title two",
    snippet: "title two snippet content will be presented here",
  },
  {
    coordinate: { lat: 37.783, lng: -122.408 },
    title: "title three",
    snippet: "title three snippet content will be presented here",
  },
  // Add more points as needed
];

کارکرد:

openModal یک کنترل کننده رویداد برای زمانی که یک نشانگر کلیک می شود. با استفاده از یک پنجره مودال ایجاد و ارائه می کند modalController.create(). مدال را نشان می دهد MarkerInfoWindow جزء، که اطلاعات دقیق در مورد را نشان می دهد marker.

mapClicked یک شنونده رویداد برای زمانی است که روی نقشه کلیک می شود. این به سادگی یک پیام را به کنسول ثبت می‌کند و به شما امکان می‌دهد وقتی روی نقشه کلیک می‌کنید، هر اقدام دلخواه را انجام دهید.

getMarkerInfo الف می گیرد marker شی به عنوان ورودی است و اطلاعات مرتبط را از markerData آرایه. این تابع برای بازیابی اطلاعات نشانگر زمانی که روی یک نشانگر کلیک می شود استفاده می شود.

markerClicked یک کنترل کننده رویداد برای زمانی که یک نشانگر کلیک می شود. بررسی می کند که آیا پلت فرم بومی نیست (یعنی در حال اجرا در وب) با استفاده از Capacitor.isNativePlatform(). اگر بومی نباشد، آن را صدا می کند openModal عملکردی برای نمایش اطلاعات نشانگر به صورت مدال. این تمایز ضروری است زیرا نسخه وب یک پنجره اطلاعات را مستقیماً روی نقشه نشان نمی دهد.

const openModal = async (marker: any) => {
  const modal = await modalController.create({
    component: MarkerInfoWindow,
    componentProps: {
      marker,
    },
    initialBreakpoint: 0.2,
    breakpoints: [0, 0.2],
    backdropBreakpoint: 0,
    showBackdrop: false,
    backdropDismiss: true,
  });

  modal.present();

  const { data, role } = await modal.onWillDismiss();
};


const mapClicked = () => {
  console.log("mapClicked");
};


const getMarkerInfo = (marker: { latitude: number; longitude: number }) => {
  return markerData.filter(
    (m) =>
      m.coordinate.lat === marker.latitude &&
      m.coordinate.lng === marker.longitude
  )[0];
};


const markerClicked = (event: any) => {
  console.log(event);


  // only use dialog in web since we doesnt show info window
  if (!Capacitor.isNativePlatform()) {
    openModal(getMarkerInfo(event));
  }
};

بخش الگو:

بخش قالب ساختار و طرح‌بندی قالب HTML کامپوننت ما را با استفاده از مؤلفه‌های Ionic Vue تعریف می‌کند. از آن بگذریم:

<ion-page> صفحه ای را در برنامه Ionic ما نشان می دهد. این یک ظرف برای کل محتوا فراهم می کند.

<ion-header> شامل نوار ابزار هدر برای صفحه است. ما از آن برای نمایش عنوان برنامه استفاده می کنیم.

<ion-toolbar> نشان دهنده یک نوار ابزار درون هدر است. مکانی برای دکمه ها، عنوان ها و سایر عناصر فراهم می کند.

<ion-title> عنوان صفحه را نمایش می دهد. در این حالت، روی “Vue + خازن + Google Maps” تنظیم می شود.

<ion-content> حاوی محتوای اصلی صفحه است. این یک منطقه قابل پیمایش را فراهم می کند که در آن نقشه و نشانگرهای خود را نمایش خواهیم داد.

<my-map> یک جزء سفارشی است که نقشه را نشان می دهد. عبور می کنیم در markerData برای ارائه اطلاعات نشانگر. کامپوننت همچنین دو رویداد را منتشر می کند: onMapClicked و onMarkerClicked، که به ما امکان می دهد به ترتیب کلیک های نقشه و نشانگر را مدیریت کنیم.

<ion-popover> نشان دهنده یک popover است که یک پنجره کوچک روی هم قرار دارد. طول می کشد isOpen برای کنترل وضعیت قابل مشاهده پاپاور

  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Vue + Capacitor + Google Maps</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <my-map
        :markerData="markerData"
        @onMapClicked="mapClicked"
        @onMarkerClicked="markerClicked"
      ></my-map>
      <ion-popover
        :is-open="markerIsOpen"
        size="cover"
        @did-dismiss="markerIsOpen = false"
      >
        <ion-content class="ion-padding">
          <div>{{ markerInfo?.title }}</div>
        </ion-content>
      </ion-popover>
    </ion-content>
  </ion-page>

MyMap.vue

در این بخش، ما در مورد یک جزء جدید که مسئول رندر کردن نقشه و نشانگرها با استفاده از افزونه Google Maps خازن است، صحبت خواهیم کرد. بخش اسکریپت که شامل منطق است و بخش قالب که ساختار کامپوننت را تعریف می کند را توضیح می دهیم.

بخش اسکریپت:

بخش اسکریپت شامل منطق و عملکرد جزء نقشه سفارشی است. بیایید آن را تجزیه کنیم:

واردات
ما توابع لازم را از بسته vue وارد می کنیم، مانند onMounted، nextTick، ref و onUnmounted. این توابع برای رسیدگی به رویدادهای چرخه حیات جزء استفاده می شود. ما همچنین شی GoogleMap را از بسته @capacitor/google-maps وارد می‌کنیم که عملکرد تعامل با افزونه Google Maps را فراهم می‌کند.

import { onMounted, nextTick, ref, onUnmounted } from "vue";
import { GoogleMap } from "@capacitor/google-maps";

اعلامیه های پشتیبانی و انتشار
کامپوننت دو بخش را تعریف می کند: props و emits. Props به ما امکان می دهد داده ها را به کامپوننت منتقل کنیم و انتشارات ما را قادر می سازد رویدادهای سفارشی را راه اندازی کنیم.

در این مورد، کامپوننت انتظار یک پایه با نام دارد markerData که شامل آرایه ای از اشیاء نشانگر است.
بخش emits دو رویداد را اعلام می کند: onMarkerClicked و onMapClicked. هنگامی که روی یک نشانگر یا نقشه کلیک می شود، این رویدادها به مؤلفه والد بازگردانده می شوند.

// PROPS
const props = defineProps<{
  markerData: { coordinate: any; title: string; snippet: string }[];
}>();
// EVENTS
const emits = defineEmits<{
  (event: "onMarkerClicked", info: any): void;
  (event: "onMapClicked"): void;
}>();

اعلامیه های متغیر

mapRef یک متغیر مرجع واکنشی است که ارجاعی به عنصر نقشه در DOM دارد.
markerIds یک متغیر مرجع واکنشی است که آرایه ای از شناسه های نشانگر را در خود نگه می دارد.
newMap متغیری است که نمونه ای از شی GoogleMap را نگه می دارد.

const mapRef = ref<HTMLElement>();
const markerIds = ref<string[] | undefined>();
let newMap: GoogleMap;

قلاب چرخه حیات

onMounted یک قلاب چرخه حیات است که زمانی که کامپوننت روی DOM نصب می شود اجرا می شود. در داخل این قلاب استفاده می کنیم nextTick منتظر بمانید تا کامپوننت به طور کامل رندر شود. سپس، ما به createMap تابع مقداردهی اولیه و رندر نقشه.

onUnmounted یک قلاب چرخه حیات است که زمانی اجرا می شود که قطعه در شرف جدا شدن است. در داخل این قلاب، ما به نام removeMarkers روش از newMap شیء حذف نشانگرها از نقشه.

onMounted(async () => {
  console.log("mounted ", mapRef.value);
  await nextTick();
  await createMap();
});

// remove markers on unmount
onUnmounted(() => {
  console.log("onunmounted");
  newMap.removeMarkers(markerIds?.value as string[]);
});

اعلامیه های عملکرد

addSomeMarkers یک تابع همگام است که نمونه ای از شی GoogleMap را به عنوان پارامتر می گیرد. هر نشانگر موجود را از نقشه حذف می کند و نشانگرهای جدیدی را بر اساس نشانگر داده های ارسال شده به مؤلفه اضافه می کند.

createMap یک تابع همگام است که مسئول ایجاد و رندر نقشه است. ابتدا بررسی می کند که آیا mapRef ارزش وجود دارد سپس، از پلاگین Capacitor Google Maps برای ایجاد یک نمونه نقشه جدید استفاده می کند. شناسه نقشه، عنصر DOM مرتبط، کلید API و پیکربندی اولیه (مرکز و سطح زوم) را تنظیم می کند.
پس از ایجاد نقشه، آن را فراخوانی می کند addSomeMarkers عملکرد اضافه کردن نشانگرها به نقشه. در نهایت، شنوندگان رویداد را تنظیم می‌کند تا کلیک‌های نشانگر و کلیک‌های نقشه را مدیریت کنند و رویدادهای مناسب را به مؤلفه والد ارسال کنند.

const addSomeMarkers = async (newMap: GoogleMap) => {
  markerIds?.value && newMap.removeMarkers(markerIds?.value as string[]);

  // Plot each point on the map
  let markers = props.markerData.map(({ coordinate, title, snippet }) => {
    return {
      coordinate,
      title,
      snippet,
    };
  });

  markerIds.value = await newMap.addMarkers(markers);
};

/**
 * 
 */
async function createMap() {
  if (!mapRef.value) return;

  // render map using capacitor plugin
  newMap = await GoogleMap.create({
    id: "my-cool-map",
    element: mapRef.value,
    apiKey: import.meta.env.VITE_APP_YOUR_API_KEY_HERE as string,
    config: {
      center: {
        lat: 37.783,
        lng: -122.408,
      },
      zoom: 12,
    },
  });

  // add markers to map
  addSomeMarkers(newMap);

  // Set Event Listeners...
  // Handle marker click, send event back to parent
  newMap.setOnMarkerClickListener((event) => {
    emits("onMarkerClicked", event);
  });

  // Handle map click, send event back to parent
  newMap.setOnMapClickListener(() => {
    emits("onMapClicked");
  });
}

بخش الگو

بخش template ساختار قالب HTML جزء را تعریف می کند. در اینجا یک تفکیک وجود دارد:

<div>: به عنوان یک محفظه برای جزء نقشه عمل می کند.

<capacitor-google-map>: نمایانگر مؤلفه نقشه سفارشی ارائه شده توسط افزونه Google Maps خازن است. یک ویژگی ref (mapRef) را برای ارجاع به عنصر نقشه می‌پذیرد و از سبک‌های درون خطی برای تنظیم نمایش، عرض و ارتفاع نقشه استفاده می‌کند.

<template>
  <div>
    <capacitor-google-map
      ref="mapRef"
      style="display: inline-block; width: 100vw; height: 86vh"
    >
    </capacitor-google-map>
  </div>
</template>

در این بخش، کد یک جزء نقشه سفارشی که با خازن و نقشه گوگل ادغام می شود را بررسی کردیم. بخش اسکریپت منطق، از جمله ایجاد نقشه، افزودن نشانگرها و مدیریت رویدادها را مدیریت می کند. قسمت template ساختار قالب HTML کامپوننت را تعریف می کند که شامل یک <div> ظرف و <capacitor-google-map> عنصر ارائه شده توسط پلاگین Capacitor Google Maps.

MarkerInfoWindow.vue

در این بخش، یک مؤلفه Vue را که اطلاعات نشانگر را نمایش می دهد، مورد بحث قرار می دهیم. ما از این مؤلفه در این مثال فقط برای نسخه وب برنامه از زمان GoogleMaps مورد انتظار استفاده می کنیم InfoWindow پشتیبانی نمی شود.

ما بخش الگو را توضیح می دهیم که داده های نشانگر را ارائه می دهد و بخش اسکریپت را که منطق مؤلفه را تعریف می کند.

بخش الگو:

بخش قالب وظیفه ارائه ساختار HTML کامپوننت را بر عهده دارد. بیایید آن را تجزیه کنیم:

<ion-content>:
این کامپوننت فریمورک Ionic ناحیه محتوای اصلی کامپوننت را نشان می دهد. این به عنوان یک ظرف برای محتوای جزء عمل می کند.

<p>:
این عنصر پاراگراف HTML اطلاعات نشانگر را نمایش می دهد. محتوای پاراگراف به صورت پویا با استفاده از عبارت Vue تولید می شود JSON.stringify(marker,null,2). از آن استفاده می کند JSON.stringify() برای تبدیل پایه نشانگر به یک رشته JSON فرمت شده با تورفتگی 2 فاصله.

این فقط یک مکان نگهدار برای اطلاعاتی بود که می‌خواهید آن را تشکیل دهید و برای کاربر نمایش دهید تا ببیند روی چه نشانگری کلیک شده است.

<template>
  <ion-content >
    <p>{{JSON.stringify(marker,null,2)}}</p>
  </ion-content>
</template>

بخش اسکریپت:

بخش اسکریپت شامل منطق و عملکرد کامپوننت است. از آن بگذریم:

واردات:
ما تمام اجزای Ionic را از بسته @ionic/vue که برای این کامپوننت مورد نیاز است وارد می کنیم. این کامپوننت در قسمت قالب برای نمایش ناحیه محتوا استفاده می شود.

اعلانات و اقلام ارسالی:
مؤلفه دو بخش را تعریف می کند: props و emits. Props به ما امکان می دهد داده ها را به کامپوننت منتقل کنیم و انتشارات ما را قادر می سازد رویدادهای سفارشی را راه اندازی کنیم.

در این مورد، کامپوننت انتظار یک پایه با نام دارد marker که شامل یک شی با coordinate و title خواص

بخش emits یک رویداد را با نام اعلام می کند onDismiss.

<script setup lang="ts">
import {
  IonContent,
} from "@ionic/vue";

// PROPS
const props = defineProps<{
  marker: { coordinate: any; title: string };
}>();

const emits = defineEmits<{
  (event: "onDismiss"): void;
}>();

خلاصه:
در این بخش، کد یک جزء Vue را که اطلاعات نشانگر را نمایش می دهد، بررسی کردیم. بخش الگو داده های نشانگر را با استفاده از JSON.stringify() اصطلاح. بخش اسکریپت props را تعریف می کند و اعلان ها را منتشر می کند.

می توانید از این مؤلفه برای نمایش اطلاعات نشانگر در برنامه Vue خود استفاده کنید. بخش قالب را در صورت نیاز سفارشی کنید تا به چیدمان و استایل دلخواه برسید.

نتیجه:

در این پست وبلاگ، کد یک جزء نقشه سفارشی ساخته شده با Vue، Ionic Capacitor و Google Maps را بررسی کردیم.

با درک این کد، اکنون پایه ای برای ساخت یک برنامه موبایل Vue دارید که با خازن Ionic و نقشه های گوگل ادغام می شود. می‌توانید با افزودن قابلیت‌های اضافی یا استایل‌سازی متناسب با نیازهای خاص خود، مؤلفه را بیشتر سفارشی کنید.

به یاد داشته باشید که کلید API خود را به درستی پیکربندی کنید createMap برای اطمینان از عملکرد صحیح افزونه Google Maps. علاوه بر این، برای مشاهده ویژگی‌ها و قابلیت‌های پیشرفته‌تر، به راحتی می‌توانید مستندات خازن Ionic و Google Maps را کاوش کنید.