ویجت تکمیل خودکار را قرار دهید

توسعه‌دهندگان منطقه اقتصادی اروپا (EEA)

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

پیش‌نیازها

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

چه خبر؟

تکمیل خودکار مکان به روش‌های زیر بهبود یافته است:

  • رابط کاربری ویجت تکمیل خودکار از محلی‌سازی منطقه‌ای (از جمله زبان‌های راست به چپ) برای محل قرارگیری متن ورودی، لوگوی لیست پیش‌بینی‌ها و پیش‌بینی‌های مکان پشتیبانی می‌کند.
  • دسترسی‌پذیری بهبود یافته، از جمله پشتیبانی از صفحه‌خوان‌ها و تعامل با صفحه‌کلید.
  • ویجت تکمیل خودکار، کلاس Place جدید را برمی‌گرداند تا مدیریت شیء برگشتی ساده‌تر شود.
  • پشتیبانی بهتر از دستگاه‌های تلفن همراه و صفحه نمایش‌های کوچک.
  • عملکرد بهتر و ظاهر گرافیکی بهبود یافته.

افزودن ویجت تکمیل خودکار

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

افزودن ویجت تکمیل خودکار به یک صفحه وب

برای افزودن ویجت تکمیل خودکار به یک صفحه وب، یک google.maps.places.PlaceAutocompleteElement جدید ایجاد کنید و آن را مطابق مثال زیر به صفحه اضافه کنید:

تایپ اسکریپت 

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

جاوا اسکریپت 

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

نمونه کد کامل را ببینید

افزودن ابزارک تکمیل خودکار به نقشه

اگر آدرس صورتحساب شما خارج از منطقه اقتصادی اروپا (EEA) است، می‌توانید از ویجت تکمیل خودکار با نقشه گوگل نیز استفاده کنید.

برای افزودن ویجت تکمیل خودکار به نقشه، یک نمونه جدید از google.maps.places.PlaceAutocompleteElement ایجاد کنید، PlaceAutocompleteElement را به یک div اضافه کنید و آن را به عنوان یک کنترل سفارشی، همانطور که در مثال زیر نشان داده شده است، به نقشه اضافه کنید:

تایپ اسکریپت 

// Get the inner map.
innerMap = mapElement.innerMap;
innerMap.setOptions({
    mapTypeControl: false,
});

// Use the bounds_changed event to restrict results to the current map bounds.
google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
    placeAutocomplete.locationRestriction = innerMap.getBounds();
});
index.ts

جاوا اسکریپت 

// Get the inner map.
innerMap = mapElement.innerMap;
innerMap.setOptions({
    mapTypeControl: false,
});
// Use the bounds_changed event to restrict results to the current map bounds.
google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
    placeAutocomplete.locationRestriction = innerMap.getBounds();
});
index.js

نمونه کد کامل را ببینید

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

به طور پیش‌فرض، Place Autocomplete همه انواع مکان را ارائه می‌دهد، که برای پیش‌بینی‌های نزدیک به مکان کاربر سوگیری دارد، و همه فیلدهای داده موجود را برای مکان انتخاب شده کاربر دریافت می‌کند. PlaceAutocompleteElementOptions را تنظیم کنید تا پیش‌بینی‌های مرتبط‌تری را با محدود کردن یا سوگیری نتایج ارائه دهد.

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

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

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

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

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

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

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

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

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

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

برای حذف locationRestriction ، آن را روی null تنظیم کنید.

نتایج جستجوی مکان بایاس

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

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

برای حذف locationBias ، آن را روی null تنظیم کنید.

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

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

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

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

دریافت جزئیات مکان

برای دریافت جزئیات مکان برای مکان انتخاب شده، یک شنونده gmp-select به PlaceAutocompleteElement اضافه کنید، همانطور که در مثال زیر نشان داده شده است:

تایپ اسکریپت 

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

جاوا اسکریپت 

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

نمونه کد کامل را ببینید

در مثال قبلی، شنونده رویداد یک شیء از کلاس Place را برمی‌گرداند. برای دریافت فیلدهای داده Place Details مورد نیاز برای برنامه خود، تابع place.fetchFields() را فراخوانی کنید.

شنونده در مثال بعدی اطلاعات مکان را درخواست کرده و آن را روی نقشه نمایش می‌دهد.

تایپ اسکریپت 

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

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

    let content = document.createElement('div');
    let nameText = document.createElement('span');
    nameText.textContent = place.displayName;
    content.appendChild(nameText);
    content.appendChild(document.createElement('br'));
    let addressText = document.createElement('span');
    addressText.textContent = place.formattedAddress;
    content.appendChild(addressText);

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

جاوا اسکریپت 

// Add the gmp-placeselect listener, and display the results on the map.
//prettier-ignore
//@ts-ignore
placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
    });
    // If the place has a geometry, then present it on a map.
    if (place.viewport) {
        innerMap.fitBounds(place.viewport);
    }
    else {
        innerMap.setCenter(place.location);
        innerMap.setZoom(17);
    }
    let content = document.createElement('div');
    let nameText = document.createElement('span');
    nameText.textContent = place.displayName;
    content.appendChild(nameText);
    content.appendChild(document.createElement('br'));
    let addressText = document.createElement('span');
    addressText.textContent = place.formattedAddress;
    content.appendChild(addressText);
    updateInfoWindow(content, place.location);
    marker.position = place.location;
});
index.js

نمونه کد کامل را ببینید

نقشه‌های نمونه

این بخش شامل کد کامل برای نقشه‌های نمونه‌ای است که در این صفحه نمایش داده شده‌اند.

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

این مثال یک ویجت تکمیل خودکار به یک صفحه وب اضافه می‌کند و نتایج را برای هر مکان انتخاب شده نمایش می‌دهد.

تایپ اسکریپت 

async function initMap(): Promise<void> {
    // Request needed libraries.
    (await google.maps.importLibrary('places')) as google.maps.PlacesLibrary;
    // Create the input HTML element, and append it.
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(
        {}
    );
    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.
    //prettier-ignore
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(
            place.toJSON(), /* replacer */ null, /* space */ 2);
    });
}

initMap();
index.ts

جاوا اسکریپت 

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('places'));
    // Create the input HTML element, and append it.
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({});
    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.
    //prettier-ignore
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(place.toJSON(), /* replacer */ null, /* space */ 2);
    });
}
initMap();
index.js

سی‌اس‌اس 

/* 
 * 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>
    <head>
        <title>Place Autocomplete element</title>

        <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </body>
</html>
index.html

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

نقشه تکمیل خودکار

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

تایپ اسکریپت 

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
const placeAutocomplete = document.querySelector(
    'gmp-place-autocomplete'
) as google.maps.places.PlaceAutocompleteElement;
let innerMap;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap(): Promise<void> {
    // Request needed libraries.
    const [] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Use the bounds_changed event to restrict results to the current map bounds.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });

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

    infoWindow = new google.maps.InfoWindow({});

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

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

      let content = document.createElement('div');
      let nameText = document.createElement('span');
      nameText.textContent = place.displayName;
      content.appendChild(nameText);
      content.appendChild(document.createElement('br'));
      let addressText = document.createElement('span');
      addressText.textContent = place.formattedAddress;
      content.appendChild(addressText);

      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: innerMap,
        anchor: marker,
        shouldFocus: false,
    });
}

initMap();
index.ts

جاوا اسکریپت 

const mapElement = document.querySelector('gmp-map');
const placeAutocomplete = document.querySelector('gmp-place-autocomplete');
let innerMap;
let marker;
let infoWindow;
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap() {
    // Request needed libraries.
    const [] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    // Get the inner map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });
    // Use the bounds_changed event to restrict results to the current map bounds.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });
    // Create the marker and infowindow.
    marker = new google.maps.marker.AdvancedMarkerElement({
        map: innerMap,
    });
    infoWindow = new google.maps.InfoWindow({});
    // Add the gmp-placeselect listener, and display the results on the map.
    //prettier-ignore
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: ['displayName', 'formattedAddress', 'location'],
        });
        // If the place has a geometry, then present it on a map.
        if (place.viewport) {
            innerMap.fitBounds(place.viewport);
        }
        else {
            innerMap.setCenter(place.location);
            innerMap.setZoom(17);
        }
        let content = document.createElement('div');
        let nameText = document.createElement('span');
        nameText.textContent = place.displayName;
        content.appendChild(nameText);
        content.appendChild(document.createElement('br'));
        let addressText = document.createElement('span');
        addressText.textContent = place.formattedAddress;
        content.appendChild(addressText);
        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: innerMap,
        anchor: marker,
        shouldFocus: false,
    });
}
initMap();
index.js

سی‌اس‌اس 

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-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>
    <head>
        <title>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 center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
            <div
                class="place-autocomplete-card"
                slot="control-inline-start-block-start">
                <p>Search for a place here:</p>
                <gmp-place-autocomplete></gmp-place-autocomplete>
            </div>
        </gmp-map>
    </body>
</html>
index.html

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

بهینه‌سازی تکمیل خودکار (جدید)

این بخش بهترین شیوه‌ها را برای کمک به شما در استفاده بهینه از سرویس تکمیل خودکار (جدید) شرح می‌دهد.

در اینجا چند دستورالعمل کلی آورده شده است:

بهترین شیوه‌های بهینه‌سازی هزینه

بهینه‌سازی هزینه پایه

برای بهینه‌سازی هزینه استفاده از سرویس تکمیل خودکار (جدید)، از ماسک‌های فیلد در ویجت‌های جزئیات مکان (جدید) و تکمیل خودکار (جدید) استفاده کنید تا فقط فیلدهای داده تکمیل خودکار (جدید) مورد نیاز خود را برگردانید.

بهینه‌سازی پیشرفته هزینه

پیاده‌سازی برنامه‌ریزی‌شده‌ی Autocomplete (جدید) را برای دسترسی به SKU در نظر بگیرید: Autocomplete درخواست قیمت‌گذاری و درخواست نتایج Geocoding API در مورد مکان انتخاب‌شده به جای Place Details (جدید). قیمت‌گذاری بر اساس درخواست همراه با Geocoding API در صورت برآورده شدن هر دو شرط زیر، مقرون‌به‌صرفه‌تر از قیمت‌گذاری بر اساس هر جلسه (مبتنی بر جلسه) است:

  • اگر فقط به طول/عرض جغرافیایی یا آدرس مکان انتخاب شده کاربر نیاز دارید، API مربوط به Geocoding این اطلاعات را با هزینه‌ای کمتر از فراخوانی Place Details (New) ارائه می‌دهد.
  • اگر کاربران به طور متوسط ​​از بین چهار درخواست پیش‌بینی تکمیل خودکار (جدید) یا کمتر، یک پیش‌بینی تکمیل خودکار را انتخاب کنند، قیمت‌گذاری بر اساس هر درخواست ممکن است مقرون به صرفه‌تر از قیمت‌گذاری بر اساس هر جلسه باشد.
برای کمک به انتخاب پیاده‌سازی تکمیل خودکار (جدید) که متناسب با نیازهای شما باشد، برگه‌ای را که مربوط به پاسخ شما به سوال زیر است، انتخاب کنید.

آیا درخواست شما به اطلاعات دیگری غیر از آدرس و طول و عرض جغرافیایی پیش‌بینی انتخاب شده نیاز دارد؟

بله، نیاز به توضیحات بیشتر دارد

استفاده از تکمیل خودکار مبتنی بر جلسه (جدید) به همراه جزئیات مکان (جدید).
از آنجایی که برنامه شما به جزئیات مکان (جدید)، مانند نام مکان، وضعیت کسب و کار یا ساعات کاری نیاز دارد، پیاده‌سازی Autocomplete (جدید) شما باید از یک توکن جلسه (به صورت برنامه‌نویسی یا ساخته شده در ویجت‌های جاوا اسکریپت ، اندروید یا iOS ) به ازای هر جلسه به علاوه SKU های مکان‌های قابل اجرا، بسته به فیلدهای داده مکانی که درخواست می‌کنید، استفاده کند. 1

پیاده‌سازی ویجت
مدیریت جلسه به طور خودکار در ویجت‌های جاوا اسکریپت ، اندروید یا iOS تعبیه شده است. این شامل درخواست‌های تکمیل خودکار (جدید) و درخواست جزئیات مکان (جدید) در پیش‌بینی انتخاب شده می‌شود. حتماً پارامتر fields را مشخص کنید تا مطمئن شوید که فقط فیلدهای داده تکمیل خودکار (جدید) مورد نیاز خود را درخواست می‌کنید.

پیاده‌سازی برنامه‌ریزی‌شده
از یک توکن جلسه ( session token) برای درخواست‌های تکمیل خودکار (Autocomplete) خود استفاده کنید. هنگام درخواست جزئیات مکان (Place Details) (جدید) در مورد پیش‌بینی انتخاب شده، پارامترهای زیر را وارد کنید:

  1. شناسه مکان از پاسخ تکمیل خودکار (جدید)
  2. توکن جلسه مورد استفاده در درخواست تکمیل خودکار (جدید)
  3. پارامتر fields که فیلدهای داده تکمیل خودکار (جدید) مورد نیاز شما را مشخص می‌کند

خیر، فقط به آدرس و موقعیت مکانی نیاز دارد

بسته به عملکرد استفاده از Autocomplete (جدید)، API مربوط به Geocoding می‌تواند گزینه مقرون‌به‌صرفه‌تری نسبت به Place Details (جدید) برای برنامه شما باشد. کارایی Autocomplete (جدید) هر برنامه بسته به اینکه کاربران چه اطلاعاتی را وارد می‌کنند، برنامه در کجا استفاده می‌شود و اینکه آیا بهترین شیوه‌های بهینه‌سازی عملکرد پیاده‌سازی شده‌اند یا خیر، متفاوت است.

برای پاسخ به سوال زیر، قبل از انتخاب پیش‌بینی تکمیل خودکار (جدید) در برنامه خود، تجزیه و تحلیل کنید که کاربر به طور متوسط ​​چند کاراکتر تایپ می‌کند.

آیا کاربران شما به طور متوسط ​​​​در چهار درخواست یا کمتر، پیش‌بینی تکمیل خودکار (جدید) را انتخاب می‌کنند؟

بله

تکمیل خودکار (جدید) را به صورت برنامه‌نویسی شده و بدون توکن‌های جلسه پیاده‌سازی کنید و API مربوط به Geocoding را روی پیش‌بینی مکان انتخاب شده فراخوانی کنید.
API ژئوکدینگ آدرس‌ها و مختصات طول و عرض جغرافیایی را ارائه می‌دهد. انجام چهار درخواست تکمیل خودکار به همراه یک فراخوانی API ژئوکدینگ در مورد پیش‌بینی مکان انتخاب شده، کمتر از هزینه تکمیل خودکار (جدید) به ازای هر جلسه است. 1

در نظر داشته باشید که از بهترین شیوه‌های عملکرد استفاده کنید تا به کاربران خود کمک کنید پیش‌بینی مورد نظر خود را با تعداد کاراکترهای کمتری دریافت کنند.

خیر

استفاده از تکمیل خودکار مبتنی بر جلسه (جدید) به همراه جزئیات مکان (جدید).
از آنجایی که میانگین تعداد درخواست‌هایی که انتظار دارید قبل از انتخاب پیش‌بینی تکمیل خودکار (جدید) توسط کاربر انجام شود، از هزینه قیمت‌گذاری به ازای هر جلسه بیشتر است، پیاده‌سازی تکمیل خودکار (جدید) شما باید از یک توکن جلسه برای هر دو درخواست تکمیل خودکار (جدید) و درخواست مرتبط با جزئیات مکان (جدید) به ازای هر جلسه استفاده کند. 1

پیاده‌سازی ویجت
مدیریت جلسه به طور خودکار در ویجت‌های جاوا اسکریپت ، اندروید یا iOS تعبیه شده است. این شامل درخواست‌های تکمیل خودکار (جدید) و درخواست جزئیات مکان (جدید) در پیش‌بینی انتخاب شده می‌شود. حتماً پارامتر fields را مشخص کنید تا مطمئن شوید که فقط فیلدهای مورد نیاز خود را درخواست می‌کنید.

پیاده‌سازی برنامه‌ریزی‌شده
از یک توکن جلسه ( session token) برای درخواست‌های تکمیل خودکار (Autocomplete) خود استفاده کنید. هنگام درخواست جزئیات مکان (Place Details) (جدید) در مورد پیش‌بینی انتخاب شده، پارامترهای زیر را وارد کنید:

  1. شناسه مکان از پاسخ تکمیل خودکار (جدید)
  2. توکن جلسه مورد استفاده در درخواست تکمیل خودکار (جدید)
  3. پارامتر fields که فیلدهایی مانند آدرس و هندسه را مشخص می‌کند

درخواست‌های تکمیل خودکار (جدید) را به تعویق بیندازید
شما می‌توانید از استراتژی‌هایی مانند به تأخیر انداختن درخواست تکمیل خودکار (جدید) تا زمانی که کاربر سه یا چهار کاراکتر اول را تایپ کرده باشد، استفاده کنید تا برنامه شما درخواست‌های کمتری ارسال کند. به عنوان مثال، ایجاد درخواست‌های تکمیل خودکار (جدید) برای هر کاراکتر پس از تایپ کاراکتر سوم توسط کاربر به این معنی است که اگر کاربر هفت کاراکتر تایپ کند و سپس پیش‌بینی‌ای را انتخاب کند که شما برای آن یک درخواست API Geocoding ارسال می‌کنید، هزینه کل برای 4 تکمیل خودکار (جدید) به ازای هر درخواست + Geocoding خواهد بود. 1

اگر تأخیر در درخواست‌ها می‌تواند میانگین درخواست برنامه‌نویسی شما را به زیر چهار برساند، می‌توانید از راهنمایی‌های مربوط به تکمیل خودکار (جدید) با پیاده‌سازی API Geocoding پیروی کنید. توجه داشته باشید که تأخیر در درخواست‌ها می‌تواند توسط کاربری که انتظار دارد با هر ضربه کلید جدید، پیش‌بینی‌ها را ببیند، به عنوان تأخیر تلقی شود.

استفاده از بهترین شیوه‌های عملکرد را در نظر بگیرید تا به کاربران خود کمک کنید پیش‌بینی مورد نظر خود را با تعداد کاراکترهای کمتری دریافت کنند.

  1. برای اطلاع از هزینه‌ها، به لیست قیمت‌های پلتفرم نقشه‌های گوگل مراجعه کنید.

بهترین شیوه‌های عملکرد

دستورالعمل‌های زیر روش‌های بهینه‌سازی عملکرد تکمیل خودکار (جدید) را شرح می‌دهند:

  • محدودیت‌های کشور، سوگیری موقعیت مکانی و (برای پیاده‌سازی‌های برنامه‌نویسی) ترجیح زبان را به پیاده‌سازی تکمیل خودکار (جدید) خود اضافه کنید. ترجیح زبان با ویجت‌ها لازم نیست زیرا آن‌ها ترجیحات زبان را از مرورگر یا دستگاه تلفن همراه کاربر انتخاب می‌کنند.
  • اگر تکمیل خودکار (جدید) با نقشه همراه باشد، می‌توانید مکان را بر اساس نمای نقشه تغییر دهید.
  • در شرایطی که کاربر یکی از پیش‌بینی‌های تکمیل خودکار (جدید) را انتخاب نمی‌کند، عموماً به این دلیل که هیچ‌کدام از این پیش‌بینی‌ها آدرس-نتیجه مورد نظر نیستند، می‌توانید از ورودی اصلی کاربر برای تلاش جهت دریافت نتایج مرتبط‌تر استفاده مجدد کنید:
    • اگر انتظار دارید کاربر فقط اطلاعات آدرس را وارد کند، از ورودی اصلی کاربر در فراخوانی Geocoding API استفاده مجدد کنید.
    • اگر انتظار دارید کاربر برای یک مکان خاص با نام یا آدرس جستجو کند، از درخواست «جزئیات مکان (جدید)» استفاده کنید. اگر نتایج فقط در یک منطقه خاص مورد انتظار است، از «سوگیری مکان» استفاده کنید.
    سناریوهای دیگری که در آنها بهتر است به API ژئوکدینگ برگردیم عبارتند از:
    • کاربرانی که آدرس‌های فرعی، مانند آدرس‌های واحدها یا آپارتمان‌های خاص در یک ساختمان را وارد می‌کنند. برای مثال، آدرس چکی "Stroupežnického 3191/17, Praha" در حالت تکمیل خودکار (جدید) پیش‌بینی جزئی ارائه می‌دهد.
    • کاربرانی که آدرس‌هایی با پیشوندهای قطعه جاده‌ای مانند «خیابان بیست و نهم، شماره ۲۳-۳۰، کوئینز» در شهر نیویورک یا «بزرگراه کامهامها، شماره ۴۷-۳۸۰، کانئوهه» در جزیره کائوآئی در هاوایی وارد می‌کنند.

سوگیری مکانی

با ارسال پارامتر location و پارامتر radius ، نتایج را به یک منطقه مشخص شده متمایل می‌کند. این به Autocomplete (جدید) دستور می‌دهد که ترجیح دهد نتایج را در منطقه تعریف شده نشان دهد. نتایج خارج از منطقه تعریف شده همچنان ممکن است نمایش داده شوند. می‌توانید از پارامتر components برای فیلتر کردن نتایج استفاده کنید تا فقط مکان‌های داخل یک کشور مشخص شده را نشان دهد.

محدود کردن موقعیت مکانی

با ارسال پارامتر locationRestriction ، نتایج را به یک ناحیه مشخص محدود کنید.

همچنین می‌توانید با اضافه کردن پارامتر locationRestriction ، نتایج را به ناحیه‌ای که توسط location و پارامتر radius تعریف شده است، محدود کنید. این به Autocomplete (جدید) دستور می‌دهد که فقط نتایج درون آن ناحیه را برگرداند.