ย้ายข้อมูลไปยังรายละเอียดสถานที่แบบใหม่

Places API สามารถแสดงข้อมูลโดยละเอียดเกี่ยวกับสถานที่หนึ่งๆ หน้านี้จะอธิบายความแตกต่างระหว่างรายละเอียดสถานที่ที่ใช้ในคลาส Place (ใหม่) และ PlacesService (เดิม) รวมถึงแสดงข้อมูลโค้ดบางส่วนเพื่อเปรียบเทียบ ตารางต่อไปนี้แสดงความแตกต่างหลักๆ ในการใช้รายละเอียดสถานที่ระหว่างคลาส Place กับ PlacesService

PlacesService (เดิม) Place (ใหม่)
getDetails() fetchFields()
PlaceDetailsRequest FetchFieldsRequest
เมธอดต้องใช้การเรียกกลับเพื่อจัดการออบเจ็กต์ผลลัพธ์และgoogle.maps.places.PlacesServiceStatusการตอบกลับ ใช้ Promises และทํางานแบบไม่พร้อมกัน
วิธีการต้องเลือกPlacesServiceStatus ไม่ต้องมีการตรวจสอบสถานะ สามารถใช้การจัดการข้อผิดพลาดมาตรฐานได้
ฟิลด์ข้อมูลสถานที่มีการจัดรูปแบบโดยใช้รูปแบบ Snake Case ฟิลด์ข้อมูลสถานที่มีการจัดรูปแบบโดยใช้รูปแบบ Camel Case
จำกัดไว้ที่ชุดประเภทสถานที่และช่องข้อมูลสถานที่ที่กำหนดไว้ มีตัวเลือกประเภทสถานที่และฟิลด์ข้อมูลสถานที่ที่อัปเดตเป็นประจำเพิ่มเติม

การเปรียบเทียบโค้ด

ส่วนนี้จะเปรียบเทียบโค้ด 2 รายการที่คล้ายกันเพื่อแสดงให้เห็นความแตกต่างระหว่างบริการ Places กับคลาส Place ข้อมูลโค้ดแสดงโค้ดที่จําเป็นสําหรับ API ที่เกี่ยวข้องแต่ละรายการเพื่อส่งคําขอรายละเอียดสถานที่ จากนั้นใช้ข้อมูลสถานที่ที่ได้เพื่อเพิ่มเครื่องหมายลงในแผนที่

บริการ Places (เดิม)

ข้อมูลโค้ดแบบย่อต่อไปนี้แสดงการสร้างคำขอรายละเอียดสถานที่โดยใช้ PlacesService คำขอใช้การเรียกกลับ รวมถึงการตรวจสอบแบบมีเงื่อนไขใน PlacesServiceStatus ระบุช่องข้อมูลสถานที่ที่จำเป็นในเนื้อหาคำขอ

function getPlaceDetails() {
  // Instantiate the Places Service.
  const service = new google.maps.places.PlacesService(map);

  // Make a request using the Place ID.
  const request = {
    placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
    fields: ["name", "formatted_address", "place_id", "geometry"],
  };

  // Request place details.
  service.getDetails(request, (place, status) => {
    // Check whether PlacesServiceStatus is OK.
    if (
      status === google.maps.places.PlacesServiceStatus.OK &&
      place &&
      place.geometry &&
      place.geometry.location
    ) {

      // Log the result.
      console.log(place.name);
      console.log(place.formatted_address);

      // Add a marker for the place.
      const marker = new google.maps.Marker({
        map,
        position: place.geometry.location,
        title: place.name,
      });
    }
  });
}

ดูข้อมูลเพิ่มเติม

คลาสสถานที่ (ใหม่)

ข้อมูลโค้ดแบบย่อต่อไปนี้แสดงการสร้างคำขอรายละเอียดสถานที่โดยใช้คลาส Place คำขอเป็นแบบอะซิงโครนัสและไม่มีการตรวจสอบสถานะ (ใช้การจัดการข้อผิดพลาดมาตรฐานได้) ระบบจะใช้รหัสสถานที่เพื่อสร้างอินสแตนซ์ Place ใหม่ ซึ่งจะใช้ส่งคำขอ (fetchFields()) ระบบจะไม่ส่งผ่านช่องข้อมูลสถานที่ที่จำเป็นจนกว่าจะมีการเรียกใช้ fetchFields() ซึ่งทำให้มีความยืดหยุ่นมากขึ้น เนื่องจากเมธอด fetchFields() ใช้โอเปอเรเตอร์ await จึงใช้ได้เฉพาะภายในฟังก์ชัน async เท่านั้น

async function getPlaceDetails() {
  // Use place ID to create a new Place instance.
  const place = new google.maps.places.Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the needed data fields.
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });

  // Log the result.
  console.log(place.displayName);
  console.log(place.formattedAddress);

  // Add an Advanced Marker.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}

ดูข้อมูลเพิ่มเติม