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

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

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

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

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

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

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

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

واجهات برمجة تطبيقات منصة خرائط Google في تطبيق الملاحة في المطار

تشرح هذه الوثيقة واجهات برمجة تطبيقات Google Maps Platform الرئيسية والمعلمات المستخدمة في تطبيق العرض التوضيحي "الانتقال إلى المطار". يستفيد التطبيق من العديد من الخدمات لتوفير عرض الخريطة، والبحث عن الأماكن، ومعلومات تفصيلية عن الأماكن، ورؤى متقدمة عن الموقع.

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

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

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

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

يتم تشغيل وظيفة شريط البحث بواسطة واجهة برمجة التطبيقات Places.

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

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

• واجهة برمجة التطبيقات المستخدمة: واجهة برمجة تطبيقات الأماكن (عبر استدعاء مباشر من 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

المؤلفون: