شروع سریع نقشه
کلید عمومی بسازید، کیت توسعه را بگذارید و در پنج قدم نقشه، جست‌وجو و مسیر را به سایت‌تان بیاورید.
۱. ساخت کلید عمومی
پنل ← پروژه ← کلیدها ← کلید تازه
نوع «عمومی» را انتخاب کنید.دامنه سایت را اضافه کنید
مثلاhttps://www.example.comو برای آزمایش محلیhttp://localhost:3000.دسترسی‌ها
maps:tilesبرای نقشه وmaps:searchوmaps:routingاگر جست‌وجو و مسیر لازم دارید.
۲. افزودن کیت توسعه
کیت توسعه، MapLibre و فونت‌ها همه از سرور نقشه نمایک می‌آیند. نشانی نسخه‌دار را با SRI بگذارید تا فایل دست‌کاری‌شده هرگز اجرا نشود:
<link rel="stylesheet" href="https://maps.namayek.com/sdk/v1/1.2.0/maplibre-gl.css" integrity="sha384-uTttxo/aOKbdE5RlD/SPzSDoDmNvGlUYPjONi2MN/b7c9HPSvW07OIuyP7uL6jxK" crossorigin="anonymous"><script src="https://maps.namayek.com/sdk/v1/1.2.0/maplibre-gl.js" integrity="sha384-5+cfbwT0iiub6VsQAdn6yz16nr6sDiQoHx6tm4O8OVYXHYOxcffFmCJBL0dgdvGp" crossorigin="anonymous"></script><script src="https://maps.namayek.com/sdk/v1/1.2.0/namayek-maps.js" integrity="sha384-iSjkl164pbPaQaOuNplJF8w4f+TQEB0H0tGBhL5vSh6veBfSsOApYH+VgJATidNT" crossorigin="anonymous"></script>روش‌های دیگر
import * as NamayekMaps from "https://maps.namayek.com/sdk/v1/1.2.0/namayek-maps.mjs"; await NamayekMaps.load(); // MapLibre همراه کیت، با SRIconst map = new NamayekMaps.Map({ container: "map", key: "nmk_pk_YOUR_PUBLISHABLE_KEY" });// npm i maplibre-gl@5import maplibregl from "maplibre-gl";import "maplibre-gl/dist/maplibre-gl.css";import * as NamayekMaps from "https://maps.namayek.com/sdk/v1/1.2.0/namayek-maps.mjs"; NamayekMaps.use(maplibregl);NamayekMaps.config({ baseUrl: "https://maps.namayek.com" });۳. اولین نقشه
<div id="map" style="height: 420px"></div><script> const map = new NamayekMaps.Map({ container: "map", key: "nmk_pk_YOUR_PUBLISHABLE_KEY", // کلید عمومی، محدود به دامنه شما style: "namayek-light", center: [51.389, 35.6892], // [طول، عرض] zoom: 12, lang: "fa", }); map.addMarker([51.389, 35.6892], { text: "دفتر مرکزی" });</script>این نقشه یک MapLibre واقعی است؛ هر چیزی که در MapLibre ممکن است اینجا هم کار می‌کند. گزینه‌ها در کیت توسعه.
۴. جست‌وجو و مسیر
جست‌وجو و مسیر
map.addControl( new NamayekMaps.SearchControl({ placeholder: "جستجوی مکان", countries: ["ir"], onSelect(item) { console.log(item.title, item.lat, item.lng); }, }),);// پیشنهاد خودکار نزدیک مرکز نقشهconst { items } = await map.autocomplete("میدان آزادی", { limit: 5 }); // مسیر خودرو با دستورهای فارسیconst route = await map.route([51.338, 35.6997], [51.41, 35.757], { profile: "car" });map.showRoute(route); // خط مسیر زیر برچسب‌ها و قاب‌بندی خودکارfor (const step of route.routes[0].legs[0].steps) console.log(step.instruction, step.distanceText);۵. سبک خودتان
در ویرایشگر سبک پنل رنگ‌ها، برچسب‌ها و لایه‌ها را مطابق برند خود بسازید، منتشر کنید و شناسه آن را به نقشه بدهید.
new NamayekMaps.Map({ container: "map", key: "nmk_pk_YOUR_PUBLISHABLE_KEY", style: "u-0123456789abcdef", // شناسه سبک منتشرشده شما});جزئیات در سبک‌ها و ساختار سبک.
آخرین به‌روزرسانی: