ย้ายข้อมูลไปยังวิดเจ็ตการเติมข้อความอัตโนมัติแบบใหม่

คู่มือการย้ายข้อมูลนี้มีไว้สำหรับนักพัฒนาแอปที่ผสานรวมกับวิดเจ็ตการเติมข้อความอัตโนมัติของสถานที่ (เวอร์ชันตัวอย่าง) ก่อนเวอร์ชัน 3.59.8 คู่มือนี้จะแสดงการเปลี่ยนแปลงที่คุณต้องทำเพื่อใช้เวอร์ชันล่าสุด

การเปลี่ยนแปลง

  • เปลี่ยนชื่อกิจกรรม gmp-placeselect เป็น gmp-select แล้ว
  • ตอนนี้เหตุการณ์ gmp-select จะแสดงผลอินสแตนซ์ placePrediction แทนอินสแตนซ์ place PlacePrediction.toPlace() จะแสดงผลออบเจ็กต์ Place ที่เหมาะสม
  • ตอนนี้กิจกรรม gmp-requesterror เปลี่ยนเป็น gmp-error แล้ว

ขั้นตอนการย้ายข้อมูล

หากต้องการย้ายข้อมูลการผสานรวมวิดเจ็ตการเติมข้อความอัตโนมัติของสถานที่ไปยังเวอร์ชันล่าสุด ให้ทำดังนี้

  1. ตรวจสอบว่าได้เปิดใช้ Places API (ใหม่) สำหรับโปรเจ็กต์ของคุณใน Cloud Console แล้ว
  2. เพิ่ม Places API (ใหม่) ลงในรายการข้อจำกัด API สำหรับคีย์ API ที่คุณใช้
  3. ในสภาพแวดล้อมการพัฒนา ให้ทำการเปลี่ยนแปลงและทดสอบต่อไปนี้

อัปเดต Listener เหตุการณ์

เปลี่ยน gmp-placeselect เป็น gmp-select ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

ก่อน

autocompleteElement.addEventListener('gmp-placeselect', (event) => {
  console.log(event.place);
});

หลัง

autocompleteElement.addEventListener('gmp-select', (event) => {
  console.log(event.placePrediction.toPlace());
});

เปลี่ยน componentRestrictions เป็น includedRegionCodes

เปลี่ยนอินสแตนซ์ของ componentRestrictions เพื่อใช้ฟิลด์ includedRegionCodes ดังที่แสดงในข้อมูลโค้ดต่อไปนี้

ก่อน

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  componentRestrictions: {country: ['US']},
  ...
});

หลัง

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  includedRegionCodes: ['US'],
  ...

เปลี่ยน types เป็น includedPrimaryTypes

เปลี่ยนอินสแตนซ์ของ types เพื่อใช้ฟิลด์ includedPrimaryTypes ดังที่แสดงใน ข้อมูลโค้ดต่อไปนี้

ก่อน

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  types: ['restaurant'],
});

หลัง

const autocompleteElement = new google.maps.places.PlaceAutocompleteElement({
  includedPrimaryTypes: ['restaurant'],
});

เปลี่ยน gmp-requesterror เป็น gmp-error

เปลี่ยนอินสแตนซ์ของ gmp-requesterror เป็น gmp-error ดังที่แสดงใน ข้อมูลโค้ดต่อไปนี้

ก่อน

autocompleteElement.addEventListener('gmp-requesterror', (event) => {
  console.log('an error occurred');
});

หลัง

autocompleteElement.addEventListener('gmp-error', (event) => {
  console.log('an error occurred');
});