سيتوفّر تصميم الخريطة الجديد قريبًا على "منصة خرائط Google". يتضمن هذا التحديث على تصميم الخريطة لوحة ألوان تلقائية جديدة وتحسينات على تجارب الخرائط وسهولة الاستخدام. سيتم تعديل جميع أنماط الخرائط تلقائيًا في آذار (مارس) 2025. للمزيد من المعلومات عن مدى التوفّر وكيفية تفعيل الميزة في وقت سابق، يُرجى الاطّلاع على نمط الخريطة الجديد في "منصة خرائط Google".

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

الإكمال التلقائي للأماكن (معاينة)

تتوفّر هذه الميزة أو المنتج في مرحلة المعاينة (مرحلة ما قبل التوفّر للجمهور العام). قد يكون دعم المنتجات والميزات المتوفرة في مرحلة ما قبل التوفّر للجمهور العام محدودًا، وقد لا تتوافق التغييرات التي يتم إجراؤها على منتجات وميزات ما قبل التوفّر للجمهور العام مع الإصدارات الأخرى المتوفّرة للجمهور العام. تغطي "عروض مرحلة ما قبل التوفّر للجمهور العام" الأحكام الخاصة بخدمة "منصة خرائط Google". لمزيد من المعلومات، يمكنك الاطّلاع على أوصاف مرحلة الإطلاق.

مرحبًا بك في إصدار المعاينة الخاص بالإكمال التلقائي الجديد والمحسّن لـ "الأماكن". الإكمال التلقائي هو ميزة في مكتبة الأماكن في واجهة برمجة تطبيقات JavaScript لـ "خرائط Google". يمكنك استخدام ميزة "الإكمال التلقائي" لمنح تطبيقاتك سلوك البحث المسبق في حقل البحث في "خرائط Google". ويمكن أن تتطابق خدمة الإكمال التلقائي مع الكلمات والسلاسل الفرعية الكاملة، ما يؤدي إلى حلّ أسماء الأماكن والعناوين ورموز الجمع. وبالتالي، يمكن للتطبيقات إرسال طلبات البحث حسب أنواع المستخدمين لتوفير توقعات فورية عن الأماكن.

المتطلبات الأساسية

لاستخدام ميزة "الإكمال التلقائي" للأماكن (المعاينة)، عليك تفعيل "واجهة برمجة تطبيقات الأماكن" في مشروعك على Google Cloud، وتحديد القناة التجريبية (v: "beta") في برنامج التحميل. اطّلِع على البدء لمعرفة التفاصيل.

الجديد

تم تحسين الإكمال التلقائي للأماكن (المعاينة) بالطرق التالية:

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

يمكنك إضافة تطبيق مصغّر للإكمال التلقائي إلى صفحة ويب أو إلى إحدى خرائط Google. تنشئ أداة الإكمال التلقائي حقل إدخال نص، وتوفّر توقّعات بشأن الأماكن في قائمة اختيارات واجهة المستخدم، وتعرض تفاصيل المكان استجابةً للنقر الذي ينقر عليه المستخدم من خلال أداة معالجة الصوت gmp-placeselect. يوضّح لك هذا القسم كيفية إضافة تطبيق مصغّر للإكمال التلقائي إلى صفحة ويب أو خريطة Google.

لإضافة تطبيق "الإكمال التلقائي" المصغّر إلى صفحة ويب، عليك إنشاء google.maps.places.PlaceAutocompleteElement جديد وإلحاقه بالصفحة كما هو موضّح في المثال التالي:

TypeScript

// Request needed libraries.
//@ts-ignore
const [{ Map }] = await Promise.all([
    google.maps.importLibrary("places"),
]);
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
document.body.appendChild(placeAutocomplete);index.ts

JavaScript

// Request needed libraries.
//@ts-ignore
const [{ Map }] = await Promise.all([google.maps.importLibrary("places")]);
// Create the input HTML element, and append it.
//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

//@ts-ignore
document.body.appendChild(placeAutocomplete);
index.js

الاطّلاع على مثال الرمز البرمجي الكامل

لإضافة تطبيق مصغّر للإكمال التلقائي إلى خريطة، يمكنك إنشاء مثيل google.maps.places.PlaceAutocompleteElement جديد وإضافة PlaceAutocompleteElement إلى div وتوجيهه إلى الخريطة كعنصر تحكّم مخصّص، كما هو موضّح في المثال التالي:

TypeScript

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
//@ts-ignore
placeAutocomplete.id = 'place-autocomplete-input';

const card = document.getElementById('place-autocomplete-card') as HTMLElement;
//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);index.ts

JavaScript

//@ts-ignore
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

//@ts-ignore
placeAutocomplete.id = "place-autocomplete-input";

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

//@ts-ignore
card.appendChild(placeAutocomplete);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);index.js

الاطّلاع على مثال الرمز البرمجي الكامل

تقييد توقعات الإكمال التلقائي

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

يؤدي حظر النتائج إلى تجاهل أداة الإكمال التلقائي لأي نتائج خارج منطقة القيود. من الممارسات الشائعة تقييد النتائج بحدود الخريطة. يؤدي انحياز النتائج إلى عرض أداة الإكمال التلقائي النتائج ضمن المنطقة المحددة، ولكن قد تكون بعض النتائج المطابِقة خارج هذه المنطقة.

تقييد البحث عن الأماكن حسب البلد

لحصر البحث عن الأماكن على بلد واحد أو أكثر، استخدِم السمة componentRestrictions لتحديد رموز البلدان كما هو موضّح في المقتطف التالي:

const pac = new google.maps.places.PlaceAutocompleteElement({
  componentRestrictions: {country: ['us', 'au']},
});

حصر البحث عن الأماكن على حدود الخريطة

لحصر البحث عن الأماكن بحدود الخريطة، استخدِم السمة locationRestrictions لإضافة الحدود، كما هو موضّح في المقتطف التالي:

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

عند التقييد بحدود الخريطة، احرص على إضافة مستمع لتعديل الحدود عند تغييرها:

map.addListener('bounds_changed', () => {
  autocomplete.locationRestriction = map.getBounds();
});

لإزالة السمة locationRestriction، عليك ضبطها على null.

نتائج البحث عن الأماكن المتحيزة

يجب انحياز نتائج البحث إلى منطقة دائرية باستخدام السمة locationBias وتمرير نطاق جغرافي كما هو موضّح هنا:

const autocomplete = new google.maps.places.PlaceAutocompleteElement({
  locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}},
});

لإزالة السمة locationBias، عليك ضبطها على null.

حصر نتائج البحث عن الأماكن على أنواع معيّنة

حصر نتائج البحث عن الأماكن بأنواع معيّنة من الأماكن باستخدام السمة types وتحديد نوع واحد أو أكثر، كما هو موضّح هنا:

const autocomplete = new google.maps.places.PlaceAutocompleteElement({
  types: ['establishment'],
});

للحصول على قائمة كاملة بالأنواع المتوافقة، يُرجى الاطّلاع على الجدول 3: الأنواع المتوافقة في طلبات الإكمال التلقائي.

الحصول على تفاصيل المكان

للحصول على تفاصيل المكان الذي تم اختياره، أضِف أداة معالجة صوت gmp-place-select إلى PlaceAutocompleteElement، كما هو موضّح في المثال التالي:

TypeScript

// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

    selectedPlaceTitle.textContent = 'Selected Place:';
    selectedPlaceInfo.textContent = JSON.stringify(
        place.toJSON(), /* replacer */ null, /* space */ 2);
});index.ts

JavaScript

// Add the gmp-placeselect listener, and display the results.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  selectedPlaceTitle.textContent = "Selected Place:";
  selectedPlaceInfo.textContent = JSON.stringify(
    place.toJSON(),
    /* replacer */ null,
    /* space */ 2,
  );
});index.js

الاطّلاع على مثال الرمز البرمجي الكامل

في المثال السابق، تعرض أداة معالجة الحدث كائن Place class. يمكنك الاتصال بالرقم place.fetchFields() للحصول على حقول بيانات "تفاصيل المكان" اللازمة لتطبيقك.

يطلب المستمع في المثال التالي معلومات عن المكان ويعرضها على خريطة.

TypeScript

// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
    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;
});index.ts

JavaScript

// Add the gmp-placeselect listener, and display the results on the map.
//@ts-ignore
placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
  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;
});index.js

الاطّلاع على مثال الرمز البرمجي الكامل

الحصول على نتائج الترميز الجغرافي للمكان المحدد

للحصول على نتائج الترميز الجغرافي للمكان المحدد، استخدم google.maps.Geocoder للحصول على الموقع، كما هو موضح في المقتطف التالي:

const map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 50.064192, lng: -130.605469},
  zoom: 3,
});

const marker = new google.maps.Marker({map});
const autocomplete = new google.maps.places.PlaceAutocompleteElement();
const geocoder = new google.maps.Geocoder();

autocomplete.addListener('gmp-placeselect', async ({prediction: place}) => {
  const results = await geocoder.geocode({place.id});
  marker.setPlace({
    placeId: place.id,
    location: results[0].geometry.location,
  });
});

أمثلة على الخرائط

يحتوي هذا القسم على التعليمة البرمجية الكاملة لأمثلة الخرائط المعروضة في هذه الصفحة.

عنصر الإكمال التلقائي

يضيف هذا المثال أداة الإكمال التلقائي إلى صفحة ويب، ويعرض نتائج كل مكان محدّد.

TypeScript

async function initMap(): Promise<void> {
    // Request needed libraries.
    //@ts-ignore
    const [{ Map }] = await Promise.all([
        google.maps.importLibrary("places"),
    ]);
    // Create the input HTML element, and append it.
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    document.body.appendChild(placeAutocomplete);

    // Inject HTML UI.
    const selectedPlaceTitle = document.createElement('p');
    selectedPlaceTitle.textContent = '';
    document.body.appendChild(selectedPlaceTitle);

    const selectedPlaceInfo = document.createElement('pre');
    selectedPlaceInfo.textContent = '';
    document.body.appendChild(selectedPlaceInfo);

    // Add the gmp-placeselect listener, and display the results.
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(
            place.toJSON(), /* replacer */ null, /* space */ 2);
    });
}

initMap();index.ts

JavaScript

async function initMap() {
  // Request needed libraries.
  //@ts-ignore
  const [{ Map }] = await Promise.all([google.maps.importLibrary("places")]);
  // Create the input HTML element, and append it.
  //@ts-ignore
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

  //@ts-ignore
  document.body.appendChild(placeAutocomplete);

  // Inject HTML UI.
  const selectedPlaceTitle = document.createElement("p");

  selectedPlaceTitle.textContent = "";
  document.body.appendChild(selectedPlaceTitle);

  const selectedPlaceInfo = document.createElement("pre");

  selectedPlaceInfo.textContent = "";
  document.body.appendChild(selectedPlaceInfo);
  // Add the gmp-placeselect listener, and display the results.
  //@ts-ignore
  placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "location"],
    });
    selectedPlaceTitle.textContent = "Selected Place:";
    selectedPlaceInfo.textContent = JSON.stringify(
      place.toJSON(),
      /* replacer */ null,
      /* space */ 2,
    );
  });
}

initMap();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

p {
  font-family: Roboto, sans-serif;
  font-weight: bold;
}
style.css

HTML

<html>
  <head>
    <title>Place Autocomplete element</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <p style="font-family: roboto, sans-serif">Search for a place here:</p>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>index.html

تجربة النموذج

JSFiddle.net Google Cloud Shell

الإكمال التلقائي للخريطة

يوضّح هذا المثال كيفية إضافة تطبيق مصغّر للإكمال التلقائي إلى إحدى خرائط Google.

TypeScript

let map: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
async function initMap(): Promise<void> {
    // Request needed libraries.
    //@ts-ignore
    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') as HTMLElement, {
        center: { lat: 40.749933, lng: -73.98633 },
        zoom: 13,
        mapId: '4504f8b37365c3d0',
        mapTypeControl: false,
    });
    //@ts-ignore
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();
    //@ts-ignore
    placeAutocomplete.id = 'place-autocomplete-input';

    const card = document.getElementById('place-autocomplete-card') as HTMLElement;
    //@ts-ignore
    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-placeselect listener, and display the results on the map.
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-placeselect', async ({ place }) => {
        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,
    });
}

initMap();index.ts

JavaScript

let map;
let marker;
let infoWindow;

async function initMap() {
  // Request needed libraries.
  //@ts-ignore
  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,
  });

  //@ts-ignore
  const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement();

  //@ts-ignore
  placeAutocomplete.id = "place-autocomplete-input";

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

  //@ts-ignore
  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-placeselect listener, and display the results on the map.
  //@ts-ignore
  placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
    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,
  });
}

initMap();index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#place-autocomplete-card {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  margin: 10px;
  padding: 5px;
  font-family: Roboto, sans-serif;
  font-size: large;
  font-weight: bold;
}

gmp-place-autocomplete {
  width: 300px;
}

#infowindow-content .title {
  font-weight: bold;
}

#map #infowindow-content {
  display: inline;
}
style.css

HTML

<html>
  <head>
    <title>Place Autocomplete map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div class="place-autocomplete-card" id="place-autocomplete-card">
      <p>Search for a place here:</p>
    </div>
    <div id="map"></div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "beta"});</script>
  </body>
</html>index.html

تجربة النموذج

JSFiddle.net Google Cloud Shell

استخدام مكوِّن "أداة اختيار الأماكن"

ملاحظة: يستخدم هذا النموذج مكتبة مفتوحة المصدر. يمكنك الاطّلاع على ملف README للحصول على الدعم والملاحظات المتعلقة بالمكتبة.

يمكنك عرض الإكمال التلقائي للأماكن من خلال إضافة بضعة أسطر من الرمز باستخدام مكوّنات الويب.

ملف GIF مع مربّع البحث يبدأ المستخدم في كتابة عنوان كإدخال وتظهر قائمة منسدلة بالعناوين ذات الصلة. ينقر المستخدم على عنوان من القائمة المنسدلة وسيملأ مربّع البحث بقية العنوان. — الشكل 1: إدخال نص للبحث عن عنوان أو مكان محدّد باستخدام ميزة "الإكمال التلقائي"

ما هي مكوّنات الويب؟

تتيح لك مكونات الويب إنشاء علامات HTML مغلّفة ومخصّصة وقابلة لإعادة الاستخدام يمكن استخدامها في أي مكان في ترميز HTML على تطبيق الويب الخاص بك. وهي متوافقة مع جميع المتصفّحات الحديثة وتوفّر آلية غير متوافقة مع إطار العمل لتغليف واجهة المستخدم والوظائف.

ما هو مكوّن "أداة اختيار الأماكن"؟

مكوِّن أداة اختيار الأماكن هو إدخال نص يسمح للمستخدمين بالبحث عن عنوان أو مكان محدّد باستخدام الإكمال التلقائي.

ما المقصود بمكتبة المكونات الموسعة؟

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

البدء

للبدء، قم بتحميل مكتبة المكونات الموسّعة مع npm.

للحصول على أفضل أداء، استخدم مدير الحزم وقم باستيراد المكونات التي تحتاجها فقط. ويتم إدراج هذه الحزمة في npm على النحو التالي: @googlemaps/extended-component-library. يمكنك تثبيته باستخدام:

  npm i @googlemaps/extended-component-library;

ثم قم باستيراد أي مكونات تستخدمها في تطبيقك.

  import '@googlemaps/extended-component-library/place_picker.js';

بعد تحميل مكتبة npm، احصل على مفتاح واجهة برمجة التطبيقات من Cloud Console.

  <gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placepicker_v1"></gmpx-api-loader>

استخدام علامة مكوّن أداة اختيار الأماكن

  <gmpx-place-picker placeholder="Enter a place" id="place-picker" style="width: 100%">
  </gmpx-place-picker>

لمزيد من التفاصيل، يمكنك الاطّلاع على GitHub أو npm. للاطّلاع على المكوّنات المستخدمة في نموذج الرمز، يمكنك مراجعة صفحة الأمثلة على GitHub.