عنصر تکمیل خودکار مکان اصلی

پلتفرم را انتخاب کنید: Android iOS JavaScript

BasicPlaceAutocompleteElement یک فیلد ورودی متن ایجاد می‌کند، پیش‌بینی‌های مکان را در فهرست انتخاب رابط کاربری ارائه می‌کند، و یک شناسه مکان برای مکان انتخابی برمی‌گرداند.

اجرای عنصر Basic Place Autocomplete ساده‌تر از PlaceAutocompleteElement است و به روش‌های زیر متفاوت است:

  • عنصر Basic Place Autocomplete یک شی Place را برمی‌گرداند که فقط حاوی شناسه مکان است، نه یک شی PlacePrediction . می‌توانید از شناسه مکان بازگشتی مستقیماً با عنصر Places UI Kit Details برای دریافت جزئیات مکان استفاده کنید، در حالی که یک شی PlacePrediction ابتدا نیاز به تبدیل به شناسه مکان دارد.
  • عنصر Basic Place Autocomplete نیازی به بارگیری Places API ندارد.
  • وقتی کاربر پیش‌بینی مکان را انتخاب می‌کند، عنصر Basic Place Autocomplete، فیلد ورودی را پاک می‌کند.

پیش نیازها

برای استفاده از عنصر Basic Place Autocomplete، باید Places UI Kit را در پروژه Google Cloud خود فعال کنید. برای جزئیات بیشتر به شروع به کار مراجعه کنید.

یک عنصر Basic Place Autocomplete اضافه کنید

این بخش به شما نشان می دهد که چگونه یک عنصر تکمیل خودکار اولیه را به یک صفحه وب یا نقشه اضافه کنید.

یک عنصر Basic Autocomplete را به یک صفحه وب اضافه کنید

برای افزودن عنصر BasicAutocomplete به یک صفحه وب، یک google.maps.places.BasicPlaceAutocompleteElement جدید ایجاد کنید و همانطور که در مثال زیر نشان داده شده است آن را به صفحه اضافه کنید:

// Request needed libraries.
const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary('places');
// Create the input HTML element and append it.
const placeAutocomplete = new BasicPlaceAutocompleteElement();
document.body.appendChild(placeAutocomplete);

یک عنصر Basic Autocomplete را به نقشه اضافه کنید

برای افزودن یک عنصر Basic Autocomplete به نقشه، یک BasicPlaceAutocompleteElement را به یک عنصر gmp-map اضافه کنید و موقعیت آن را با استفاده از ویژگی slot تنظیم کنید، همانطور که در مثال زیر نشان داده شده است:

<gmp-map zoom="12" center="37.4220656,-122.0840897" map-id="DEMO_MAP_ID">
  <gmp-basic-place-autocomplete
    slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
</gmp-map>
index.html

پیش بینی های تکمیل خودکار را محدود کنید

به‌طور پیش‌فرض، Basic Place Auto Complete همه انواع مکان‌ها را ارائه می‌دهد که برای پیش‌بینی‌های نزدیک به مکان کاربر تعصب دارند. BasicPlaceAutocompleteElementOptions تنظیم کنید تا با محدود کردن یا بایاس کردن نتایج، پیش‌بینی‌های مرتبط‌تری ارائه دهد.

محدود کردن نتایج باعث می‌شود که عنصر Basic Autocomplete نتایجی را که خارج از محدوده محدودیت هستند نادیده بگیرد. یک روش معمول محدود کردن نتایج به محدوده نقشه است. نتایج بایاس باعث می شود که عنصر BasicAutocomplete نتایج را در ناحیه مشخص شده نشان دهد، اما ممکن است برخی از تطابق ها خارج از آن منطقه باشند.

اگر هیچ محدوده یا یک نمای نقشه ارائه نکنید، API سعی می کند موقعیت مکانی کاربر را از آدرس IP آنها تشخیص دهد و نتایج را به آن مکان سوگیری می کند. هر زمان که ممکن است حد و مرز تعیین کنید. در غیر این صورت، کاربران مختلف ممکن است پیش بینی های متفاوتی دریافت کنند. همچنین، برای بهبود کلی پیش‌بینی‌ها، مهم است که یک نمای دید معقول ارائه کنید، مانند تصویری که با حرکت دادن یا بزرگ‌نمایی روی نقشه تنظیم می‌کنید، یا یک درگاه دید برنامه‌نویس بر اساس مکان و شعاع دستگاه. هنگامی که شعاع در دسترس نیست، 5 کیلومتر پیش فرض معقول برای عنصر تکمیل خودکار مکان اصلی در نظر گرفته می شود. یک دریچه دید با شعاع صفر (یک نقطه)، یک دریچه دید با عرض تنها چند متر (کمتر از 100 متر)، یا یک دریچه دید که سراسر کره زمین را در بر می گیرد، تنظیم نکنید.

جستجوی مکان را بر اساس کشور محدود کنید

برای محدود کردن جستجوی مکان به یک یا چند کشور خاص، از ویژگی includedRegionCodes برای تعیین کد(های) کشور همانطور که در قطعه زیر نشان داده شده است استفاده کنید:

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

جستجوی مکان را به محدوده نقشه محدود کنید

برای محدود کردن جستجوی مکان به محدوده‌های نقشه، از ویژگی locationRestrictions برای اضافه کردن محدوده‌ها استفاده کنید، همانطور که در قطعه زیر نشان داده شده است:

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

وقتی محدودیت‌های نقشه را محدود می‌کنید، حتماً شنونده‌ای اضافه کنید تا زمانی که محدوده‌ها تغییر می‌کنند، آن‌ها را به‌روزرسانی کند:

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

برای حذف locationRestriction ، آن را روی null قرار دهید.

نتایج جستجوی مکان سوگیری

Bias نتایج جستجو را با استفاده از ویژگی locationBias و عبور از یک شعاع در یک ناحیه دایره ای قرار می دهد، همانطور که در اینجا نشان داده شده است:

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

برای حذف locationBias ، آن را روی null قرار دهید.

نتایج جستجوی مکان را به انواع خاصی محدود کنید

با استفاده از ویژگی includedPrimaryTypes و مشخص کردن یک یا چند نوع، همانطور که در اینجا نشان داده شده است، نتایج جستجوی مکان را به انواع خاصی از مکان ها محدود کنید:

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

برای فهرست کامل انواع پشتیبانی شده، جداول نوع مکان A و B را ببینید.

عنصر درخواست مکان را پیکربندی کنید

هنگامی که کاربر پیش‌بینی را انتخاب می‌کند، شنونده‌ای را برای به‌روزرسانی عنصر درخواست مکان اضافه کنید:

// Event listener for when a place is selected from the autocomplete list.
placeAutocompleteElement.addEventListener('gmp-select', (event) => {
    // Reset marker and InfoWindow, and prepare the details element.
    placeDetailsParent.appendChild(placeDetailsElement);
    placeDetailsElement.style.display = 'block';
    advancedMarkerElement.position = null;
    infoWindow.close();
    // Request details for the selected place.
    const placeDetailsRequest = placeDetailsElement.querySelector('gmp-place-details-place-request');
    placeDetailsRequest.place = event.place.id;
});
index.js

این مثال به شما نشان می دهد که چگونه می توانید یک عنصر Basic Autocomplete را به نقشه گوگل اضافه کنید.

جاوا اسکریپت 

const placeAutocompleteElement = document.querySelector('gmp-basic-place-autocomplete');
const placeDetailsElement = document.querySelector('gmp-place-details-compact');
const placeDetailsParent = placeDetailsElement.parentElement;
const gmpMapElement = document.querySelector('gmp-map');
async function initMap() {
    // Asynchronously load required libraries from the Google Maps JS API.
    await google.maps.importLibrary('places');
    const { AdvancedMarkerElement } = (await google.maps.importLibrary('marker'));
    const { InfoWindow } = (await google.maps.importLibrary('maps'));
    // Get the initial center directly from the gmp-map element's property.
    const center = gmpMapElement.center;
    // Set the initial location bias for the autocomplete element.
    placeAutocompleteElement.locationBias = center;
    // Update the map object with specified options.
    const map = gmpMapElement.innerMap;
    map.setOptions({
        clickableIcons: false,
        mapTypeControl: false,
        streetViewControl: false,
    });
    // Create an advanced marker to show the location of a selected place.
    const advancedMarkerElement = new AdvancedMarkerElement({
        map: map,
        collisionBehavior: google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL,
    });
    // Create an InfoWindow to hold the place details component.
    const infoWindow = new InfoWindow({
        minWidth: 360,
        disableAutoPan: true,
        headerDisabled: true,
        pixelOffset: new google.maps.Size(0, -10),
    });
    // Event listener for when a place is selected from the autocomplete list.
    placeAutocompleteElement.addEventListener('gmp-select', (event) => {
        // Reset marker and InfoWindow, and prepare the details element.
        placeDetailsParent.appendChild(placeDetailsElement);
        placeDetailsElement.style.display = 'block';
        advancedMarkerElement.position = null;
        infoWindow.close();
        // Request details for the selected place.
        const placeDetailsRequest = placeDetailsElement.querySelector('gmp-place-details-place-request');
        placeDetailsRequest.place = event.place.id;
    });
    // Event listener for when the place details have finished loading.
    placeDetailsElement.addEventListener('gmp-load', () => {
        const location = placeDetailsElement.place.location;
        // Position the marker and open the InfoWindow at the place's location.
        advancedMarkerElement.position = location;
        infoWindow.setContent(placeDetailsElement);
        infoWindow.open({
            map,
            anchor: advancedMarkerElement,
        });
        map.setCenter(location);
    });
    // Event listener to close the InfoWindow when the map is clicked.
    map.addListener('click', () => {
        infoWindow.close();
        advancedMarkerElement.position = null;
    });
    // Event listener for when the map finishes moving (panning or zooming).
    map.addListener('idle', () => {
        const newCenter = map.getCenter();
        // Update the autocomplete's location bias to a 10km radius around the new map center.
        placeAutocompleteElement.locationBias = new google.maps.Circle({
            center: {
                lat: newCenter.lat(),
                lng: newCenter.lng(),
            },
            radius: 10000, // 10km in meters.
        });
    });
}
initMap();
index.js

CSS 

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

gmp-map {
  height: 100%;
}

gmp-basic-place-autocomplete {
  position: absolute;
  height: 30px;
  width: 500px;
  top: 10px;
  left: 10px;
  box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2);
  color-scheme: light;
  border-radius: 10px;
}
style.css

HTML 

<html>
  <head>
    <title>Basic Place Autocomplete map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
    <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});
    </script>
  </head>
  <body>
    <gmp-map zoom="12" center="37.4220656,-122.0840897" map-id="DEMO_MAP_ID">
      <gmp-basic-place-autocomplete
        slot="control-inline-start-block-start"></gmp-basic-place-autocomplete>
    </gmp-map>
    <!-- Use inline styles to configure the Place Details Compact element because
     it will be placed within the info window, and info window content is inside 
     the shadow DOM when using <gmp-map> -->
    <gmp-place-details-compact
      orientation="horizontal"
      style="width: 400px;
      display: none;
      border: none;
      padding: 0;
      margin: 0;
      background-color: transparent;
      color-scheme: light;">
      <gmp-place-details-place-request></gmp-place-details-place-request>
      <gmp-place-standard-content></gmp-place-standard-content>
    </gmp-place-details-compact>
  </body>
</html>
index.html

Sample را امتحان کنید