جستجوی آدرس

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

مبتنی بر Leaflet

نسخه جاری v1.0.0

در بخش زیر نحوه افزودن فایلهای کتابخانه و افزودن افزونه به وب سایت قرار گرفته است. در بخش راهنمای استفاده، طریقه استفاده از رخدادها و دریافت آدرس با همراه نمونه و تشریح خصوصیات شرح داده شده است.

شروع سریع

افزودن فایل‌های کتابخانه

فایل‌های JavaScript و CSS را در تگ head فایل HTML اضافه کنید.

<script src="https://cdn.parsimap.ir/third-party/leaflet/v1.7.1/leaflet.js"></script>
<link
  href="https://cdn.parsimap.ir/third-party/leaflet/v1.7.1/leaflet.css"
  rel="stylesheet"
/>
<script src="https://cdn.parsimap.ir/third-party/leaflet/plugins/parsimap-tile/v1.0.0/parsimap-tile.js"></script>

افزودن افزونه به نقشه

کد زیر را در تگ body فایل HTML قرار دهید.

<script src="https://cdn.parsimap.ir/third-party/leaflet/plugins/parsimap-geocoder/v1.0.0/parsimap-geocoder.js"></script>
<link
href="https://cdn.parsimap.ir/third-party/leaflet/plugins/parsimap-geocoder/v1.0.0/parsimap-geocoder.css"
rel="stylesheet"
/>
<div id="map" style="width: 100%; height: 400px"></div>
<script>
const map = new L.Map('map', {
  center: [35.7575, 51.41],
  zoom: 12,
})

L.parsimapTileLayer('parsimap-streets-v11-raster', {
  key: 'PMI_MAP_TOKEN',
  service: true,
}).addTo(map)

const control = new ParsimapGeocoder()

map.addControl(control)
</script>

مبتنی بر Mapbox GL

نسخه جاری v1.0.0

در بخش زیر نحوه افزودن فایلهای کتابخانه و افزودن افزونه به وب سایت قرار گرفته است. در بخش راهنمای استفاده، طریقه استفاده از رخدادها و دریافت آدرس با همراه نمونه و تشریح خصوصیات شرح داده شده است.

شروع سریع

افزودن فایل‌های کتابخانه

فایل‌های JavaScript و CSS را در تگ head فایل HTML اضافه کنید.

<script src="https://cdn.parsimap.ir/third-party/mapbox-gl-js/v1.13.0/mapbox-gl.js"></script>
<link
  href="https://cdn.parsimap.ir/third-party/mapbox-gl-js/v1.13.0/mapbox-gl.css"
  rel="stylesheet"
/>

افزودن افزونه به نقشه

کد زیر را در تگ body فایل HTML قرار دهید.

<script src="https://cdn.parsimap.ir/third-party/mapbox-gl-js/plugins/parsimap-geocoder/v1.0.0/parsimap-geocoder.js"></script>
<link
  href="https://cdn.parsimap.ir/third-party/mapbox-gl-js/plugins/parsimap-geocoder/v1.0.0/parsimap-geocoder.css"
  rel="stylesheet"
/>
<div id="map" style="width: 100%; height: 400px"></div>
<script>
  mapboxgl.setRTLTextPlugin(
    'https://cdn.parsimap.ir/third-party/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
    null,
  )

  const map = new mapboxgl.Map({
    container: 'map',
    style:
      'https://api.parsimap.ir/styles/parsimap-streets-v11?key=PMI_MAP_TOKEN&service=true',
    center: [51.4, 35.7],
    zoom: 8,
  })

  const control = new ParsimapGeocoder()

  map.addControl(control)
</script>

به طور پیش فرض کتابخانه Mapbox GL JS قادر به پشتیبانی از زبان‌های RTL برای نمونه فارسی نیست، که برای این منظور از پلاگین mapbox-gl-rtl-text استفاده باید نمود. برای استفاده از استایل‌های پارسی‌مپ لازم است بجای عبارت PMI_MAP_TOKEN توکن معتبری قرار یابد.

راهنمای استفاده

در نمونه کدهای زیر منظور از متغییر control یک شیء از کلاس ParsimapGeocoder است که به صورت زیر تعریف شده و به نقشه افزوده می‌شود. این راهنما در بخش های قبل به همراه نمونه کد، توضیح داده شده است.

const control = new ParsimapGeocoder()

بکارگیری رخدادها

با استفاده از رخداد result می‌توانید هنگامی که کاربر بروی یکی از گزینه‌های موجود در لیست جستجو کلیک کرد، مطلع شوید.

control.on('result', function (event) {
  const lngLat = event.lngLat
  const inputString = event.inputString
})

دریافت آدرس

برای دریافت آدرس یک نقطه که از طریق جستجو یا کلیک بروی نقشه نمایش یافته است می‌توانید از متد reverseLocation استفاده کنید. دریافت آدرس، یک متد asynchronous (ناهمگام) است که برای دریافت اطلاعات جغرافیایی و آدرس نقطه می‌توانید به یکی از روشهای زیر عمل کنید.

بکارگیری به صورت همگام (synchronous)

async function reverseLocation() {
  const reverse = await control.reverseLocation()
  const address = reverse.address
  const lngLat =  reverse.lngLat
}

بکارگیری به صورت ناهمگام (asynchronous)

control.reverseLocation().then((reverse) => {
  const lngLat = reverse.lngLat
  const address = reverse.address
})

رفع خطاها

در صورتیکه توکن استفاده شده در افزونه معتبر نباشد و یا مدت زمان مجاز استفاده از افزونه به پایان رسیده باشد با اخطار "دسترسی به اجزای نقشه محدود شده است" مواجه خواهید شد. در زیر روش های رفع این خطا بررسی شده است:

1. توکن PMI_MAP_TOKEN استفاده شده در نقشه معتبر نیست. این توکن به صورت پیش‌فرض تنها برای راه‌اندازی نقشه تعریف می‌شود. در صورتیکه می‌خواهید از سرویس‌های آدرس‌یابی و آدرس‌یابی معکوس موجود در افزونه‌ parsimap-geocoder استفاده نمایید، درخواست خود را از طریق بخش توضیحات در فرم درخواست توکن و یا تماس تلفنی با پارسی‌مپ مطرح نمایید.

2. مدت زمان مجاز برای استفاده از این افزونه در هر بارگزاری صفحه به صورت پیش‌فرض ۳۰ دقیقه است. درصورتیکه تمایل دارید این مدت زمان افزایش یابد، درخواست خود را از طریق ارسال ایمیل، تماس تلفنی و یا بخش توضیحات در فرم درخواست توکن با ما درمیان بگذارید.