مدل‌ها و مختصات

<script setup lang="ts">
import { ref } from 'vue'
import { NeshanMapLibre, MAPLIBRE_STYLES, type Coordinates } 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)
</script>

<template>
  <NeshanMapLibre
    v-model="center" v-model:zoom="zoom"
    :api-key="webKey"
    :styles="{ height: '420px' }"
    :center-marker="true"
    :map-style="MAPLIBRE_STYLES.light"
    :traffic="false" :poi="false"
    :pick-on-click="true"
  />
  <p>{{ center[0] }}, {{ center[1] }} · {{ zoom }}</p>
</template>

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