تحسين التنقّل إلى المطارات

المطارات هي مجمّعات كبيرة ومتعددة المحطات، لذا من الضروري توفير إمكانية تنقّل دقيقة لضمان الوصول والمغادرة في الوقت المحدّد. عادةً ما تعرض واجهة برمجة التطبيقات Geocoding API في "خرائط Google" إحداثيات (خط العرض/خط الطول) تمثّل في معظم الحالات مركز مجمع المطار الكبير. هذا التطبيق هو أداة تفاعلية مصمَّمة خصيصًا لمساعدة المستخدمين في تحديد المواقع الجغرافية الدقيقة وتصوّرها داخل أماكن معقّدة أكبر، مثل محطات معيّنة أو نقاط استلام أو تسليم داخل مطار.

في ما يلي كيفية تحقيق ذلك:

البحث عن مطار أو مكان: يبدأ المستخدمون بالبحث عن موقع جغرافي رئيسي (مثلاً "مطار أنديرا غاندي الدولي") باستخدام إدخال ميزة "الإكمال التلقائي" في Google Places، والذي يقتصر على الهند.

اكتشاف المواقع الجغرافية الفرعية: بعد اختيار موقع جغرافي أساسي، يستخدم النص البرمجي واجهة Google Places API لاسترداد التفاصيل، بما في ذلك أي "وجهات فرعية" مدرَجة مرتبطة بهذا المكان (مثل المحطة 1 والمحطة 3 والبوابات المحددة وما إلى ذلك، إذا كانت متاحة في بيانات Google).

الربط المرئي: يستخدم النص البرمجي Geocoding API للعثور على إحداثيات الموقع الجغرافي الرئيسي والمواقع الفرعية.

بعد ذلك، يعرض الموقع الجغرافي الرئيسي ويضع علامات مميزة قابلة للنقر (دوائر زرقاء) على الخريطة لكل وجهة فرعية تم تحديدها.

تحديد الموقع الجغرافي بدقة: يؤدي النقر على علامة وجهة فرعية إلى تمييزها (تتحوّل إلى اللون الأخضر) وفتح نافذة معلومات تعرض اسمها وتفاصيل أخرى متاحة (مثل العنوان أو النوع)، ما يتيح للمستخدم التأكّد من أنّه اختار النقطة المحدّدة الصحيحة. العرض السياقي: تعدّل الخريطة تلقائيًا طريقة عرضها (fitBounds) للتأكّد من أنّ جميع العلامات ذات الصلة (الموقع الرئيسي بالإضافة إلى المواقع الفرعية) ظاهرة بوضوح.

واجهات Google Maps Platform API في تطبيق "التنقّل في المطار"

يوضّح هذا المستند واجهات برمجة التطبيقات الرئيسية في "منصة خرائط Google" والمَعلمات الخاصة بها المستخدَمة في تطبيق العرض التوضيحي "الانتقال إلى المطار". يستفيد التطبيق من عدة خدمات لعرض الخرائط والبحث عن الأماكن وتقديم معلومات تفصيلية عن الأماكن وإحصاءات متقدّمة عن الموقع الجغرافي.

1. تهيئة الخريطة وعرضها

أساس التطبيق هو الخريطة التفاعلية نفسها.

• واجهة برمجة التطبيقات المستخدَمة: google.maps.Map (من Maps JavaScript API)
• الغرض: إنشاء الخريطة التفاعلية وعرضها على صفحة الويب
• المَعلمات الرئيسية:
  • ‫center: تحدّد هذه السمة المركز الجغرافي الأولي للخريطة. في هذا التطبيق، يتم ضبطه في البداية على إحداثيات دلهي ({ lat: 28.461835685621395, lng: 77.05004035761647 }).
  • zoom: تضبط هذه السمة مستوى التكبير أو التصغير الأولي للخريطة. يتم استخدام DEFAULT_ZOOM_LEVEL (15) لعرض صورة عن قُرب.
  • mapId: معرّف فريد لنمط خريطة تم إعداده في Google Cloud Console.

2. البحث عن الأماكن والإكمال التلقائي

تعتمد وظيفة شريط البحث على Places API.

• واجهة برمجة التطبيقات المستخدَمة: google.maps.places.Autocomplete (من Places Library في Maps JavaScript API)
• الغرض: توفير ميزة إكمال النص التلقائي لعمليات البحث الجغرافية أثناء الكتابة، واقتراح أماكن ذات صلة، مثل المطارات
• المَعلمات الرئيسية:
  • 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);
    });

3- استرداد معلومات تفصيلية عن الأماكن والتعامل مع الوجهات الفرعية

بعد اختيار مكان من اقتراحات الإكمال التلقائي، يتم جلب تفاصيل أكثر شمولاً.

• واجهة برمجة التطبيقات المستخدَمة: 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.

4. الترميز الجغرافي وعكس الترميز الجغرافي: استرجاع تفاصيل عن الوجهات الفرعية

يستخدم التطبيق الترميز الجغرافي لغرضَين رئيسيَّين: تحويل معرّفات الأماكن إلى إحداثيات، وتحويل الإحداثيات إلى تفاصيل الموقع الجغرافي. يسلّط هذا القسم الضوء تحديدًا على كيفية استخدام الترميز الجغرافي للحصول على معلومات مفصّلة حول الوجهات الفرعية.

• واجهة برمجة التطبيقات المستخدَمة: google.maps.Geocoder (من Maps JavaScript API) وGeocoding API (عبر طلب fetch مباشر إلى https://maps.googleapis.com/maps/api/geocode/json)
• الغرض:
  • google.maps.Geocoder: تُستخدَم لتحويل placeId (التي تم الحصول عليها من Autocomplete API أو Places API) إلى إحداثيات جغرافية (lat وlng) ومنطقة عرض، ما يتيح توسيط الخريطة وتكبيرها بشكل صحيح على المكان المحدّد والوجهات الفرعية التابعة له.
  • ‫Geocoding API (fetch): تُستخدَم في عكس الترميز الجغرافي (تحويل خطوط الطول والعرض إلى عنوان يمكن قراءته) واسترداد بيانات الموقع الجغرافي المتقدّمة، مثل مخططات المباني ونقاط التنقّل.
• المَعلمات الرئيسية:
  • google.maps.Geocoder.geocode():
    • placeId: معرّف المكان المطلوب تحويله إلى رمز جغرافي.
    • ‫location: عنصر LatLng الخاص بعكس الترميز الجغرافي
  • طلب البيانات من Geocoding API fetch:
    • 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}`));
      }
    });
  });
}

5- عرض العلامات

تُستخدَم العلامات لتسليط الضوء على مواقع جغرافية معيّنة على الخريطة.

• واجهة برمجة التطبيقات المستخدَمة: google.maps.Marker (من Maps JavaScript API) وgoogle.maps.marker.AdvancedMarkerElement مع google.maps.marker.PinElement (من Marker Library في Maps JavaScript API)
• الغرض:
  • ‫google.maps.Marker: تُستخدَم لعلامة التحديد الأولية القابلة للسحب (على الرغم من أنّ قيمة draggable مضبوطة على false في الرمز البرمجي المقدَّم، إلا أنّها جزء من إمكاناتها) ولعلامات التحديد الأساسية الخاصة بالمواقع الفرعية كما هو موضّح في القسم 3.
  • AdvancedMarkerElement وPinElement: تُستخدَم هاتان السمتان لعلامات نقاط التنقّل الأكثر تميزًا من الناحية المرئية، ما يتيح تصميمًا مخصّصًا لدبوس العلامة.
• المَعلمات الرئيسية:
  • position: إحداثيات LatLng التي سيتم وضع العلامة فيها
  • map: مثيل الخريطة الذي سيتم عرض العلامة عليه.
  • title: النص المعروض عند تمرير مؤشر الماوس فوق العلامة
  • icon: يسمح باستخدام رموز مخصّصة لـ google.maps.Marker (مثلاً، google.maps.SymbolPath.CIRCLE بألوان مخصّصة).
  • content: بالنسبة إلى AdvancedMarkerElement، تتيح هذه السمة تضمين محتوى HTML مخصّص، بما في ذلك PinElement للدبابيس التي تم تصميمها مسبقًا.
  • مَعلمات PinElement: background وborderColor وglyphColor وscale للتخصيص المرئي

6. عرض المخططات التفصيلية للمباني

يمكن للتطبيق أن يمثّل بصريًا المساحة التي تشغلها المباني.

• واجهة برمجة التطبيقات المستخدَمة: google.maps.Data (من Maps JavaScript API)
• الغرض: عرض بيانات جغرافية، مثل مخططات المباني (يتم عرضها بتنسيق GeoJSON display_polygon من extra_computations في Geocoding API).
• المَعلمات الرئيسية:
  • استبدِل map بمثيل الخريطة الذي يتم تطبيق طبقة البيانات عليه.
  • style: يحدّد المظهر المرئي لعناصر GeoJSON (مثل strokeColor، fillColor، fillOpacity).
  • ‫addGeoJson(): طريقة لإضافة بيانات GeoJSON إلى الطبقة

7. حدود الخريطة ومستوى التكبير/التصغير

التأكّد من أنّ عرض الخريطة يشمل جميع المواقع الجغرافية ذات الصلة

• واجهة برمجة التطبيقات المستخدَمة: google.maps.LatLngBounds (من Maps JavaScript API)
• الغرض: تعديل إطار عرض الخريطة بشكل ديناميكي ليتناسب مع مجموعة من النقاط الجغرافية (مثل المكان الرئيسي وجميع الوجهات الفرعية).
• الطرق الرئيسية:
  • extend(location): يضيف نقطة LatLng إلى الحدود، ويوسّعها إذا لزم الأمر.
  • fitBounds(bounds): تعدّل هذه السمة مركز الخريطة ومستوى التكبير أو التصغير لعرض المنطقة بأكملها المحدّدة بواسطة العنصر LatLngBounds.

من خلال الجمع بين واجهات برمجة التطبيقات هذه في "منصة خرائط Google"، يوفّر التطبيق تجربة شاملة وتفاعلية للبحث عن الأماكن وعرض تفاصيلها وتصوّر المعلومات الجغرافية ذات الصلة، مثل الوجهات الفرعية ومخططات المباني.

اعتبارات التنفيذ يُرجى العِلم أنّ هذه الميزة لا تعمل في جميع مناطق المطارات، وتخضع لتوفّر البيانات (في مبنى المطار).

المراجع Geocoding API Places API Maps Javascript API

المؤلفون: