מעבר לווידג'ט החדש של ההשלמה האוטומטית

מדריך ההעברה הזה מיועד למפתחים שיש להם שילוב עם הווידג'ט Place Autocomplete (תצוגה מקדימה) לפני גרסה 3.59.8. במדריך הזה מוסבר אילו שינויים צריך לבצע כדי להשתמש בגרסה העדכנית ביותר.

השינויים

  • השם של האירוע gmp-placeselect שונה ל-gmp-select.
  • האירוע gmp-select מחזיר עכשיו מופע של placePrediction ולא מופע של place. ‫PlacePrediction.toPlace() מחזירה את האובייקט המתאים Place.
  • האירוע gmp-requesterror הוא עכשיו gmp-error.

שלבים בהעברה

כדי להעביר את השילוב של Place Autocomplete Widget לגרסה האחרונה:

  1. מוודאים ש-Places API (חדש) מופעל בפרויקט במסוף Cloud.
  2. מוסיפים את Places API (New) לרשימת ההגבלות על ממשקי ה-API של מפתח ה-API שבו אתם משתמשים.
  3. בסביבת הפיתוח, מבצעים ובודקים את השינויים הבאים:

עדכון של event 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');
});