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

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

השינויים

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

שלבים בהעברה

כדי להעביר את השילוב של ווידג'ט ההשלמה האוטומטית למקומות לגרסה האחרונה: פועלים לפי השלבים הבאים:

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