معرفی Places UI Kit : یک کتابخانه اجزای آماده و کم هزینه که به شما امکان می دهد رابط کاربری آشنای Google Maps for Places را به هر نقشه ای که انتخاب می کنید بیاورید. آن را امتحان کنید و نظرات خود را برای کمک به شکل دادن به آینده GMP به اشتراک بگذارید!

این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

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

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

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

پیش نیازها

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

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

عنصر Basic Place Autocomplete یک فیلد ورودی متن ایجاد می‌کند، پیش‌بینی‌های مکان را در فهرست انتخاب رابط کاربری ارائه می‌کند، و یک شناسه مکان را در پاسخ به انتخاب کاربر با استفاده از رویداد gmp-select برمی‌گرداند. این بخش به شما نشان می دهد که چگونه یک عنصر تکمیل خودکار اولیه را به یک صفحه وب یا نقشه اضافه کنید.

یک عنصر 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 جدید ایجاد کنید، آن را به یک div اضافه کنید و آن را به عنوان یک کنترل سفارشی روی نقشه فشار دهید، همانطور که در مثال زیر نشان داده شده است:

  const placeAutocomplete = new google.maps.places.BasicPlaceAutocompleteElement();
  placeAutocomplete.id = 'place-autocomplete-input';
  placeAutocomplete.locationBias = center;
  const card = document.getElementById('place-autocomplete-card');
  card.appendChild(placeAutocomplete);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

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

به‌طور پیش‌فرض، 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 را ببینید.

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

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

// Add the listener to update the Place Request element when the user selects a prediction
autocompleteElement.addEventListener('gmp-select', async (event) => {
    const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
    placeDetailsRequest.place = event.place.id;
});index.js

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

جاوا اسکریپت

const mapContainer = document.getElementById("map-container");
const autocompleteElement = document.querySelector('gmp-basic-place-autocomplete');
const detailsElement = document.querySelector('gmp-place-details-compact');
const mapElement = document.querySelector('gmp-map');
const advancedMarkerElement = document.querySelector('gmp-advanced-marker');
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap() {
    //@ts-ignore
    const { BasicPlaceAutocompleteElement, PlaceDetailsElement } = await google.maps.importLibrary('places');
    //@ts-ignore
    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');
    //@ts-ignore
    const { LatLngBounds } = await google.maps.importLibrary('core');
    // Set the initial map location and autocomplete location bias
    mapElement.center = center;
    autocompleteElement.locationBias = center;
    // Get the underlying google.maps.Map object to add listeners
    const map = mapElement.innerMap;
    // Add the listener tochange locationBias to locationRestriction when the map moves
    map.addListener('bounds_changed', () => {
        autocompleteElement.locationBias = null;
        autocompleteElement.locationRestriction = map.getBounds();
        console.log("bias changed to restriction");
    });
    // Add the listener to update the Place Request element when the user selects a prediction
    autocompleteElement.addEventListener('gmp-select', async (event) => {
        const placeDetailsRequest = document.querySelector('gmp-place-details-place-request');
        placeDetailsRequest.place = event.place.id;
    });
    // Add the listener to update the marker when the Details element loads
    detailsElement.addEventListener('gmp-load', async () => {
        const location = detailsElement.place.location;
        detailsElement.style.display = "block";
        advancedMarkerElement.position = location;
        advancedMarkerElement.content = detailsElement;
        if (detailsElement.place.viewport) {
            map.fitBounds(detailsElement.place.viewport);
        }
        else {
            map.setCenter(location);
            map.setZoom(17);
        }
    });
}
initMap();index.js

CSS

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

#map-container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

#gmp-map {
  height: 100%;
}

gmp-basic-place-autocomplete {
  position: absolute;
  height: 50px;
  top: 10px;
  left: 10px;
  z-index: 1;
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
  color-scheme: light;
  border-radius: 10px;
}

gmp-place-details-compact {
  width: 360px;
  max-height: 300px;
  border: none;
  padding: 0;
  margin: 0;
  position: absolute;
  transform: translate(calc(-180px), calc(-215px)); 
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.2); 
  color-scheme: light;
}

/* This creates the pointer attached to the bottom of the element. */
gmp-place-details-compact::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
}style.css

HTML

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

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
   <div id="map-container">
      <gmp-basic-place-autocomplete></gmp-basic-place-autocomplete>
      <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request>
        <gmp-place-all-content></gmp-place-all-content>
      </gmp-place-details-compact>
      <gmp-map zoom="14" map-id="DEMO_MAP_ID">
         <gmp-advanced-marker></gmp-advanced-marker> 
      </gmp-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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </body>
</html>index.html

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

JSFiddle.net