ดึงข้อมูลช่อง
หากคุณมีออบเจ็กต์ 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, }); }
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, }); }
ใช้คอมโพเนนต์ภาพรวมสถานที่
หมายเหตุ: ตัวอย่างนี้ใช้ไลบรารีโอเพนซอร์ส ดู 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 หากต้องการดูคอมโพเนนต์ที่ใช้ในโค้ดตัวอย่าง ให้ดูที่หน้าตัวอย่างใน GitHub