ناوبری بهبود یافته به فرودگاه ها، ناوبری بهبود یافته به فرودگاه ها

تصویر

فرودگاه‌ها مجتمع‌های بزرگ و چند ترمینالی هستند و ناوبری دقیق برای ورود و خروج به موقع بسیار مهم است. API ژئوکدینگ نقشه‌های گوگل معمولاً یک مختصات (طول و عرض جغرافیایی) را برمی‌گرداند که در بیشتر موارد مرکز ثقل مجتمع فرودگاهی بزرگ خواهد بود. این برنامه ابزاری تعاملی است که به طور خاص برای کمک به کاربران در تعیین و تجسم مکان‌های دقیق در یک مکان پیچیده بزرگتر مانند ترمینال‌های خاص یا نقاط سوار و پیاده شدن در یک فرودگاه طراحی شده است.

تصویر

در اینجا نحوه دستیابی به این هدف آورده شده است:

جستجوی فرودگاه/مکان : کاربران با جستجوی یک مکان اصلی (مثلاً "فرودگاه بین‌المللی ایندیرا گاندی") با استفاده از ورودی تکمیل خودکار Google Places که محدود به هند است، شروع می‌کنند.

کشف زیرمکان : پس از انتخاب یک مکان اصلی، اسکریپت از API مکان‌های گوگل برای دریافت جزئیات استفاده می‌کند، که مهم‌تر از همه شامل هرگونه «زیرمقصد» فهرست‌شده مرتبط با آن مکان (مانند ترمینال ۱، ترمینال ۳، گیت‌های خاص و غیره، در صورت موجود بودن در داده‌های گوگل) می‌شود.

نقشه برداری بصری : این اسکریپت از API ژئوکدینگ برای یافتن مختصات مکان اصلی و مقاصد فرعی آن استفاده می‌کند.

سپس مکان اصلی را نمایش می‌دهد و برای هر زیرمقصد شناسایی‌شده، نشانگرهای متمایز و قابل کلیک (دایره‌های آبی) را روی نقشه قرار می‌دهد.

شناسایی دقیق : کلیک روی یک نشانگر زیرمقصد، آن را هایلایت می‌کند (سبز می‌شود) و یک پنجره اطلاعات (InfoWindow) باز می‌کند که نام و سایر جزئیات موجود (مانند آدرس یا نوع) آن را نشان می‌دهد و به کاربر اجازه می‌دهد تا تأیید کند که نقطه خاص صحیح را انتخاب کرده است. نمای زمینه‌ای (Contextual View ): نقشه به طور خودکار نمای خود ( fitBounds ) را تنظیم می‌کند تا تأیید کند که همه نشانگرهای مربوطه (مکان اصلی + زیرمقصدها) به وضوح قابل مشاهده هستند.

رابط‌های برنامه‌نویسی کاربردی (API) پلتفرم نقشه‌های گوگل در اپلیکیشن ناوبری فرودگاه

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

۱. مقداردهی اولیه و نمایش نقشه

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

  • API مورد استفاده: google.maps.Map (از API جاوا اسکریپت Maps)
  • هدف: ایجاد و نمایش نقشه تعاملی در صفحه وب.
  • پارامترهای کلیدی:
    • center : مرکز جغرافیایی اولیه نقشه را تعریف می‌کند. در این برنامه، در ابتدا روی مختصات دهلی تنظیم شده است ( { lat: 28.461835685621395, lng: 77.05004035761647 } ).
    • zoom : سطح بزرگنمایی اولیه نقشه را تنظیم می‌کند. DEFAULT_ZOOM_LEVEL (15) برای نمای نزدیک استفاده می‌شود.
    • mapId : یک شناسه منحصر به فرد برای سبک نقشه پیکربندی شده در کنسول Google Cloud.

۲. جستجوی مکان و تکمیل خودکار

قابلیت نوار جستجو توسط Places API پشتیبانی می‌شود.

  • API مورد استفاده: google.maps.places.Autocomplete (از کتابخانه Places مربوط به API جاوا اسکریپت Maps)
  • هدف: ارائه قابلیت تکمیل متن پیش‌بینی‌شده برای جستجوهای جغرافیایی همزمان با تایپ کاربر، و پیشنهاد مکان‌های مرتبط مانند فرودگاه‌ها.
  • پارامترهای کلیدی:
    • input : عنصر ورودی HTML ( #search-input ) که کاربر عبارت مورد نظر خود را در آن تایپ می‌کند.
    • componentRestrictions : نتایج جستجو را به یک کشور خاص فیلتر می‌کند. در اینجا، { country: 'in' } نتایج را به هند محدود می‌کند.
    • fields : فیلدهای داده‌ای که برای مکان انتخاب شده برگردانده می‌شوند را مشخص می‌کند. ['place_id'] در ابتدا برای بازیابی فقط شناسه منحصر به فرد مکان استفاده می‌شود و انتقال داده‌ها را بهینه می‌کند.
  • نحوه استفاده از تکمیل خودکار
    // Initialize Autocomplete
    const autocomplete = new google.maps.places.Autocomplete(input, {
      componentRestrictions: { country: 'in' },
      fields: ['place_id'],
    });

    // Add listener to the Autocomplete
    autocomplete.addListener('place_changed', async () => {
      const place = autocomplete.getPlace();
      if (!place.place_id) {
        return;
      }
      // Once a place is selected, fetch details
      await getPlaceDetails(place.place_id);
    });

۳. بازیابی اطلاعات دقیق مکان و مدیریت زیرمقصدها

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

  • API مورد استفاده: Places API (از طریق فراخوانی مستقیم fetch به https://places.googleapis.com/v1/places/{placeId} )
  • هدف: بازیابی جزئیات غنی در مورد یک مکان خاص، از جمله نام نمایشی، آدرس، انواع آن و از همه مهم‌تر، subDestinations آن (مثلاً ترمینال‌های مجزا یا مناطق مهم در یک مجموعه بزرگتر مانند فرودگاه).
  • پارامترهای کلیدی در URL:
    1. {placeId} : شناسه منحصر به فرد مکان انتخاب شده.
    2. fields : فیلدهای داده دقیق برای بازیابی را مشخص می‌کند. برنامه id ، displayName ، subDestinations ، types و formattedAddress را درخواست می‌کند. این برای کنترل هزینه‌ها و دریافت فقط داده‌های ضروری بسیار مهم است.
  • چگونه می‌توان با توجه به یک مکان، subDestinations دریافت کرد؟
async function getPlaceDetails(placeId) {
  // Construct the URL for the Places API (v1) details endpoint
  // The 'fields' parameter is crucial for requesting subDestinations
  const url = `https://places.googleapis.com/v1/places/${placeId}?key=YOUR_API_KEY&fields=id,displayName,subDestinations,types,formattedAddress`;

  const response = await fetch(url);
  const data = await response.json();

  // Accessing subDestinations from the Places API response
  if (data.subDestinations && data.subDestinations.length > 0) {
    for (const subDestination of data.subDestinations) {
      // Each subDestination object contains an 'id' and 'displayName'
      console.log(`Sub-destination ID: ${subDestination.id}`);
      console.log(`Sub-destination Name: ${subDestination.displayName?.text}`);
      // This subDestination.id is then used in a geocoding call (as shown in section 4)
    }
  }
}

**Handling `subDestinations`:** When the Places API returns
`subDestinations`, the application initiates a process for each one:
1.  **Geocoding:** It uses the `google.maps.Geocoder` to convert
    each `subDestination.id` into its precise geographical coordinates
    (`lat`, `lng`).
1.  **Marker Placement:** A distinct marker is added to the map for
    each sub-destination. These markers are styled with a blue circle icon
    to differentiate them.
1.  **Map Bounds Adjustment:** The `google.maps.LatLngBounds` object
    is used to dynamically expand the map's view to encompass all retrieved
    sub-destinations, verifying they are all visible within the current map
    frame.
1.  **Interactive Information Window:** A `click` listener is
    attached to each sub-destination marker. When clicked, the marker's
    icon changes to green, and an `InfoWindow` appears, displaying the
    sub-destination's name, address, and types. This provides immediate,
    detailed context to the user.

۴. ژئوکدینگ و ژئوکدینگ معکوس: دریافت جزئیات برای زیرمقصدها

این برنامه از ژئوکدینگ برای دو هدف اصلی استفاده می‌کند: تبدیل شناسه‌های مکان به مختصات و تبدیل مجدد مختصات به جزئیات مکان. این بخش به طور خاص نحوه استفاده از ژئوکدینگ برای دریافت اطلاعات دقیق در مورد زیرمقصدها را برجسته می‌کند.

  • API مورد استفاده: google.maps.Geocoder (از API جاوا اسکریپت Maps) و API ژئوکدینگ (از طریق fetch مستقیم به https://maps.googleapis.com/maps/api/geocode/json )
  • هدف:
    • google.maps.Geocoder : برای تبدیل یک placeId (که از Autocomplete یا Places API به دست می‌آید) به مختصات جغرافیایی ( lat ، lng ) و یک viewport استفاده می‌شود و به نقشه اجازه می‌دهد تا به درستی در مرکز مکان انتخاب شده و زیرمقصدهای آن قرار گیرد و بزرگنمایی شود.
    • API مربوط به کدگذاری جغرافیایی ( fetch ): برای کدگذاری جغرافیایی معکوس (تبدیل طول و عرض جغرافیایی به آدرسی قابل خواندن توسط انسان) و بازیابی داده‌های مکانی پیشرفته مانند خطوط کلی ساختمان‌ها و نقاط ناوبری استفاده می‌شود.
  • پارامترهای کلیدی:
    • google.maps.Geocoder.geocode() :
      • placeId : شناسه مکان برای geocode.
      • location : شیء LatLng برای ژئوکدینگ معکوس.
    • فراخوانی fetch API ژئوکدینگ:
      • latlng : مختصات طول و عرض جغرافیایی برای ژئوکدینگ معکوس.
      • extra_computations=BUILDING_AND_ENTRANCES : این پارامتر حیاتی، داده‌های اضافی، به‌ویژه اطلاعات مربوط به ردپاهای ساختمان و ورودی‌ها را درخواست می‌کند که سپس برای نمایش خطوط کلی ساختمان و نقاط ناوبری استفاده می‌شوند.

نحوه استفاده از شناسه subDestination برای دریافت جزئیات بیشتر (مثلاً مکان، آدرس قالب‌بندی شده، انواع)

function geocodeAndAddMarker(subDestination, bounds) {
  return new Promise((resolve, reject) => {
    const geocoder = new google.maps.Geocoder();
    // Using the subDestination.id to geocode and get location details
    geocoder.geocode({ placeId: subDestination.id }, (results, status) => {
      if (status === "OK" && results[0]) {
        const location = results[0].geometry.location;
        const displayName = subDestination.displayName?.text || "Sub-destination";
        const formattedAddress = results[0].formatted_address; // Further detail from Geocoding
        const types = results[0].types; // Further detail from Geocoding

        const marker = new google.maps.Marker({
          map: map,
          position: location,
          title: displayName,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: 'blue',
            fillOpacity: 0.6,
            strokeWeight: 0,
            scale: 8
          }
        });

        marker.addListener('click', () => {
          marker.setIcon({
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: 'green',
            fillOpacity: 0.6,
            strokeWeight: 0,
            scale: 8
          });
          const infowindow = new google.maps.InfoWindow({
            content: `<b>${displayName}</b><br><p>Address: ${formattedAddress}</p><p>Types: ${types.join(', ')}</p>`,
          });
          infowindow.open(map, marker);
        });
        bounds.extend(location);
        resolve(true);
      } else {
        reject(new Error(`Geocoding failed for placeId: ${subDestination.id}`));
      }
    });
  });
}

۵. نمایش نشانگرها

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

  • API مورد استفاده: google.maps.Marker (از API جاوا اسکریپت Maps) و google.maps.marker.AdvancedMarkerElement به همراه google.maps.marker.PinElement (از کتابخانه نشانگر API جاوا اسکریپت Maps)
  • هدف:
    • google.maps.Marker : برای نشانگر قابل کشیدن اولیه (اگرچه در کد ارائه شده، draggable روی false تنظیم شده است، اما بخشی از قابلیت آن است) و برای نشانگرهای زیرمقصد پایه همانطور که در بخش ۳ توضیح داده شده است، استفاده می‌شود.
    • AdvancedMarkerElement و PinElement : برای نشانگرهای نقاط ناوبری که از نظر بصری متمایزتر هستند استفاده می‌شود و امکان استایل‌دهی سفارشی به پین ​​نشانگر را فراهم می‌کند.
  • پارامترهای کلیدی:
    • position : مختصات LatLng که نشانگر در آن قرار خواهد گرفت.
    • map : نمونه نقشه‌ای که نشانگر روی آن نمایش داده خواهد شد.
    • title : متنی که هنگام قرار گرفتن نشانگر ماوس روی نشانگر نمایش داده می‌شود.
    • icon : امکان ایجاد آیکون‌های سفارشی برای google.maps.Marker (مثلاً google.maps.SymbolPath.CIRCLE با رنگ‌های سفارشی) را فراهم می‌کند.
    • content : برای AdvancedMarkerElement ، این امکان تعبیه محتوای HTML سفارشی، از جمله PinElement برای پین‌های از پیش استایل‌بندی شده، را فراهم می‌کند.
    • پارامترهای PinElement : background ، borderColor ، glyphColor ، scale برای سفارشی‌سازی بصری.

۶. نمایش خطوط کلی ساختمان

این برنامه می‌تواند به صورت بصری، مساحت ساختمان‌ها را نشان دهد.

  • API مورد استفاده: google.maps.Data (از API جاوا اسکریپت Maps)
  • هدف: نمایش داده‌های جغرافیایی، مانند خطوط کلی ساختمان‌ها (که به صورت GeoJSON display_polygon از extra_computations مربوط به API مربوط به Geocoding برگردانده می‌شود).
  • پارامترهای کلیدی:
    • map : نمونه نقشه‌ای که لایه داده روی آن اعمال می‌شود.
    • style : ظاهر بصری ویژگی‌های GeoJSON (مثلاً strokeColor ، fillColor ، fillOpacity ) را تعریف می‌کند.
    • addGeoJson() : متدی برای اضافه کردن داده‌های GeoJSON به لایه.

۷. محدوده‌های نقشه و بزرگنمایی

تأیید اینکه نمای نقشه شامل تمام مکان‌های مربوطه می‌شود.

  • API مورد استفاده: google.maps.LatLngBounds (از API جاوا اسکریپت Maps)
  • هدف: تنظیم پویای نمای نقشه برای تطبیق با مجموعه‌ای از نقاط جغرافیایی (مثلاً مکان اصلی و تمام مقاصد فرعی آن).
  • روش‌های کلیدی:
    • extend(location) : یک نقطه LatLng به مرزها اضافه می‌کند و در صورت لزوم آنها را گسترش می‌دهد.
    • fitBounds(bounds) : مرکز نقشه و سطح بزرگنمایی را تنظیم می‌کند تا کل ناحیه تعریف شده توسط شیء LatLngBounds نمایش داده شود.

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

ملاحظات پیاده‌سازی توجه داشته باشید که این مورد در همه مناطق فرودگاهی کار نمی‌کند و منوط به در دسترس بودن داده‌های (ترمینال فرودگاه) است.

منابع API کدگذاری جغرافیایی API مکان‌ها نقشه‌ها API جاوا اسکریپت

نویسندگان:

،

تصویر

فرودگاه‌ها مجتمع‌های بزرگ و چند ترمینالی هستند و ناوبری دقیق برای ورود و خروج به موقع بسیار مهم است. API ژئوکدینگ نقشه‌های گوگل معمولاً یک مختصات (طول و عرض جغرافیایی) را برمی‌گرداند که در بیشتر موارد مرکز ثقل مجتمع فرودگاهی بزرگ خواهد بود. این برنامه ابزاری تعاملی است که به طور خاص برای کمک به کاربران در تعیین و تجسم مکان‌های دقیق در یک مکان پیچیده بزرگتر مانند ترمینال‌های خاص یا نقاط سوار و پیاده شدن در یک فرودگاه طراحی شده است.

تصویر

در اینجا نحوه دستیابی به این هدف آورده شده است:

جستجوی فرودگاه/مکان : کاربران با جستجوی یک مکان اصلی (مثلاً "فرودگاه بین‌المللی ایندیرا گاندی") با استفاده از ورودی تکمیل خودکار Google Places که محدود به هند است، شروع می‌کنند.

کشف زیرمکان : پس از انتخاب یک مکان اصلی، اسکریپت از API مکان‌های گوگل برای دریافت جزئیات استفاده می‌کند، که مهم‌تر از همه شامل هرگونه «زیرمقصد» فهرست‌شده مرتبط با آن مکان (مانند ترمینال ۱، ترمینال ۳، گیت‌های خاص و غیره، در صورت موجود بودن در داده‌های گوگل) می‌شود.

نقشه برداری بصری : این اسکریپت از API ژئوکدینگ برای یافتن مختصات مکان اصلی و مقاصد فرعی آن استفاده می‌کند.

سپس مکان اصلی را نمایش می‌دهد و برای هر زیرمقصد شناسایی‌شده، نشانگرهای متمایز و قابل کلیک (دایره‌های آبی) را روی نقشه قرار می‌دهد.

شناسایی دقیق : کلیک روی یک نشانگر زیرمقصد، آن را هایلایت می‌کند (سبز می‌شود) و یک پنجره اطلاعات (InfoWindow) باز می‌کند که نام و سایر جزئیات موجود (مانند آدرس یا نوع) آن را نشان می‌دهد و به کاربر اجازه می‌دهد تا تأیید کند که نقطه خاص صحیح را انتخاب کرده است. نمای زمینه‌ای (Contextual View ): نقشه به طور خودکار نمای خود ( fitBounds ) را تنظیم می‌کند تا تأیید کند که همه نشانگرهای مربوطه (مکان اصلی + زیرمقصدها) به وضوح قابل مشاهده هستند.

رابط‌های برنامه‌نویسی کاربردی (API) پلتفرم نقشه‌های گوگل در اپلیکیشن ناوبری فرودگاه

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

۱. مقداردهی اولیه و نمایش نقشه

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

  • API مورد استفاده: google.maps.Map (از API جاوا اسکریپت Maps)
  • هدف: ایجاد و نمایش نقشه تعاملی در صفحه وب.
  • پارامترهای کلیدی:
    • center : مرکز جغرافیایی اولیه نقشه را تعریف می‌کند. در این برنامه، در ابتدا روی مختصات دهلی تنظیم شده است ( { lat: 28.461835685621395, lng: 77.05004035761647 } ).
    • zoom : سطح بزرگنمایی اولیه نقشه را تنظیم می‌کند. DEFAULT_ZOOM_LEVEL (15) برای نمای نزدیک استفاده می‌شود.
    • mapId : یک شناسه منحصر به فرد برای سبک نقشه پیکربندی شده در کنسول Google Cloud.

۲. جستجوی مکان و تکمیل خودکار

قابلیت نوار جستجو توسط Places API پشتیبانی می‌شود.

  • API مورد استفاده: google.maps.places.Autocomplete (از کتابخانه Places مربوط به API جاوا اسکریپت Maps)
  • هدف: ارائه قابلیت تکمیل متن پیش‌بینی‌شده برای جستجوهای جغرافیایی همزمان با تایپ کاربر، و پیشنهاد مکان‌های مرتبط مانند فرودگاه‌ها.
  • پارامترهای کلیدی:
    • input : عنصر ورودی HTML ( #search-input ) که کاربر عبارت مورد نظر خود را در آن تایپ می‌کند.
    • componentRestrictions : نتایج جستجو را به یک کشور خاص فیلتر می‌کند. در اینجا، { country: 'in' } نتایج را به هند محدود می‌کند.
    • fields : فیلدهای داده‌ای که برای مکان انتخاب شده برگردانده می‌شوند را مشخص می‌کند. ['place_id'] در ابتدا برای بازیابی فقط شناسه منحصر به فرد مکان استفاده می‌شود و انتقال داده‌ها را بهینه می‌کند.
  • نحوه استفاده از تکمیل خودکار
    // Initialize Autocomplete
    const autocomplete = new google.maps.places.Autocomplete(input, {
      componentRestrictions: { country: 'in' },
      fields: ['place_id'],
    });

    // Add listener to the Autocomplete
    autocomplete.addListener('place_changed', async () => {
      const place = autocomplete.getPlace();
      if (!place.place_id) {
        return;
      }
      // Once a place is selected, fetch details
      await getPlaceDetails(place.place_id);
    });

۳. بازیابی اطلاعات دقیق مکان و مدیریت زیرمقصدها

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

  • API مورد استفاده: Places API (از طریق فراخوانی مستقیم fetch به https://places.googleapis.com/v1/places/{placeId} )
  • هدف: بازیابی جزئیات غنی در مورد یک مکان خاص، از جمله نام نمایشی، آدرس، انواع آن و از همه مهم‌تر، subDestinations آن (مثلاً ترمینال‌های مجزا یا مناطق مهم در یک مجموعه بزرگتر مانند فرودگاه).
  • پارامترهای کلیدی در URL:
    1. {placeId} : شناسه منحصر به فرد مکان انتخاب شده.
    2. fields : فیلدهای داده دقیق برای بازیابی را مشخص می‌کند. برنامه id ، displayName ، subDestinations ، types و formattedAddress را درخواست می‌کند. این برای کنترل هزینه‌ها و دریافت فقط داده‌های ضروری بسیار مهم است.
  • چگونه می‌توان با توجه به یک مکان، subDestinations دریافت کرد؟
async function getPlaceDetails(placeId) {
  // Construct the URL for the Places API (v1) details endpoint
  // The 'fields' parameter is crucial for requesting subDestinations
  const url = `https://places.googleapis.com/v1/places/${placeId}?key=YOUR_API_KEY&fields=id,displayName,subDestinations,types,formattedAddress`;

  const response = await fetch(url);
  const data = await response.json();

  // Accessing subDestinations from the Places API response
  if (data.subDestinations && data.subDestinations.length > 0) {
    for (const subDestination of data.subDestinations) {
      // Each subDestination object contains an 'id' and 'displayName'
      console.log(`Sub-destination ID: ${subDestination.id}`);
      console.log(`Sub-destination Name: ${subDestination.displayName?.text}`);
      // This subDestination.id is then used in a geocoding call (as shown in section 4)
    }
  }
}

**Handling `subDestinations`:** When the Places API returns
`subDestinations`, the application initiates a process for each one:
1.  **Geocoding:** It uses the `google.maps.Geocoder` to convert
    each `subDestination.id` into its precise geographical coordinates
    (`lat`, `lng`).
1.  **Marker Placement:** A distinct marker is added to the map for
    each sub-destination. These markers are styled with a blue circle icon
    to differentiate them.
1.  **Map Bounds Adjustment:** The `google.maps.LatLngBounds` object
    is used to dynamically expand the map's view to encompass all retrieved
    sub-destinations, verifying they are all visible within the current map
    frame.
1.  **Interactive Information Window:** A `click` listener is
    attached to each sub-destination marker. When clicked, the marker's
    icon changes to green, and an `InfoWindow` appears, displaying the
    sub-destination's name, address, and types. This provides immediate,
    detailed context to the user.

۴. ژئوکدینگ و ژئوکدینگ معکوس: دریافت جزئیات برای زیرمقصدها

این برنامه از ژئوکدینگ برای دو هدف اصلی استفاده می‌کند: تبدیل شناسه‌های مکان به مختصات و تبدیل مجدد مختصات به جزئیات مکان. این بخش به طور خاص نحوه استفاده از ژئوکدینگ برای دریافت اطلاعات دقیق در مورد زیرمقصدها را برجسته می‌کند.

  • API مورد استفاده: google.maps.Geocoder (از API جاوا اسکریپت Maps) و API ژئوکدینگ (از طریق fetch مستقیم به https://maps.googleapis.com/maps/api/geocode/json )
  • هدف:
    • google.maps.Geocoder : برای تبدیل یک placeId (که از Autocomplete یا Places API به دست می‌آید) به مختصات جغرافیایی ( lat ، lng ) و یک viewport استفاده می‌شود و به نقشه اجازه می‌دهد تا به درستی در مرکز مکان انتخاب شده و زیرمقصدهای آن قرار گیرد و بزرگنمایی شود.
    • API مربوط به کدگذاری جغرافیایی ( fetch ): برای کدگذاری جغرافیایی معکوس (تبدیل طول و عرض جغرافیایی به آدرسی قابل خواندن توسط انسان) و بازیابی داده‌های مکانی پیشرفته مانند خطوط کلی ساختمان‌ها و نقاط ناوبری استفاده می‌شود.
  • پارامترهای کلیدی:
    • google.maps.Geocoder.geocode() :
      • placeId : شناسه مکان برای geocode.
      • location : شیء LatLng برای ژئوکدینگ معکوس.
    • فراخوانی fetch API ژئوکدینگ:
      • latlng : مختصات طول و عرض جغرافیایی برای ژئوکدینگ معکوس.
      • extra_computations=BUILDING_AND_ENTRANCES : این پارامتر حیاتی، داده‌های اضافی، به‌ویژه اطلاعات مربوط به ردپاهای ساختمان و ورودی‌ها را درخواست می‌کند که سپس برای نمایش خطوط کلی ساختمان و نقاط ناوبری استفاده می‌شوند.

نحوه استفاده از شناسه subDestination برای دریافت جزئیات بیشتر (مثلاً مکان، آدرس قالب‌بندی شده، انواع)

function geocodeAndAddMarker(subDestination, bounds) {
  return new Promise((resolve, reject) => {
    const geocoder = new google.maps.Geocoder();
    // Using the subDestination.id to geocode and get location details
    geocoder.geocode({ placeId: subDestination.id }, (results, status) => {
      if (status === "OK" && results[0]) {
        const location = results[0].geometry.location;
        const displayName = subDestination.displayName?.text || "Sub-destination";
        const formattedAddress = results[0].formatted_address; // Further detail from Geocoding
        const types = results[0].types; // Further detail from Geocoding

        const marker = new google.maps.Marker({
          map: map,
          position: location,
          title: displayName,
          icon: {
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: 'blue',
            fillOpacity: 0.6,
            strokeWeight: 0,
            scale: 8
          }
        });

        marker.addListener('click', () => {
          marker.setIcon({
            path: google.maps.SymbolPath.CIRCLE,
            fillColor: 'green',
            fillOpacity: 0.6,
            strokeWeight: 0,
            scale: 8
          });
          const infowindow = new google.maps.InfoWindow({
            content: `<b>${displayName}</b><br><p>Address: ${formattedAddress}</p><p>Types: ${types.join(', ')}</p>`,
          });
          infowindow.open(map, marker);
        });
        bounds.extend(location);
        resolve(true);
      } else {
        reject(new Error(`Geocoding failed for placeId: ${subDestination.id}`));
      }
    });
  });
}

۵. نمایش نشانگرها

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

  • API مورد استفاده: google.maps.Marker (از API جاوا اسکریپت Maps) و google.maps.marker.AdvancedMarkerElement به همراه google.maps.marker.PinElement (از کتابخانه نشانگر API جاوا اسکریپت Maps)
  • هدف:
    • google.maps.Marker : برای نشانگر قابل کشیدن اولیه (اگرچه در کد ارائه شده، draggable روی false تنظیم شده است، اما بخشی از قابلیت آن است) و برای نشانگرهای زیرمقصد پایه همانطور که در بخش ۳ توضیح داده شده است، استفاده می‌شود.
    • AdvancedMarkerElement و PinElement : برای نشانگرهای نقاط ناوبری که از نظر بصری متمایزتر هستند استفاده می‌شود و امکان استایل‌دهی سفارشی به پین ​​نشانگر را فراهم می‌کند.
  • پارامترهای کلیدی:
    • position : مختصات LatLng که نشانگر در آن قرار خواهد گرفت.
    • map : نمونه نقشه‌ای که نشانگر روی آن نمایش داده خواهد شد.
    • title : متنی که هنگام قرار گرفتن نشانگر ماوس روی نشانگر نمایش داده می‌شود.
    • icon : امکان ایجاد آیکون‌های سفارشی برای google.maps.Marker (مثلاً google.maps.SymbolPath.CIRCLE با رنگ‌های سفارشی) را فراهم می‌کند.
    • content : برای AdvancedMarkerElement ، این امکان تعبیه محتوای HTML سفارشی، از جمله PinElement برای پین‌های از پیش استایل‌بندی شده، را فراهم می‌کند.
    • پارامترهای PinElement : background ، borderColor ، glyphColor ، scale برای سفارشی‌سازی بصری.

۶. نمایش خطوط کلی ساختمان

این برنامه می‌تواند به صورت بصری، مساحت ساختمان‌ها را نشان دهد.

  • API مورد استفاده: google.maps.Data (از API جاوا اسکریپت Maps)
  • هدف: نمایش داده‌های جغرافیایی، مانند خطوط کلی ساختمان‌ها (که به صورت GeoJSON display_polygon از extra_computations مربوط به API مربوط به Geocoding برگردانده می‌شود).
  • پارامترهای کلیدی:
    • map : نمونه نقشه‌ای که لایه داده روی آن اعمال می‌شود.
    • style : ظاهر بصری ویژگی‌های GeoJSON (مثلاً strokeColor ، fillColor ، fillOpacity ) را تعریف می‌کند.
    • addGeoJson() : متدی برای اضافه کردن داده‌های GeoJSON به لایه.

۷. محدوده‌های نقشه و بزرگنمایی

تأیید اینکه نمای نقشه شامل تمام مکان‌های مربوطه می‌شود.

  • API مورد استفاده: google.maps.LatLngBounds (از API جاوا اسکریپت Maps)
  • هدف: تنظیم پویای نمای نقشه برای تطبیق با مجموعه‌ای از نقاط جغرافیایی (مثلاً مکان اصلی و تمام مقاصد فرعی آن).
  • روش‌های کلیدی:
    • extend(location) : یک نقطه LatLng به مرزها اضافه می‌کند و در صورت لزوم آنها را گسترش می‌دهد.
    • fitBounds(bounds) : مرکز نقشه و سطح بزرگنمایی را تنظیم می‌کند تا کل ناحیه تعریف شده توسط شیء LatLngBounds نمایش داده شود.

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

ملاحظات پیاده‌سازی توجه داشته باشید که این مورد در همه مناطق فرودگاهی کار نمی‌کند و منوط به در دسترس بودن داده‌های (ترمینال فرودگاه) است.

منابع API کدگذاری جغرافیایی API مکان‌ها نقشه‌ها API جاوا اسکریپت

نویسندگان: