نصب و راه‌اندازی

جهت بکارگیری نقشه پارسی‌مپ نیاز به داشتن یک API Key یا Token است که باید در هنگام قرار دادن اسکریپت نقشه به آن افزوده شود. اسکریپت parsimap بهتر است در تگ head صفحه قرار یابد تا با سایر فراخوانی‌های درون صفحه سازگار شده و مشکل تداخل با اسکریپت‌های متعدد را نداشته باشد.

API Key

API Key مجوزی برای استفاده از نقشه و بکارگیری اجزاء است، بدون این مجوز طبیعتاً نقشه قادر به بارگزاری در صفحه نیست.

افزودن اسکریپت

اسکریپت parsimap برای استفاده از نقشه باید به تگ head افزوده شده و مقدار API_KEY معتبری در پارامتر key قرار گیرد.

<script src="https://pm2.parsimap.com/api/v2/parsimap.js?key=API_KEY"></script>

افزودن کانتینر نقشه

کانتینر نقشه باید یک تگ div بوده و درون بخشی از body قرار گرفته و مقدار MAP_ID مدنظر در خصوصیت id مقداردهی شود.

<div id="MAP_ID"></div>

در صورتیکه گزینه‌های نقشه در هنگام مقداردهی اولیه و ایجاد نقشه دارای گزینه container باشد دیگر نیازی به قرار دادن این تگ در صفحه نخواهد بود و فراخوانی نقشه باید به صورت Dynamic Container انجام شود.

راهنما: بکارگیری کانتینر پویا

مقداردهی اولیه

مقداردهی اولیه شامل تعریف شیء از کلاس Map و اختصاص مقدارهای اولیه به آن است. با انجام اینکار می‌توان از نقشه پارسی‌مپ استفاده نمود.

شیء‌‌نقشه

Map یک کلاس از فضای اسمی پارسی‌مپ، ارائه دهنده یک نقشه تعاملی است، شیءهایی ایجاد شده از کلاس ارائه دهنده نقشه‌هایی کاملا مجزاء هستند. برای ایجاد یک Instance از کلاس Map باید از کلمه کلیدی new استفاده نمود.

var map = new parsimap.Map({ MAP_OPTIONS });

متغییر تعریف شده map از کلاس Map که پارامتر MAP_OPTIONS باید شامل گزینه‌های نقشه باشد.

پس از ایجاد شیء، رویدادها و متدها برای تعامل با نقشه در دسترس خواهد بود.

ایجاد نقشه

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

var map = new parsimap.Map({
    id: "MAP_ID",
    center: { lat: 35.7575, lng: 51.41 },
});

بررسی کد نهائی

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Creating Map</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            /* Optimal: The sample page fit to window. */
            body {
                margin: 0;
            }
        </style>
        <script src="https://pm2.parsimap.com/api/v2/parsimap.js?key=API_KEY"></script>
    </head>
    <body>
        <!-- Defines DOM element as map container for show map into it. -->
        <div id="map"></div>

        <script>
            // Creating map object from Map class of parsimap namespace and 
            // specify latlng of MapOptions.
            var map = new parsimap.Map({
                id: 'map',
                center: { lat: 35.7575, lng: 51.41 },
            });
        </script>
    </body>
</html>

نمونه: ایجاد نقشه

مستندات پارسی‌مپ

مستندات / جاوااسکریپت / راهنما / نصب و راه‌اندازی