ดึงข้อมูลช่อง
หากคุณมีรหัสวัตถุหรือสถานที่ Place
อยู่แล้ว ให้ใช้วิธีการ Place.fetchFields()
เพื่อดูรายละเอียดเกี่ยวกับสถานที่นั้น ระบุรายการฟิลด์ข้อมูลสถานที่ที่จะแสดงโดยคั่นด้วยคอมมา ระบุชื่อฟิลด์ในรูปแบบ Camel Case ใช้ออบเจ็กต์ Place
ที่แสดงผลเพื่อรับข้อมูลสำหรับช่องที่ขอ
ตัวอย่างต่อไปนี้ใช้รหัสสถานที่เพื่อสร้าง Place
ใหม่ เรียกใช้ Place.fetchFields()
เพื่อขอฟิลด์ displayName
และ formattedAddress
เพิ่มเครื่องหมายลงในแผนที่ และบันทึกข้อมูลบางส่วนลงในคอนโซล
TypeScript
async function getPlaceDetails() { const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary; 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() { const { Place } = await google.maps.importLibrary("places"); 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, }); }
Map
และ Place
ไว้ก่อนฟังก์ชันนี้
const { Map } = await google.maps.importLibrary("maps"); const { Place } = await google.maps.importLibrary("places");
ใช้คอมโพเนนต์ภาพรวมสถานที่
คอมโพเนนต์ภาพรวมสถานที่แสดงข้อมูลโดยละเอียดเกี่ยวกับธุรกิจหลายล้านแห่ง ซึ่งรวมถึงเวลาทําการ รีวิวแบบดาว และรูปภาพ รวมถึงเส้นทางและการดําเนินการอื่นๆ ใน UI ที่สร้างไว้ล่วงหน้า 5 ขนาดและ 5 รูปแบบ คอมโพเนนต์นี้เป็นส่วนหนึ่งของคลังคอมโพเนนต์แบบขยายจาก Google Maps Platform ซึ่งเป็นชุดคอมโพเนนต์เว็บที่ช่วยให้นักพัฒนาซอฟต์แวร์สร้างแผนที่และฟีเจอร์ตำแหน่งที่ดีขึ้นได้เร็วขึ้น
ใช้เครื่องมือกําหนดค่าภาพรวมสถานที่เพื่อสร้างโค้ดที่ฝังได้สําหรับคอมโพเนนต์ภาพรวมสถานที่ที่กําหนดเอง จากนั้นส่งออกเพื่อนำไปใช้กับเฟรมเวิร์กยอดนิยมอย่าง React และ Angular หรือจะใช้โดยไม่ต้องใช้เฟรมเวิร์กเลยก็ได้