سازگاری Leaflet

<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import { NeshanMapLeaflet, type Coordinates, type MapMarker } 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<MapMarker[]>([
  {
    "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: MapMarker, position: Coordinates) {
  markers.value = markers.value.map(item => item.id === marker.id ? { ...item, position } : item)
}
</script>

<template>
  <NeshanMapLeaflet
    v-model="center" v-model:zoom="zoom"
    :api-key="webKey"
    :styles="{ height: '420px' }"
    :center-marker="false"
    :options="{ maptype: 'dreamy' }"
    :markers="markers" @marker-dragend="saveMarker"
  />
</template>

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