مارکرها و پاپ‌آپ

مارکر با شناسهٔ پایدار، پاپ‌آپ متنی و ذخیرهٔ جابه‌جایی بسازید.

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

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

مثال تعاملی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)
}
</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"
  />
</template>

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

‏مارکرها#

‏برای هر مارکر id یکتا و ثابت تعیین کنید. تغییر position آن را جابه‌جا و حذف از آرایه آن را حذف می‌کند. مقدار popup متن ساده است؛ tooltip در MapLibre به عنوان DOM تبدیل می‌شود. کلیک رویداد marker-click و پایان کشیدن رویداد marker-dragend(marker, coordinates) ایجاد می‌کند.

‏تابع saveMarker در نمونه، نتیجهٔ کشیدن را در وضعیت برنامه ذخیره می‌کند؛ بدون این کار، رندر بعدی می‌تواند مارکر را به موقعیت کنترل‌شدهٔ قبلی برگرداند. برای MapLibre از MapLibreMarker و برای Leaflet از MapMarker استفاده کنید؛ تنظیمات بومی آن‌ها یکسان نیست.

markers.value = [...markers.value, {
  id: 'new-place', position: [...center.value], popup: 'New place',
}]
markers.value = markers.value.filter(marker => marker.id !== 'new-place')

‏برای ظاهر کاملاً سفارشی، MapLibre یک HTMLElement در ویژگی element می‌پذیرد. ساخت و پاک‌سازی این DOM بر عهدهٔ شماست؛ HTML نامطمئن وارد نکنید. مارکر پیش‌فرض به DOM سفارشی نیاز ندارد. متد openPopup(id) پاپ‌آپ مارکر موجود را باز می‌کند.

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

مارکرها و پاپ‌آپ

اجرا روی نقشهٔ واقعی نشان

‏مارکرها#