نقل البيانات إلى ميزة "الإكمال التلقائي للأماكن" الجديدة

المطوّرون في المنطقة الاقتصادية الأوروبية

الإكمال التلقائي للأماكن هو إحدى ميزات مكتبة Places في Maps JavaScript API. يمكنك استخدام ميزة "الإكمال التلقائي" لمنح تطبيقاتك سلوك البحث المسبق في حقل البحث في "خرائط Google".

توضّح هذه الصفحة الاختلافات بين ميزات Place Autocomplete القديمة والجديدة. في كلا الإصدارين، هناك طريقتان عامّتان لدمج خدمة "الإكمال التلقائي":

واجهة الإكمال التلقائي البرمجية

يعرض الجدول التالي بعض الاختلافات الرئيسية في استخدام ميزة "الإكمال التلقائي للأماكن" آليًا بين خدمة الإكمال التلقائي للأماكن (الإصدار القديم) وواجهة برمجة التطبيقات الخاصة ببيانات الإكمال التلقائي (الإصدار الجديد):

PlacesService (قديمة) Place (جديد)
مرجع خدمة الإكمال التلقائي للأماكن مرجع بيانات الإكمال التلقائي (جديد)
AutocompletionRequest AutocompleteRequest
AutocompleteService.getPlacePredictions AutocompleteSuggestion.fetchAutocompleteSuggestions
AutocompletePrediction PlacePrediction
تتطلّب الطرق استخدام دالة ردّ الاتصال للتعامل مع عنصر النتائج والاستجابة PlacesServiceStatus. يستخدم Promises ويعمل بشكل غير متزامن.
تتطلّب الطرق إجراء عملية تحقّق PlacesServiceStatus. لا يلزم التحقّق من الحالة، ويمكن استخدام معالجة الأخطاء العادية. مزيد من المعلومات
يتم ضبط حقول بيانات المواقع الجغرافية كخيارات عند إنشاء مثيل Autocomplete. يتم ضبط حقول بيانات المكان لاحقًا عند استدعاء fetchFields().
تتوفّر اقتراحات طلبات البحث (SearchBox فقط). لا تتوفّر توقّعات طلبات البحث في الفئة Autocomplete.
تقتصر على مجموعة ثابتة من أنواع الأماكن وحقول بيانات الأماكن. الوصول إلى مجموعة موسّعة من أنواع الأماكن وحقول بيانات الأماكن

يتم استخدام ما يلي في واجهات برمجة التطبيقات القديمة والجديدة الخاصة بميزة "الإكمال التلقائي":

مقارنة الرموز البرمجية (آليًا)

يقارن هذا القسم بين الرموز البرمجية الخاصة بميزة "الإكمال التلقائي" لتوضيح الاختلافات بين Places Service وفئة Place، وذلك بالنسبة إلى واجهات برمجة التطبيقات الآلية.

استرداد عبارات البحث المقترَحة من خلال ميزة "الإكمال التلقائي" (الإصدار القديم)

تتيح لك خدمة "الأماكن" القديمة استرداد توقعات الإكمال التلقائي آليًا، ما يمنحك المزيد من التحكّم في واجهة المستخدم مقارنةً بما يوفّره الصف Autocomplete. في المثال التالي، يتم تقديم طلب واحد للبحث عن "par"، مع AutocompletionRequest يتألف من قيمة الإدخال ومجموعة من الحدود لتحديد مدى صحة التوقّع. يعرض المثال قائمة بمثيلات AutocompletePrediction، ويعرض وصفًا لكل منها. تنشئ دالة المثال أيضًا رمزًا مميزًا للجلسة وتطبّقه على الطلب.

function init() {
  const placeInfo = document.getElementById("prediction");
  const service = new google.maps.places.AutocompleteService();
  const placesService = new google.maps.places.PlacesService(placeInfo);
  var sessionToken = new google.maps.places.AutocompleteSessionToken();

  // Define request options.
  let request = {
    input: "par",
    sessionToken: sessionToken,
    bounds: {
      west: -122.44,
      north: 37.8,
      east: -122.39,
      south: 37.78,
    },
  }

  // Display the query string.
  const title = document.getElementById("title");
  title.appendChild(
    document.createTextNode('Place predictions for "' + request.input + '":'),
  );

  // Perform the query and display the results.
  const displaySuggestions = function (predictions, status) {
    // Check the status of the Places Service.
    if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
      alert(status);
      return;
    }

    predictions.forEach((prediction) => {
      const li = document.createElement("li");
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById("results").appendChild(li);
    });

    const placeRequest = {
      placeId: predictions[0].place_id,
      fields: ["name", "formatted_address"],
    };

    placesService.getDetails(placeRequest, (place, status) => {
      if (status == google.maps.places.PlacesServiceStatus.OK && place) {
        placeInfo.textContent = `
          First predicted place: ${place.name} at ${place.formatted_address}`
      }
    });

  };

  // Show the results of the query.
  service.getPlacePredictions(request, displaySuggestions);
}

استرداد عبارات البحث المقترحة من خلال ميزة "الإكمال التلقائي" (جديد)

تتيح فئة Place الجديدة أيضًا استرداد توقعات الإكمال التلقائي آليًا، ما يمنحك تحكّمًا أكبر في واجهة المستخدم مقارنةً بما توفّره فئة PlaceAutocompleteElement. في المثال التالي، يتم تقديم طلب واحد للبحث عن "par"، مع AutocompleteRequest يتألف من قيمة الإدخال ومجموعة من الحدود لتحديد مدى تأثير عامل التحيّز في التوقّع. يعرض المثال قائمة placePrediction بالأمثلة ويعرض الوصف الخاص بكل مثال. تنشئ دالة المثال أيضًا رمزًا مميزًا للجلسة وتطبّقه على الطلب.

async function init() {
  let sessionToken = new google.maps.places.AutocompleteSessionToken();

  // Define request options.
  let request = {
    input: "par",
    sessionToken: sessionToken,
    locationBias: {
      west: -122.44,
      north: 37.8,
      east: -122.39,
      south: 37.78,
    },
  };

  // Display the query string.
  const title = document.getElementById("title");
  title.appendChild(
    document.createTextNode('Place predictions for "' + request.input + '":'),
  );

  // Perform the query and display the results.
  const { suggestions } =
    await google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(request);

  const resultsElement = document.getElementById("results");

  for (let suggestion of suggestions) {
    const placePrediction = suggestion.placePrediction;
    const listItem = document.createElement("li");

    listItem.appendChild(
      document.createTextNode(placePrediction.text.text),
    );

    resultsElement.appendChild(listItem);
  }

  // Show the first predicted place.
  let place = suggestions[0].placePrediction.toPlace();

  await place.fetchFields({
    fields: ["displayName", "formattedAddress"],
  });

  const placeInfo = document.getElementById("prediction");

  placeInfo.textContent = `
    First predicted place: ${place.displayName} at ${place.formattedAddress}`
}

أداة الإكمال التلقائي للأماكن

يسرد الجدول التالي بعض الاختلافات الرئيسية في استخدام أدوات إكمال تلقائي بين خدمة Places (القديمة) وفئة Place (الجديدة):

خدمة "الأماكن" (الإصدار القديم) مكان (جديد)
فئة Autocomplete للتوقّعات المتعلقة بالأماكن فئة PlaceAutocompleteElement للتوقّعات المتعلقة بالأماكن
فئة SearchBox
للتوقّعات المتعلقة بطلبات البحث 		لا تتوفّر توقّعات طلبات البحث في الفئة Autocomplete.
يتم توفير نص العنصر النائب التلقائي فقط بلغات مختلفة. تتيح جميعها إمكانية التكيّف مع المنطقة، وهي عنصر نائب لإدخال النص وشعار قائمة التوقّعات وتوقّعات الأماكن.
تستخدم الأداة setBounds() أو autocomplete.bindTo() لتقييد البحث (توجيهه) إلى الحدود المحدّدة، و strictBounds لحصر النتائج بالحدود المحدّدة. تستخدم الأداة السمة locationBias لتحسين النتائج ضمن الحدود المحدّدة، والسمة locationRestriction لحصر البحث ضمن الحدود المحدّدة.
لا يمكن دمج التطبيقات المصغّرة إلا باستخدام عنصر إدخال HTML عادي. يمكن دمج التطبيق المصغّر باستخدام عنصر إدخال HTML عادي أو عنصر gmp-place-autocomplete.
عند استخدام التطبيق المصغّر، من المحتمل أن يطلب المستخدمون أشياء غير صالحة (مثل "bisneyland")، ويجب التعامل مع هذه الحالة بشكل صريح. لن تعرض الأداة المصغّرة سوى نتائج الاقتراحات المقدَّمة، ولا يمكنها إصدار طلبات لقيم عشوائية، وبالتالي لا داعي للتعامل مع الطلبات التي قد تكون غير صالحة.
تعرض هذه السمة مثيلاً سابقًا من PlaceResult. تعرض هذه الدالة مثيلاً من Place.
يتم ضبط حقول بيانات الأماكن كخيارات للكائن Autocomplete. يتم ضبط حقول بيانات الموقع الجغرافي عندما يحدّد المستخدم موقعًا جغرافيًا ويتم استدعاء fetchFields().
تقتصر على مجموعة ثابتة من أنواع الأماكن وحقول بيانات الأماكن. الوصول إلى مجموعة موسّعة من أنواع الأماكن وحقول بيانات الأماكن

مقارنة الرموز (التطبيقات المصغّرة)

يقارن هذا القسم بين الرمز البرمجي الخاص بميزة "الإكمال التلقائي" لتوضيح الاختلافات بين أداة "الإكمال التلقائي للأماكن" القديمة وعنصر "الإكمال التلقائي للأماكن" الجديد.

أداة الإكمال التلقائي للأماكن (الإصدار القديم)

توفّر "خدمة الأماكن" نوعَين من أدوات الإكمال التلقائي، ويمكنك إضافتهما باستخدام الفئتَين Autocomplete وSearchBox. يمكن إضافة كل نوع من الأدوات إلى خريطة كعنصر تحكّم في الخريطة، أو تضمينها مباشرةً في صفحة ويب. يوضّح مثال الرمز البرمجي التالي كيفية تضمين تطبيق مصغّر Autocomplete كعنصر تحكّم في الخريطة.

  • تأخذ دالة إنشاء التطبيق المصغّر Autocomplete وسيطتَين:
    • عنصر input HTML من النوع text هذا هو حقل الإدخال الذي ستراقبه خدمة الإكمال التلقائي وسترفق نتائجها به.
    • وسيطة AutocompleteOptions اختيارية، يمكنك فيها تحديد خيارات إضافية لتقييد طلب البحث.
  • لضبط الحدود، يمكن ربط مثيل Autocomplete بالخريطة بشكل صريح من خلال استدعاء autocomplete.bindTo().
  • حدِّد حقول بيانات الأماكن في خيارات الإكمال التلقائي.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.749933, lng: -73.98633 },
    zoom: 13,
    mapTypeControl: false,
  });
  const card = document.getElementById("pac-card");
  const input = document.getElementById("pac-input");
  const options = {
    fields: ["formatted_address", "geometry", "name"],
    strictBounds: false,
  };

  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

  const autocomplete = new google.maps.places.Autocomplete(input, options);

  // Bind the map's bounds (viewport) property to the autocomplete object,
  // so that the autocomplete requests use the current map bounds for the
  // bounds option in the request.
  autocomplete.bindTo("bounds", map);

  const infowindow = new google.maps.InfoWindow();
  const infowindowContent = document.getElementById("infowindow-content");

  infowindow.setContent(infowindowContent);

  const marker = new google.maps.Marker({
    map,
    anchorPoint: new google.maps.Point(0, -29),
  });

  autocomplete.addListener("place_changed", () => {
    infowindow.close();
    marker.setVisible(false);

    const place = autocomplete.getPlace();

    if (!place.geometry || !place.geometry.location) {
      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
      window.alert("No details available for input: '" + place.name + "'");
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);
    }

    marker.setPosition(place.geometry.location);
    marker.setVisible(true);
    infowindowContent.children["place-name"].textContent = place.name;
    infowindowContent.children["place-address"].textContent =
      place.formatted_address;
    infowindow.open(map, marker);
  });
}

تطبيق Place Autocomplete المصغّر (جديد)

تقدّم فئة Place الفئة الفرعية PlaceAutocompleteElement، وهي فئة فرعية HTMLElement توفّر مكوّن واجهة مستخدم يمكن إضافته إلى خريطة كعنصر تحكّم في الخريطة، أو تضمينه مباشرةً في صفحة ويب. يوضّح مثال الرمز البرمجي التالي كيفية تضمين تطبيق مصغّر PlaceAutocompleteElement كعنصر تحكّم في الخريطة.

تم تحسين أداة Place Autocomplete Widget بالطرق التالية:

  • تتيح واجهة مستخدم التطبيق المصغّر "الإكمال التلقائي" إمكانية الترجمة إلى اللغات المحلية (بما في ذلك اللغات التي تُكتب من اليمين إلى اليسار)، وذلك بالنسبة إلى العنصر النائب لإدخال النص وشعار قائمة النتائج المتوقّعة والنتائج المتوقّعة الخاصة بالأماكن.
  • تحسين إمكانية الوصول، بما في ذلك إتاحة استخدام قارئات الشاشة والتفاعل باستخدام لوحة المفاتيح
  • تعرض أداة "الإكمال التلقائي" الفئة الجديدة Place لتسهيل التعامل مع العنصر الذي يتم عرضه.
  • تحسين التوافق مع الأجهزة الجوّالة والشاشات الصغيرة
  • أداء أفضل ومظهر رسومي محسّن

تشمل الاختلافات الرئيسية في التنفيذ ما يلي:

  • يوفّر عنصر PlaceAutocompleteElement حقل إدخال خاصًا به، ويتم إدراجه مباشرةً في الصفحة باستخدام HTML أو JavaScript (بدلاً من توفير عنصر إدخال حالي).
  • لا تتوفّر توقّعات طلبات البحث في الفئة Autocomplete.
  • يتم إنشاء PlaceAutocompleteElement باستخدام PlaceAutocompleteElementOptions.
    • يتم تحديد حقول بيانات المواقع الجغرافية في وقت الاختيار (عند استدعاء fetchFields()).
  • اضبط الحدود باستخدام الخيار locationBounds أو locationRestriction.
let map;
let marker;
let infoWindow;

async function initMap() {
  // Request needed libraries.
  const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
    google.maps.importLibrary("marker"),
    google.maps.importLibrary("places"),
  ]);

  // Initialize the map.
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.749933, lng: -73.98633 },
    zoom: 13,
    mapId: "4504f8b37365c3d0",
    mapTypeControl: false,
  });

  const placeAutocomplete =
    new google.maps.places.PlaceAutocompleteElement({
      locationRestriction: map.getBounds(),
    });

  placeAutocomplete.id = "place-autocomplete-input";
  const card = document.getElementById("place-autocomplete-card");

  card.appendChild(placeAutocomplete);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

  // Create the marker and infowindow.
  marker = new google.maps.marker.AdvancedMarkerElement({
    map,
  });
  infoWindow = new google.maps.InfoWindow({});

  // Add the gmp-select listener, and display the results on the map.
  placeAutocomplete.addEventListener("gmp-select", async ( place ) => {
    const place = event.placePrediction.toPlace();
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "location"],
    });
    // If the place has a geometry, then present it on a map.
    if (place.viewport) {
      map.fitBounds(place.viewport);
    } else {
      map.setCenter(place.location);
      map.setZoom(17);
    }

    let content =
      '<div id="infowindow-content">' +
      '<span id="place-displayname" class="title">' +
      place.displayName +
      '</span><br />' +
      '<span id="place-address">' +
      place.formattedAddress +
      '</span>' +
      '</div>';

    updateInfoWindow(content, place.location);
    marker.position = place.location;
  });
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
  infoWindow.setContent(content);
  infoWindow.setPosition(center);
  infoWindow.open({
    map,
    anchor: marker,
    shouldFocus: false,
  });
}