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

นักพัฒนาซอฟต์แวร์ในเขตเศรษฐกิจยุโรป (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 กับ คลาส Place ข้อมูลโค้ดจะแสดงโค้ดที่จำเป็นใน API แต่ละรายการเพื่อส่งคำขอรายละเอียดสถานที่ จากนั้นใช้ข้อมูลสถานที่ที่ได้เพื่อเพิ่มเครื่องหมายลงในแผนที่

Places Service (เดิม)

ข้อมูลโค้ดแบบย่อต่อไปนี้แสดงการส่งคำขอรายละเอียดสถานที่โดยใช้ 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,
  });
}

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