ย้ายข้อมูลไปยัง "รูปภาพสถานที่" ใหม่

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

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

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

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

ส่วนนี้จะเปรียบเทียบโค้ดสำหรับรูปภาพของสถานที่เพื่อแสดงความแตกต่างระหว่างบริการ 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;

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

• ดูเอกสารประกอบ
• ข้อมูลอ้างอิง getDetails
• ข้อมูลอ้างอิงอินเทอร์เฟซ PlacePhoto

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

ข้อมูลโค้ดต่อไปนี้แสดงการใช้เมธอด fetchFields() เพื่อแสดงผลรายละเอียดสถานที่ รวมถึงชื่อที่แสดงและรูปภาพสถานที่ ก่อนอื่น ระบบจะสร้างอินสแตนซ์ออบเจ็กต์ Place ใหม่โดยใช้รหัสสถานที่ ตามด้วยการเรียกใช้ fetchFields() ซึ่งมีการระบุฟิลด์ displayName และ photos จากนั้นรูปภาพแรกของสถานที่นั้นจะแสดงในหน้าเว็บ คุณไม่จำเป็นต้องตรวจสอบสถานะบริการเมื่อใช้คลาส 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;

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

• ดูตัวอย่างแบบเต็ม
• ดูเอกสารประกอบ
• ข้อมูลอ้างอิง fetchFields()
• ข้อมูลอ้างอิงคลาส Photo