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

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

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

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

ขั้นตอนการย้ายโปรเจ็กต์

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

  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');
});