รายละเอียดสถานที่

ดึงข้อมูลฟิลด์

หากมีออบเจ็กต์ Place หรือรหัสสถานที่อยู่แล้ว ให้ใช้เมธอด Place.fetchFields เพื่อดูรายละเอียดเกี่ยวกับสถานที่นั้น ระบุรายการช่องข้อมูลสถานที่ที่คั่นด้วยคอมมาเพื่อแสดงผล ระบุชื่อช่องในช่องอูฐ ใช้ออบเจ็กต์ Place ที่แสดงผลเพื่อดูข้อมูลสำหรับช่องที่ขอ

ตัวอย่างต่อไปนี้ใช้รหัสสถานที่เพื่อสร้าง Place ใหม่ เรียกใช้ Place.fetchFields เพื่อขอช่อง displayName และ formattedAddress เพิ่มเครื่องหมายลงในแผนที่ และบันทึกข้อมูลบางส่วนไปยังคอนโซล

TypeScript

async function getPlaceDetails(Place) {
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
    // Use place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
        requestedLanguage: 'en', // optional
    });

    // Call fetchFields, passing the desired 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 AdvancedMarkerElement({
        map,
        position: place.location,
        title: place.displayName,
    });
}
index.ts

JavaScript

async function getPlaceDetails(Place) {
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  // Use place ID to create a new Place instance.
  const place = new Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the desired 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 AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}

index.js

ใช้คอมโพเนนต์ภาพรวมสถานที่

หมายเหตุ: ตัวอย่างนี้ใช้ไลบรารีโอเพนซอร์ส โปรดดู README สำหรับการสนับสนุนและความคิดเห็นเกี่ยวกับไลบรารี

แสดงรายละเอียดสถานที่โดยใช้โค้ดเพียงไม่กี่บรรทัดโดยใช้คอมโพเนนต์เว็บ

รูปภาพแสดงรูปแบบต่างๆ ของคอมโพเนนต์ภาพรวมสถานที่ที่มีขนาดเล็ก เล็ก กลาง ใหญ่ และใหญ่มาก โดยอิงตามช่องขนาดที่ผู้ใช้ป้อน
ภาพที่ 1: ข้อมูลรายละเอียดสถานที่ที่มีขนาด 5 แบบ

ส่วนประกอบของเว็บคืออะไร

คอมโพเนนต์เว็บช่วยให้คุณสร้างแท็ก HTML แบบห่อหุ้มที่นำมาใช้ใหม่และนำมาใช้ใหม่ได้ ซึ่งสามารถใช้ได้ทุกที่ใน HTML ของเว็บแอป โดยทำงานได้ในเบราว์เซอร์ที่ทันสมัยทั้งหมดและแสดงกลไกที่เข้าใจได้ในเฟรมเวิร์กสำหรับการรวม UI และฟังก์ชันการทำงาน

คอมโพเนนต์ภาพรวมสถานที่คืออะไร

คอมโพเนนต์ภาพรวมสถานที่จะแสดงข้อมูลโดยละเอียดเกี่ยวกับธุรกิจนับล้าน เช่น เวลาทำการ รีวิวดาว และรูปภาพ รวมทั้งเส้นทางและการดำเนินการอื่นๆ ใน UI ที่สร้างไว้ล่วงหน้าโดยมี 5 ขนาดและรูปแบบ

ไลบรารีคอมโพเนนต์ขยายคืออะไร

ไลบรารีคอมโพเนนต์ขยายจาก Google Maps Platform เป็นชุดคอมโพเนนต์ของเว็บที่ช่วยให้นักพัฒนาซอฟต์แวร์สามารถสร้างแผนที่และฟีเจอร์ตำแหน่งที่ดียิ่งขึ้นได้เร็วขึ้น โดยใช้แรงน้อยลง ด้วยการห่อหุ้มโค้ดต้นแบบ แนวทางปฏิบัติแนะนำ และการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ ซึ่งช่วยลดอินเทอร์เฟซแผนที่ที่ซับซ้อนลงในองค์ประกอบ HTML รายการเดียว ท้ายที่สุดแล้ว คอมโพเนนต์เหล่านี้จะช่วยให้อ่าน เรียนรู้ ปรับแต่ง และดูแลรักษาแผนที่และโค้ดที่เกี่ยวข้องกับตำแหน่งได้ง่ายขึ้น

เริ่มต้นใช้งาน

ในการเริ่มต้นใช้งาน ให้โหลดไลบรารีคอมโพเนนต์ขยายด้วย npm

เพื่อประสิทธิภาพที่ดีที่สุด ให้ใช้ตัวจัดการแพ็กเกจและนำเข้าเฉพาะคอมโพเนนต์ที่คุณต้องการ แพ็กเกจนี้จะแสดงบน npm เป็น @googlemaps/extended-component-library ติดตั้งด้วย:

  npm i @googlemaps/extended-component-library;

จากนั้นนำเข้าคอมโพเนนต์ที่คุณใช้ในแอปพลิเคชัน

  import '@googlemaps/extended-component-library/place_overview.js';

หลังจากโหลดไลบรารี npm แล้ว ให้รับคีย์ API จาก Cloud Console

  <gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placeoverview_v1"></gmpx-api-loader>

ใช้แท็กคอมโพเนนต์ภาพรวมสถานที่กับรหัสสถานที่ที่ต้องการ อันนี้เป็นตัวยึดตำแหน่งสำหรับสำนักงาน Google ในออกแลนด์

  <gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw"></gmpx-place-overview>

คอมโพเนนต์ภาพรวมสถานที่มีอยู่ด้วยกัน 5 ขนาด คอมโพเนนต์เริ่มต้นใช้รูปแบบขนาด x-large หากต้องการรับรูปแบบขนาดอื่นๆ ให้เพิ่มและแก้ไขแอตทริบิวต์ size

  <!-- Try setting the size attribute to "x-small", "small", "medium", "large", or "x-large" -->
  <gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw" size="small"></gmpx-place-overview>

ดูรายละเอียดเพิ่มเติมได้ที่ GitHub หรือ npm หากต้องการดูคอมโพเนนต์ที่ใช้ในโค้ดตัวอย่าง โปรดดูหน้าตัวอย่างใน GitHub