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

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

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

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

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

پیش‌نیازها

برای استفاده از عنصر تکمیل خودکار مکان پایه، باید کیت رابط کاربری مکان‌ها را در پروژه Google Cloud خود فعال کنید. برای جزئیات بیشتر به شروع به کار مراجعه کنید.

یک عنصر تکمیل خودکار مکان پایه اضافه کنید

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

یک عنصر تکمیل خودکار پایه به یک صفحه وب اضافه کنید

برای افزودن عنصر 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 به یک نقشه، یک 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

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

به طور پیش‌فرض، قابلیت تکمیل خودکار مکان پایه، همه انواع مکان‌ها را با سوگیری برای پیش‌بینی‌های نزدیک به مکان کاربر ارائه می‌دهد. 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 مراجعه کنید.

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

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

// 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

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

جاوا اسکریپت 

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

سی‌اس‌اس 

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>
  <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

نمونه را امتحان کنید