نمایش مکان

جهت نمایش ساده یک یا چندین مکان بروی نقشه می‌توان از کلاس Place استفاده نمود. در نمایش یک مکان بروی نقطه در ساده ترین شکل ممکن تنها نیاز به اختصاص گزینه‌هایی از قبیل lat و lng خواهد بود. سادگی در نمایش بدین معنی است که بدون درگیر شدن با کدهای اضافی تنها با استفاده از کلاس Place می‌توان نمایشی از نشانگرها را بروی نقشه ارائه داد. نمایش یک مکان اغلب جهت نمایش یک محل مشخص به منظور نشان دادن مختصات مذبور کاربرد دارد و از آن می‌توان برای نمایش آدرس جغرافیایی نیز استفاده کرد. در نمونه‌ای دیگر با استفاده از قابلیت اختصاص مجموعه‌ای از مختصات‌ها، می‌توان شعبات یک سازمان و یا گروهی از نشانگرها را بروی نقشه نمایش داد.

اگرچه می‌توان بوسیله ایجاد نقشه و پس از آن ایجاد عارضه نقطه‌ای مکانی را بروی نقشه ایجاد نمود ولی تفاوت این روش در این است که با کمترین کد و درگیری با توابع می‌توان مکان را بروی نقشه نمایش داد. کلاس Place با توجه به ارث بری از کلاس Map قادر به ارائه متدها و رویدادهای نقشه است.

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

جهت بکارگیری کلاس Place و نمایش نقاط بروی نقشه لازم است که مراحل نصب و راه‌اندازی به ترتیب انجام شود.

مراحل نصب‌ و راه‌اندازی:

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

توسط مراحل گفته شده، اسکریپت پارسی‌مپ در تگ head و کانتینر نقشه جهت نمایش نقشه در تگ body می‌بایست قرار گرفته شوند.

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

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

شیء‌‌مکان

Place یک کلاس از فضای اسمی پارسی‌مپ، ارائه دهنده یک نقشه تعاملی است به گونه‌ای که در هنگام ایجاد نقشه قابلیت افزوده شدن عارضه‌های نقطه‌ای را در خود دارا هستند، شیءهایی ایجاد شده از کلاس ارائه دهنده نقشه‌ها و عملکردی کاملا مجزاء هستند. برای ایجاد یک Instance از کلاس Place باید از کلمه کلیدی new استفاده نمود. تابع سازنده یا constructor کلاس Place شامل دو پارامتر اصلی است که به ترتیب نوع آنها برابر PlaceOptions و MapOptions است که این دو بیانگر گزینه‌های مکان جهت نمایش مکان خاص و گزینه‌های نقشه جهت ایجاد نقشه هستند.

var place = new parsimap.Place({ PLACE_OPTIONS }, { MAP_OPTIONS });

متغییر تعریف شده place از کلاس Place که پارامترهای PlaceOptions و MapOptions با مقادیر مناسب جایگزین شوند.

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

نمایش مکان/مکان‌ها بروی نقشه

حداقل نیاز برای نمایش یک مکان بروی نقشه تعیین lat و lng مربوط به مختصات مدنظر خواهد بود و همچنین برای ایجاد و نمایش نقشه در صفحه نیز نیاز به یک id است که آن شناسه نقشه است. در کد زیر با حداقل نیازها یک مکان بروی نقشه نمایش می‌یابد سایز گزینه‌های نقشه می‌تواند همچنین در کنار id قرار یابد. تگ div با شناسه مدنظر به عنوان جایگاه نمایش نقشه در body باید قرار داشته باشند.

<div id="place"></div>

<script>
    var place = new parsimap.Place(
        {
            lat: 35.6997,
            lng: 51.33638,
        },
        { id: 'place' }
    );
</script>

نمایش یک مکان با توجه به مختصات تعیین شده.

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

نمایش یک مکان بروی نقشه

یک مکان با استفاده از PlaceOptions و MapOptions بروی نقشه ایجاد و نمایش می‌یابد.

بررسی کد نهائی و یا مشاهده نمونه به صورت تمام صفحه.

در کد زیر همانطور که بیان شد تمامی گزینه‌های در دسترس جهت تعامل با مکان اختصاص یافته‌اند به طوری که مکان دارای یک آیکون خاص، پاپ آپ و در event کلیک نیز هنگامی بروی آیکون کلیک شود در نمونه کد اطلاعات مربوط به مکان مانند جزئیات جغرافیایی یا متدهای عارضه نقطه‌ای در دسترس خواهد بود. علاوه بر گزینه‌های مکان از دو گزینه نقشه نیز استفاده شده که id بیانگر شناسه نقشه است و height برای اعمال ارتفاع نقشه کاربرد دارد.

var place = new parsimap.Place(
    {
        lat: 35.74353,
        lng: 51.40834,
        src: 'IMAGE_SRC',
        html: 'میوه و تره‌بار',
        click: function(event) {
            console.log(event);
        },
    },
    { id: 'place', height: '100%' }
);

نمایش یک مکان با توجه به گزینه‌های تعیین شده و در نهایت ایجاد شیء place.

نمایش مجموعه‌ای از مکان‌ها بروی نقشه

مجموعه‌ای نقاط توسط آرایه‌ای از PlaceOptions و MapOptions بروی نقشه ایجاد و نمایش می‌یابد.

بررسی کد نهائی و یا مشاهده نمونه به صورت تمام صفحه.

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

var place = new parsimap.Place(
    [
        { lat: 35.74353, lng: 51.30834, src: 'IMAGE_SRC' },
        { lat: 35.74253, lng: 51.30834, src: 'IMAGE_SRC' },
        { lat: 35.74153, lng: 51.30224, src: 'IMAGE_SRC' },
        { lat: 35.74453, lng: 51.30134, src: 'IMAGE_SRC' },
        { lat: 35.74153, lng: 51.30536, src: 'IMAGE_SRC' },
    ],
    { id: 'place', height: '100%' }
);

نمایش مجموعه ای از مکان‌ها با توجه به گزینه‌های تعیین شده و در نهایت ایجاد شیء place.

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

نمایش مکان

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Simple Point</title>
    <style>
      /* Optimal: The sample page fit to window. */
      body,
      html {
          margin: 0;
          height: 100%;
      }
    </style>
    <script src="https://pm2.parsimap.com/api/v2/parsimap.js?key=API_KEY"></script>
  </head>
  <body>
    <div id="place"></div>

    <script>
      // Showing a place on map. At last three options required, `lat` and `lng`
      // for latitude and longitude of point, and `id` for creating and showing
      // map into specify div tag.
      //
      //
      // Optimal Parameters:
      //
      // * MapOptions
      //  The `height` is using for determine height of map container
      //
      // * PlaceOptions
      //  The `src` using for determines icon image url.
      //  The `html` using for showing popup as text.
      //  The `click` using for set click event.
      var place = new parsimap.Place(
          {
              lat: 35.74353,
              lng: 51.40834,
              src: "https://www.parsimap.com/api/v2/docs/grocery.png",
              html: 'میوه و تره‌بار',
              click: function(event) {
                  console.log(event);
              },
          },
          {
              id: 'place',
              height: '100%',
          }
      );
    </script>
  </body>
</html>

نمایش مجموعه‌ای از مکان‌ها

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Simple Point</title>
    <style>
      /* Optimal: The sample page fit to window. */
      body,
      html {
          margin: 0;
          height: 100%;
      }
    </style>
    <script src="https://pm2.parsimap.com/api/v2/parsimap.js?key=API_KEY"></script>
  </head>
  <body>
    <div id="place"></div>

    <script>
      // Showing collection of places on map. Sets array of latlng and img src.
      // It's can be used for branching or grouping places.
      var place = new parsimap.Place(
          [
              {
                  lat: 35.74353,
                  lng: 51.30834,
                  src: "https://www.parsimap.com/api/v2/docs/home.png",
              },
              {
                  lat: 35.74253,
                  lng: 51.30834,
                  src: "https://www.parsimap.com/api/v2/docs/home.png",
              },
              {
                  lat: 35.74153,
                  lng: 51.30224,
                  src: "https://www.parsimap.com/api/v2/docs/home.png",
              },
              {
                  lat: 35.74453,
                  lng: 51.30134,
                  src: "https://www.parsimap.com/api/v2/docs/home.png",
              },
              {
                  lat: 35.74153,
                  lng: 51.30536,
                  src: "https://www.parsimap.com/api/v2/docs/home.png",
              },
          ],
          {
              id: 'place',
              height: '100%',
          }
      );
    </script>
  </body>
</html>