ย้ายข้อมูลไปยัง Place Photos เวอร์ชันใหม่

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

  • PlacesService (เดิม) แสดงผลอาร์เรย์ออบเจ็กต์ PlacePhoto สูงสุด 10 รายการเป็นส่วนหนึ่งของออบเจ็กต์ PlaceResult สําหรับคําขอ getDetails() หากระบุช่อง photos ในคําขอ ในกรณีของ textSearch() และ nearbySearch() ระบบจะแสดงรูปภาพอันดับแรกโดยค่าเริ่มต้นหากมี
  • คลาส Place จะแสดงผลอาร์เรย์ออบเจ็กต์ Photo สูงสุด 10 รายการเป็นส่วนหนึ่งของคำขอ fetchFields() หากระบุฟิลด์ photos ในคำขอ

ตารางต่อไปนี้แสดงความแตกต่างหลักๆ ในการใช้รูปภาพสถานที่ระหว่างคลาส Place กับ PlacesService

PlacesService (เดิม) Place (ใหม่)
อินเทอร์เฟซ PlacePhoto ชั้นเรียน Photo
PlacePhoto จะแสดงผล html_attributions เป็นสตริง Photo จะแสดงผลอินสแตนซ์ AuthorAttribution
เมธอดต้องใช้การเรียกกลับเพื่อจัดการออบเจ็กต์ผลลัพธ์และgoogle.maps.places.PlacesServiceStatusการตอบกลับ ใช้ Promises และทํางานแบบไม่พร้อมกัน
วิธีการต้องเลือกPlacesServiceStatus ไม่ต้องมีการตรวจสอบสถานะ สามารถใช้การจัดการข้อผิดพลาดมาตรฐานได้
PlacesService ต้องสร้างอินสแตนซ์โดยใช้องค์ประกอบ map หรือ div Place สามารถสร้างอินสแตนซ์ได้ทุกที่ที่ต้องการ โดยไม่ต้องอ้างอิงถึงแผนที่หรือองค์ประกอบหน้าเว็บ

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

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

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

ตัวอย่างข้อมูลต่อไปนี้แสดงรูปภาพที่แสดงผลโดยใช้ PlacesService และแสดงผลการค้นหารูปภาพแรกในหน้า ในตัวอย่างนี้ คำขอรายละเอียดสถานที่ระบุรหัสสถานที่ พร้อมกับฟิลด์ name และ photos จากนั้นรูปภาพแรกจะแสดงในหน้าเว็บหลังจากตรวจสอบสถานะบริการแล้ว เมื่อสร้างอินสแตนซ์ PlacesService จะต้องระบุแผนที่หรือองค์ประกอบ div เนื่องจากตัวอย่างนี้ไม่มีแผนที่ จึงใช้องค์ประกอบ div

function getPhotos() {
  // Construct the Place Details request.
  const request = {
    placeId: "ChIJydSuSkkUkFQRsqhB-cEtYnw",
    fields: ["name", "photos"],
  };

  // Create an instance of PlacesService.
  const attributionDiv = document.getElementById("attribution-div");
  const service = new google.maps.places.PlacesService(attributionDiv);

  // Check status and display the first photo in an img element.
  service.getDetails(request, (place, status) => {
    if (
      status === google.maps.places.PlacesServiceStatus.OK && place
    ) {
      const photoImg = document.getElementById('image-container');
      photoImg.src = place.photos[0].getUrl({maxHeight: 400});
    }
  });
}

การระบุแหล่งที่มาของผู้เขียนใน PlacesService

PlacesService จะแสดงการระบุแหล่งที่มาของผู้เขียนที่จำเป็นเป็นสตริง html_attributions ที่มี URL ที่ชี้ไปยังหน้าโปรไฟล์ Google ของผู้เขียน ข้อมูลโค้ดต่อไปนี้แสดงการดึงข้อมูลการระบุแหล่งที่มาของผลลัพธ์รูปภาพแรก

let attributionUrl = place.photos[0].html_attributions;

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

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

ข้อมูลโค้ดต่อไปนี้แสดงการใช้วิธี fetchFields() เพื่อแสดงรายละเอียดสถานที่ ซึ่งรวมถึงชื่อที่แสดงและรูปภาพสถานที่ ก่อนอื่น ระบบจะสร้างอินสแตนซ์ออบเจ็กต์ Place ใหม่โดยใช้รหัสสถานที่ ตามด้วยการเรียกใช้ fetchFields() ที่ระบุช่อง displayName และ photos จากนั้นรูปภาพอันดับที่ 1 จะแสดงในหน้า คุณไม่จําเป็นต้องตรวจสอบสถานะบริการเมื่อใช้คลาส Place เนื่องจากระบบจะจัดการเรื่องนี้ให้โดยอัตโนมัติ

async function getPhotos() {
  // Use a place ID to create a new Place instance.
  const place = new google.maps.places.Place({
      id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
  });

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

  console.log(place.displayName);
  console.log(place.photos[0]);
  // Add the first photo to an img element.
  const photoImg = document.getElementById('image-container');
  photoImg.src = place.photos[0].getURI({maxHeight: 400});
}

การระบุแหล่งที่มาของผู้เขียนในคลาส Place

คลาส Place จะแสดงการระบุแหล่งที่มาของผู้เขียนเป็นAuthorAttribution อินสแตนซ์ ซึ่งรวมถึงชื่อผู้เขียน, URI สำหรับหน้าโปรไฟล์ Google ของผู้เขียน และ URI สำหรับรูปโปรไฟล์ของผู้เขียน ข้อมูลโค้ดต่อไปนี้แสดงการดึงข้อมูลการระบุแหล่งที่มาของผลลัพธ์รูปภาพแรก

let name = place.photos[0].authorAttributions[0].displayName;
let attributionUrl = place.photos[0].authorAttributions[0].uri;
let photoUrl = place.photos[0].authorAttributions[0].photoUri;

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