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

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

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

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

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

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

บริการสถานที่ (เดิม)

ตัวอย่างโค้ดต่อไปนี้แสดงรูปภาพที่ส่งคืนโดยใช้ 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 การอ้างอิงคลาส