متدها و دسترسی بومی

دوربین را کنترل کنید، کادر را تنظیم کنید و به موتور بومی دسترسی بگیرید.

۳ دقیقه مطالعهVue 3 / Nuxt 4همراه مثال زنده

مطالب این صفحه

کنترل نقشه از برنامه یکپارچه‌سازی دسترسی به موتور بومی اتصال Nuxt و ثبت سراسری مهاجرت از نسخهٔ ۱

مثال تعاملیMapLibre

Vue 3 · TypeScript

<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import { NeshanMapLibre, MAPLIBRE_STYLES, type Coordinates, type MapLibreMarker } from 'vue-neshan-maps'
import 'vue-neshan-maps/style.css'

const webKey = import.meta.env.VITE_NESHAN_WEB_KEY
const center = ref<Coordinates>([35.72, 51.36])
const zoom = ref(12.2)
const markers = shallowRef<MapLibreMarker[]>([
  {
    "id": "azadi",
    "position": [
      35.6997,
      51.338
    ],
    "popup": "میدان آزادی",
    "tooltip": "مارکر را جابه‌جا کنید",
    "options": {
      "draggable": true
    }
  },
  {
    "id": "milad",
    "position": [
      35.7448,
      51.3753
    ],
    "popup": "برج میلاد",
    "options": {
      "draggable": true
    }
  }
])
function saveMarker(marker: MapLibreMarker, position: Coordinates) {
  markers.value = markers.value.map(item => item.id === marker.id ? { ...item, position } : item)
}
const mapRef = ref<InstanceType<typeof NeshanMapLibre>>()
function fly() { mapRef.value?.flyTo([35.7448, 51.3753], 15) }
</script>

<template>
  <NeshanMapLibre
    v-model="center" v-model:zoom="zoom"
    :api-key="webKey"
    :styles="{ height: '420px' }"
    :center-marker="false"
    :map-style="MAPLIBRE_STYLES.light"
    :traffic="false" :poi="false"
    :markers="markers" @marker-dragend="saveMarker"
    ref="mapRef"
  />
  <button @click="fly">Milad Tower</button>
</template>

متغیر VITE_NESHAN_WEB_KEY را در .env.local خارج از Git تنظیم کنید. کد مطابق کنترل‌های همین مثال است و کلید واقعی در آن نیست.

‏کنترل نقشه از برنامه#

‏از ref کامپوننت مطابق نمونهٔ کامل استفاده کنید. دکمه‌ها را تا رویداد ready غیرفعال نگه دارید و در destroy وضعیت آمادگی را پاک کنید.

هدف	روش
‏نمایش همهٔ مارکرها	`fitToMarkers()` یا prop واکنش‌پذیر `fitMarkers`
‏حرکت به نقطه	`flyTo([latitude, longitude], zoom)`
‏نمایش محدوده	`fitBounds(bounds, options)` با ترتیب مختصات بومی موتور
‏اصلاح اندازه پس از بازشدن پنل پنهان	`invalidateSize()`؛ تغییر اندازهٔ معمول خودکار است
‏راه‌اندازی مجدد	`retry()` با خروجی Promise
‏درخواست موقعیت دستگاه	`locate({ setView: true, maxZoom: 16 })`

‏موقعیت را پس از اقدام مشخص کاربر درخواست کنید. HTTPS یا localhost و اجازهٔ مرورگر لازم است. رویدادهای location-found و location-error را مدیریت کنید؛ همهٔ دستگاه‌ها قادر به ارسال موقعیت نیستند. رویداد ready موفقیت راه‌اندازی است و موفقیت مجوز همهٔ کاشی‌ها را تضمین نمی‌کند.

‏یکپارچه‌سازی#

‏دسترسی به موتور بومی#

‏برای نگه‌داشتن ref بومی، useNeshanMapLibre را استفاده و هر دو handler چرخهٔ عمر را متصل کنید. کامپوننت نقشه را آزاد می‌کند و composable ارجاع خود را پاک می‌کند. API بومی MapLibre بر خلاف متد عمومی flyTo کامپوننت، طول جغرافیایی را اول می‌گیرد.

vue

<script setup lang="ts">
import { NeshanMapLibre, useNeshanMapLibre } from 'vue-neshan-maps'
import 'vue-neshan-maps/style.css'
const webKey = import.meta.env.VITE_NESHAN_WEB_KEY
const { map, onReady, onDestroy } = useNeshanMapLibre()
function go() {
  // Native MapLibre coordinates are LONGITUDE first.
  map.value?.flyTo({ center: [51.338, 35.6997], zoom: 15 })
}
</script>
<template>
  <button :disabled="!map" @click="go">Azadi Square</button>
  <NeshanMapLibre :api-key="webKey" @ready="onReady" @destroy="onDestroy" />
</template>

‏برای Leaflet از useNeshanMap استفاده کنید؛ مقدار ready برابر { map, L } است. در MapLibre این مقدار { map, maplibre } است. API و افزونهٔ بومی دو موتور یکسان نیستند. برای تغییر options مخصوص سازنده، با :key کامپوننت را دوباره mount کنید.

‏اتصال Nuxt و ثبت سراسری#

‏واردکردن بسته در SSR ایمن است و موتور پس از mount راه‌اندازی می‌شود. CSS را سراسری در تنظیمات Nuxt وارد کنید؛ اگر اتصال اطراف نقشه نیاز دارد، از فایل .client.vue یا <ClientOnly> استفاده کنید. کلید وب را از تنظیمات عمومی و کلید سرویس را فقط از تنظیمات خصوصی سرور بخوانید.

export default defineNuxtConfig({
  css: ['vue-neshan-maps/style.css'],
  runtimeConfig: { public: { neshanWebKey: '' } },
})

‏متغیر NUXT_PUBLIC_NESHAN_WEB_KEY را در محیط استقرار تنظیم کنید. مثال Nuxt و افزونه کد کامل اتصال را دارد. واردکردن محلی ساده است؛ در صورت نیاز app.use(NeshanMapPlugin) هر دو کامپوننت را سراسری ثبت می‌کند.

‏مهاجرت از نسخهٔ ۱#

‏نسخهٔ ۲ برای Vue 3.5.43 به بعد است و واردکردن CSS ضروری است. Vue وابستگی peer است. اسکریپت UMD قدیمی را با import بسته جایگزین کنید. در Leaflet ویژگی‌های options.key، options.center و رویدادهای latitude و longitude حفظ شده‌اند؛ برای کد جدید apiKey و دو مدل را ترجیح دهید. دادهٔ شکل‌ها و مارکرها قابل استفاده است، ولی تنظیمات مارکر بومی هنگام تغییر موتور باید تطبیق یابد. نصب‌های قدیمی خودکار تغییر نمی‌کنند.

بخشی نیاز به توضیح بیشتر دارد؟مشاهدهٔ متن راهنما گزارش ایراد