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

นักพัฒนาซอฟต์แวร์ในเขตเศรษฐกิจยุโรป (EEA)

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

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

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

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

Places Service (เดิม)

ข้อมูลโค้ดแบบย่อต่อไปนี้แสดงการส่งคำขอรายละเอียดสถานที่โดยใช้ PlacesService คำขอใช้ Callback และมีการตรวจสอบแบบมีเงื่อนไขที่จำเป็นใน 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 คำขอเป็นแบบไม่พร้อมกันและไม่มีการตรวจสอบสถานะ (สามารถใช้การจัดการข้อผิดพลาดมาตรฐานได้) ระบบจะใช้รหัสสถานที่เพื่อสร้างอินสแตนซ์ 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,
  });
}

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