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

เลือกแพลตฟอร์ม แอนดรอยด์ iOS JavaScript บริการผ่านเว็บ

ดึงข้อมูลช่อง

หากคุณมีออบเจ็กต์ 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 เพื่อการสนับสนุน และความคิดเห็น ที่เกี่ยวข้องกับไลบรารี

คอมโพเนนต์ภาพรวมสถานที่จะแสดงข้อมูลโดยละเอียดเกี่ยวกับธุรกิจหลายล้านราย รวมทั้งเวลาทำการ รีวิวให้ดาว รูปภาพ เส้นทาง และอื่นๆ การทำงานใน UI ที่สร้างไว้ล่วงหน้าใน 5 ขนาดและรูปแบบ ซึ่งเป็นส่วนหนึ่งของ Extended Component Library จาก Google Maps Platform ซึ่งเป็นชุดคอมโพเนนต์ของเว็บที่ช่วยให้นักพัฒนาซอฟต์แวร์สร้างแผนที่ที่ดียิ่งขึ้น และตำแหน่งได้เร็วขึ้น

ผู้กำหนดค่าภาพรวมสถานที่

ใช้เครื่องมือกำหนดค่าเพื่อสร้างโค้ดแบบฝังได้สำหรับคอมโพเนนต์ภาพรวมสถานที่ที่กำหนดเอง จากนั้นจึงส่งออก เพื่อใช้กับเฟรมเวิร์กที่ได้รับความนิยมอย่าง React และ Angular หรือไม่มีกรอบเลย

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

ในการเริ่มต้น ให้โหลดไลบรารีคอมโพเนนต์ขยายด้วย 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 วิธีดูคอมโพเนนต์ที่ใช้ในโค้ดตัวอย่าง ดูที่ examples ใน GitHub