نمایش نقشهٔ برداری

برای نمایش نقشهٔ تعاملی در سایت، از تایل‌ها و استایل آمادهٔ بلد استفاده می‌کنید. نقشه از کنار هم قرار گرفتن بخش‌های کوچکی به نام تایل ساخته می‌شود. فایل استایل مشخص می‌کند راه‌ها، رنگ‌ها، نوشته‌ها و دیگر بخش‌های نقشه چگونه نمایش داده شوند.

تایل‌ها دو نوع برداری و تصویری دارند. در تایل برداری، اجزای نقشه جدا از هم نگهداری می‌شوند؛ بنابراین می‌توانید رنگ، نوشته و لایه‌ها را تغییر دهید و نقشه در اندازه‌های مختلف واضح بماند. برای نمایش نقشه در سایت، تایل برداری را پیشنهاد می‌کنیم. تفاوت و نمونهٔ نقشهٔ تصویری

با این نقشه چه کارهایی می‌توان کرد؟

• نقشه‌ای نمایش دهید که کاربر بتواند آن را جابه‌جا و بزرگ‌نمایی کند.
• مکان‌ها و اطلاعات کسب‌وکار خود را به نقشه اضافه کنید.

نقشه را به صفحه اضافه کنید

برای این نمونه از MapLibre GL JS، کتابخانه‌ای برای نمایش نقشه در مرورگر، استفاده می‌کنیم. ابتدا یک کلید عمومی با دسترسی نقشهٔ برداری بسازید و نشانی سایت خود را در مبدأهای مجاز آن ثبت کنید. کلید خصوصی را در کد مرورگر قرار ندهید.

قطعهٔ زیر را در صفحهٔ HTML خود قرار دهید و YOUR_PUBLIC_API_KEY را با کلید عمومی جایگزین کنید. اگر صفحهٔ آماده ندارید، تب «HTML کامل» را انتخاب کنید و کد آن را در یک فایل با پسوند .html بگذارید. برای اجرای محلی و تنظیم مبدأ مجاز، راهنمای اولین نقشه را ببینید.

قطعه کد

<link href="https://cdn.balad.ir/balad-static-files/platform/maplibre/5.24.0/maplibre-gl.css" rel="stylesheet">
<div id="map" style="height: 400px"></div>
<script src="https://cdn.balad.ir/balad-static-files/platform/maplibre/5.24.0/maplibre-gl.js"></script>
<script>
maplibregl.setRTLTextPlugin(
  "https://tile-vector.services.balad.ir/rtl/mapbox-gl-rtl-text.js", true,
);
const map = new maplibregl.Map({
  container: "map",
  style: "https://tile-vector.services.balad.ir/styles/vector.json?api_key=YOUR_PUBLIC_API_KEY",
  center: [51.389, 35.6892],
  zoom: 12,
  minZoom: 3,
  attributionControl: { compact: false },
});
</script>

HTML کامل

<!doctype html>
<html lang="fa" dir="rtl">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>نقشه برداری بلد</title>
<link href="https://cdn.balad.ir/balad-static-files/platform/maplibre/5.24.0/maplibre-gl.css" rel="stylesheet">
<style>html, body, #map { margin: 0; width: 100%; height: 100%; }</style>
<div id="map"></div>
<script src="https://cdn.balad.ir/balad-static-files/platform/maplibre/5.24.0/maplibre-gl.js"></script>
<script>
maplibregl.setRTLTextPlugin(
  "https://tile-vector.services.balad.ir/rtl/mapbox-gl-rtl-text.js", true,
);
const map = new maplibregl.Map({
  container: "map",
  style: "https://tile-vector.services.balad.ir/styles/vector.json?api_key=YOUR_PUBLIC_API_KEY",
  center: [51.389, 35.6892],
  zoom: 12,
  minZoom: 3,
  attributionControl: { compact: false },
});
</script>
</html>

پس از بارگذاری صفحه، نقشه‌ای با نوشته‌های فارسی می‌بینید که می‌توانید آن را جابه‌جا و بزرگ‌نمایی کنید.

مرکز و بزرگ‌نمایی را تغییر دهید

در کد بالا، center نقطه‌ای است که نقشه ابتدا در اطراف آن باز می‌شود. مختصات را به ترتیب طول جغرافیایی، عرض جغرافیایی بنویسید. برای مثال، [51.389, 35.6892] نقطه‌ای در تهران است.

مقدار zoom میزان نزدیکی نما را تعیین می‌کند: عدد بزرگ‌تر نمای نزدیک‌تری نشان می‌دهد. برای دیدن خیابان‌های اطراف مرکز، مقدار آن را از 12 به 15 تغییر دهید.

center: [51.389, 35.6892],
zoom: 15,

یک نشانگر اضافه کنید

این کد را پس از ساخت map، داخل همان تگ script قرار دهید. مختصات را با مکان موردنظر خود جایگزین کنید:

new maplibregl.Marker()
  .setLngLat([51.389, 35.6892])
  .addTo(map);

یک نشانگر در محل انتخاب‌شده روی نقشه ظاهر می‌شود.

اطلاعات یک مکان را نمایش دهید

برای نمایش نام یا آدرس با انتخاب نشانگر، به آن یک پنجرهٔ اطلاعات وصل کنید. این کد را به جای نمونهٔ نشانگر قبلی قرار دهید:

const popup = new maplibregl.Popup().setText("فروشگاه ما، خیابان انقلاب");

new maplibregl.Marker()
  .setLngLat([51.389, 35.6892])
  .setPopup(popup)
  .addTo(map);

متن پنجره را با نام یا آدرس مکان خود عوض کنید. با انتخاب نشانگر، متن نمایش داده می‌شود.

این تصویر خروجی واقعی نمونه است. نام مکان و محدودهٔ نقشه را می‌توانید در کد خود تغییر دهید.

نمایش منبع نقشه

طبق قوانین بلد، نام و کپی‌رایت بلد و OpenStreetMap باید روی نقشه قابل مشاهده بماند. حذف آن ممکن است به بسته‌شدن حساب شما منجر شود. نمونه‌های این صفحه اطلاعات منبع را روی نقشه نمایش می‌دهند؛ آن‌ها را حذف یا پنهان نکنید.

اگر نقشه نمایش داده نشد

• مطمئن شوید YOUR_PUBLIC_API_KEY را با کلید عمومی خود جایگزین کرده‌اید.
• دسترسی نقشهٔ برداری و مبدأ مجاز را در تنظیمات کلید بررسی کنید. اگر از localhost استفاده می‌کنید، پورت آن هم باید در مبدأ ثبت شود.
• صفحه را از طریق یک سرور وب باز کنید و مطمئن شوید بخش map ارتفاع دارد. اگر افزونهٔ نمایش فارسی بارگذاری نشود، نوشته‌های فارسی ممکن است درست دیده نشوند.

نمایش نقشه در وردپرس · نمایش شعب روی نقشه · انتخاب آدرس روی نقشه