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

מדריך ההעברה הזה מיועד למפתחים שיש להם שילוב עם הווידג'ט Place Autocomplete (גרסת טרום-השקה) לפני גרסה 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 (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');
});