การนำทางไปยังสนามบินที่ปรับปรุงให้ดีขึ้น

รูปภาพ

สนามบินเป็นอาคารขนาดใหญ่ที่มีหลายอาคารผู้โดยสาร และการนำทางที่แม่นยำเป็นสิ่งสำคัญ เพื่อให้เดินทางมาถึงและออกเดินทางได้ตรงเวลา โดยปกติแล้ว Google Maps Geocoding API จะ แสดงพิกัด (ละติจูด/ลองจิจูด) ซึ่งในกรณีส่วนใหญ่จะเป็น จุดศูนย์กลางของกลุ่มอาคารขนาดใหญ่ของสนามบิน แอปนี้เป็นเครื่องมือแบบอินเทอร์แอกทีฟที่ออกแบบมาโดยเฉพาะเพื่อช่วยให้ผู้ใช้ระบุ และแสดงภาพตำแหน่งที่แน่นอนภายในสถานที่ขนาดใหญ่ที่ซับซ้อน เช่น เทอร์มินัลหรือจุดรับ/ส่งที่เฉพาะเจาะจงภายในสนามบิน

รูปภาพ

โดยมีวิธีการดังนี้

การค้นหาสนามบิน/สถานที่: ผู้ใช้เริ่มต้นด้วยการค้นหาสถานที่หลัก (เช่น "ท่าอากาศยานนานาชาติอินทิรา คานธี") โดยใช้การป้อนข้อความอัตโนมัติของ Google Places ซึ่งจำกัดเฉพาะในอินเดีย

การค้นพบตำแหน่งย่อย: เมื่อเลือกตำแหน่งหลักแล้ว สคริปต์จะใช้ Google Places API เพื่อดึงรายละเอียด ซึ่งรวมถึง "จุดหมายย่อย" ที่ระบุไว้ ซึ่งเชื่อมโยงกับสถานที่นั้น (เช่น เทอร์มินัล 1 เทอร์มินัล 3 เกตที่เฉพาะเจาะจง ฯลฯ หากมีในข้อมูลของ Google)

การแมปภาพ สคริปต์ใช้ Geocoding API เพื่อค้นหาพิกัดของสถานที่หลัก และจุดหมายย่อย

จากนั้นจะแสดงสถานที่หลักและวางเครื่องหมายที่คลิกได้ซึ่งแตกต่างกัน (วงกลมสีน้ำเงิน) บนแผนที่สำหรับแต่ละจุดหมายย่อยที่ระบุ

การระบุที่แม่นยำ: การคลิกเครื่องหมายปลายทางย่อยจะไฮไลต์เครื่องหมายนั้น (เปลี่ยนเป็นสีเขียว) และเปิดหน้าต่างข้อมูลที่แสดงชื่อและรายละเอียดอื่นๆ ที่มี (เช่น ที่อยู่หรือประเภท) ซึ่งช่วยให้ผู้ใช้ยืนยันได้ว่าได้เลือก จุดที่ถูกต้อง มุมมองตามบริบท: แผนที่จะปรับมุมมอง (fitBounds) โดยอัตโนมัติเพื่อให้ ตรวจสอบว่าเครื่องหมายที่เกี่ยวข้องทั้งหมด (สถานที่ตั้งหลัก + จุดหมายย่อย) มองเห็นได้ชัดเจน

Google Maps Platform API ในแอปการนำทางในสนามบิน

เอกสารนี้อธิบาย API หลักของ Google Maps Platform และพารามิเตอร์ที่ใช้ในแอปพลิเคชันเดโม "นำทางไปยังสนามบิน" ที่ระบุ แอปใช้ บริการหลายอย่างเพื่อแสดงแผนที่ ค้นหาสถานที่ ข้อมูลสถานที่โดยละเอียด และข้อมูลเชิงลึกเกี่ยวกับตำแหน่งขั้นสูง

1. การเริ่มต้นและการแสดงแผนที่

รากฐานของแอปพลิเคชันคือแผนที่แบบอินเทอร์แอกทีฟ

  • API ที่ใช้: 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

  • 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. การดึงข้อมูลสถานที่โดยละเอียดและการจัดการจุดหมายย่อย

เมื่อเลือกสถานที่จากคำแนะนำการเติมข้อความอัตโนมัติแล้ว ระบบจะดึงรายละเอียดที่ครอบคลุมมากขึ้น

  • 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.

4. การเข้ารหัสพิกัดภูมิศาสตร์และการเข้ารหัสพิกัดภูมิศาสตร์แบบย้อนกลับ: การดึงรายละเอียดสำหรับจุดหมายย่อย

แอปพลิเคชันใช้การแปลงรหัสภูมิศาสตร์เพื่อจุดประสงค์หลัก 2 ประการ ได้แก่ การแปลงรหัสสถานที่เป็น พิกัด และการแปลงพิกัดกลับเป็นรายละเอียดสถานที่ ส่วนนี้จะเน้นวิธีใช้การแปลงพิกัดภูมิศาสตร์เพื่อรับข้อมูลโดยละเอียดเกี่ยวกับจุดหมายย่อย

  • API ที่ใช้: google.maps.Geocoder (จาก Maps JavaScript API) และ Geocoding API (ผ่านการเรียก fetch โดยตรงไปยัง https://maps.googleapis.com/maps/api/geocode/json)
  • วัตถุประสงค์:
    • google.maps.Geocoder: ใช้เพื่อแปลง placeId (ได้จาก Autocomplete หรือ 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. การแสดงเครื่องหมาย

ระบบจะใช้เครื่องหมายเพื่อไฮไลต์ตำแหน่งที่เฉพาะเจาะจงบนแผนที่

  • API ที่ใช้: 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. การแสดงโครงร่างอาคาร

แอปพลิเคชันสามารถแสดงภาพร่องรอยของอาคารได้

  • API ที่ใช้: google.maps.Data (จาก Maps JavaScript API)
  • วัตถุประสงค์: เพื่อแสดงข้อมูลทางภูมิศาสตร์ เช่น โครงร่างอาคาร (แสดงเป็น GeoJSON display_polygon จาก extra_computations ของ Geocoding API)
  • พารามิเตอร์หลัก:
    • map: อินสแตนซ์แผนที่ที่ใช้ชั้นข้อมูล
    • style: กำหนดลักษณะที่ปรากฏของฟีเจอร์ GeoJSON (เช่น strokeColor, fillColor, fillOpacity)
    • addGeoJson(): วิธีเพิ่มข้อมูล GeoJSON ลงในเลเยอร์

7. ขอบเขตและการซูมแผนที่

การยืนยันมุมมองแผนที่ครอบคลุมสถานที่ที่เกี่ยวข้องทั้งหมด

  • API ที่ใช้: google.maps.LatLngBounds (จาก Maps JavaScript API)
  • วัตถุประสงค์: เพื่อปรับวิวพอร์ตของแผนที่แบบไดนามิกให้พอดีกับ ชุดจุดทางภูมิศาสตร์ (เช่น สถานที่หลักและจุดย่อยทั้งหมด ของสถานที่นั้น)
  • วิธีการหลัก
    • extend(location): เพิ่มLatLngจุดลงในขอบเขต ขยายขอบเขตหากจำเป็น
    • fitBounds(bounds): ปรับกึ่งกลางและระดับการซูมของแผนที่เพื่อ แสดงพื้นที่ทั้งหมดที่กำหนดโดยออบเจ็กต์ LatLngBounds

การรวม API ของ Google Maps Platform เหล่านี้เข้าด้วยกันจะช่วยให้แอปพลิเคชันมอบ ประสบการณ์ที่ครอบคลุมและโต้ตอบได้สำหรับการค้นหาสถานที่ ดู รายละเอียด และแสดงภาพข้อมูลทางภูมิศาสตร์ที่เกี่ยวข้อง เช่น จุดหมายย่อย และโครงร่างอาคาร

ข้อควรพิจารณาในการติดตั้งใช้งาน โปรดทราบว่าฟีเจอร์นี้ใช้ไม่ได้ในบางพื้นที่ของสนามบินและขึ้นอยู่กับ ความพร้อมใช้งานของข้อมูล (อาคารผู้โดยสารของสนามบิน)

แหล่งข้อมูล Geocoding API Places API Maps JavaScript API

ผู้เขียน: