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

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

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

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

ตารางต่อไปนี้แสดงความแตกต่างหลักบางประการในการใช้ Place Photos ระหว่างคลาส Place กับ PlacesService

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

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

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

Places Service (เดิม)

ข้อมูลโค้ดต่อไปนี้แสดงการแสดงผลรูปภาพโดยใช้ 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;

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

คลาส Place (ใหม่)

ข้อมูลโค้ดต่อไปนี้แสดงการใช้ 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;

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