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

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

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

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

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

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

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

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

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

يوضّح هذا المستند واجهات برمجة التطبيقات الرئيسية في "منصة خرائط 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 (التي تم الحصول عليها من ميزة "الإكمال التلقائي" أو 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

المؤلفون: