Giriş
Otomatik tamamlama, Rehber kitaplığının bir özelliğidir. Maps JavaScript API. Otomatik tamamlamayı kullanarak Google Haritalar arama alanının arama sonuçlarının önceden yazılması davranışını uygular. Otomatik tamamlama hizmeti, tam kelimeler ve alt dizelerle eşleşerek yer adları, adresleri ve artı ekleyebilirsiniz. Dolayısıyla uygulamalar, kullanıcı yazarken sorguları göndermek anında yer tahminleri sağlayabilir. Places API tarafından tanımlandığı gibi, bir "yer" bir tesis, coğrafi konum veya önemli bir konum olabilir önemli bir nokta.
Başlarken
Maps JavaScript API'de Yerler kitaplığını kullanmadan önce Rehber API'sinin, Google Cloud Console'da projesi için oluşturduğunuz URL'leri içerir.
Etkin API'lerin listesini görüntülemek için:
- Şuraya gidin: Google Cloud Console.
- Proje seçin düğmesini tıklayın, ardından oluşturduğunuz projeyi seçin JavaScript API'sini açın ve Aç'ı tıklayın.
- Kontrol Paneli'ndeki API listesinde, Yerler API'si.
- Listede API'yi görüyorsanız hazırsınız demektir. API listede yoksa
şunu etkinleştirebilirsiniz:
- Sayfanın üst kısmında şunu görüntülemek için API'Yİ ETKİNLEŞTİR'i seçin: Kitaplık sekmesine gidin. Alternatif olarak sol taraftaki menüden Kitaplık'ı seçin.
- Places API'yi arayın ve sonuç listesi.
- ETKİNLEŞTİR'i seçin. Süreç tamamlandığında Places API, Kontrol paneli.
Kitaplık yükleniyor
Rehber hizmeti, ana kütüphaneden ayrı ve bağımsız bir kitaplıktır.
Maps JavaScript API kodu. Sunulan işlevleri kullanmak için
bu kitaplıkta, önce libraries
kullanarak yüklemeniz gerekir
parametresi için:
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initMap">
</script>
Bkz. Kitaplıklara Genel Bakış başlıklı makaleye göz atın.
Sınıfların özeti
Bu API, aşağıdakileri kullanarak ekleyebileceğiniz iki tür otomatik tamamlama widget'ı sunar:
Autocomplete
ve SearchBox
sınıfları.
Ayrıca, AutocompleteService
sınıfını kullanarak
sonuçları programatik olarak otomatik tamamlama (Haritalar JavaScript API Referansı'na bakın:
AutocompleteService sınıfı).
Aşağıda, katılabileceğiniz sınıfların bir özeti yer almaktadır:
-
Autocomplete
, web sayfanıza bir metin giriş alanı ekler. ve karakter girişleri için bu alanı izler. Kullanıcı metin girerken otomatik tamamlama sonuç tahminlerini açılır seçim listesi. Kullanıcı listeden bir yer seçtiğinde, bilgiler otomatik tamamlama nesnesine döndürülür ve bu öğe tarafından gerçekleştirilir. Ayrıntıları aşağıda bulabilirsiniz.Şekil 1: Metin alanını otomatik tamamlama ve seçim listesi Şekil 2: Doldurulmuş adres formu -
SearchBox
, web sayfanıza çok daha fazlaAutocomplete
ile aynıdır. Farklar aşağıda belirtilmiştir:- Temel fark, proje yöneticisinin
seçim listesinde görünür.
SearchBox
malzemeleri yerleri içerebilen daha kapsamlı bir tahmin listesi ( Places API) ve önerilen arama terimlerini de ziyaret edebilirsiniz. Örneğin, kullanıcı yazarsa, seçim listesi şu ifadeyi içerebilir: "kebap in İstanbul" çeşitli pizzaların adlarını da priz. SearchBox
, şundan daha az seçenek sunuyor: Aramayı kısıtlamak içinAutocomplete
. Projede aramayı belirli birLatLngBounds
değerine göre etkileyebilir. arama özelliğini kullanırken, aramayı sadece bir ülke için geçerli yer türlerini ve sınırları belirlemeyi de öğrendiniz. Daha fazla bilgi için bkz. burada bulabilirsiniz.
Şekil 3: Arama kutusu, arama terimlerini ve yer tahminlerini sunar. - Temel fark, proje yöneticisinin
seçim listesinde görünür.
- Web sitemiz g.co/newsinitiative/labs
üzerinden
Alınacak
AutocompleteService
nesne programlı olarak tahmin etmenize olanak tanır.getPlacePredictions()
numaralı telefonu arayın: eşleşen yerleri alın veyagetQueryPredictions()
numaralı telefonu arayın eşleşen yerleri ve önerilen arama terimlerini al. Not:AutocompleteService
, herhangi bir kullanıcı arayüzü denetimi eklemez. Bunun yerine, yukarıdaki yöntemler bir dizi tahmin nesnesi döndürür. Her biri tahmin nesnesi, tahmin metnini ve referans metnini içeren sonucun kullanıcı girişiyle nasıl eşleştiğine dair bilgi ve ayrıntılar. Bkz. aşağıda görebilirsiniz.
Otomatik tamamlama widget'ı ekleme
Autocomplete
widget, web sayfanızda bir metin giriş alanı oluşturur, kullanıcı arayüzü seçimindeki yerlerle ilgili tahminleri sağlar
ve getPlace()
isteğine yanıt olarak yer ayrıntılarını döndürür. Bu
seçim listesi, tek bir yere karşılık gelir (Places API'si tarafından tanımlandığı şekliyle).
Autocomplete
kurucusu iki bağımsız değişken alır:
text
türünde bir HTMLinput
öğesi. Bu, otomatik tamamlamanın düzenlediği giriş alanıdır hizmetin, sonuçları izleyecek ve bunlara ekleyeceği anlamına gelir.- İsteğe bağlı bir
AutocompleteOptions
bağımsız değişkeni şu özellikleri içerir:- Dahil edilecek
fields
veri dizisi kullanıcının seçtiğiPlaceResult
içinPlace Details
yanıtı. Öğe özellik ayarlanmadıysa veya['ALL']
ayarı başarılı olursa kullanılabilir tüm alanlar döndürülür billed for (bu önerilmez) . Alanların listesi içinPlaceResult
bölümüne bakın. - Şu özelliklere sahip bir
types
dizisi: değeri, desteklenen türler arasında listelendiği gibi açık bir tür veya tür koleksiyonunu belirtir. Herhangi bir tür belirtilmezse tüm türler geri döndü. bounds
, belirten birgoogle.maps.LatLngBounds
nesnesidir alanı arama alanında bulabilirsiniz. Sonuçlar tarafsız olsa da yalnızca aşağıdakilerle sınırlı değildir: yer alır.strictBounds
birboolean
API'nin yalnızca kesin olarak tanımlanan bölgenin içinde olan yerleri döndürüp döndürmeyeceğini belirtmek belirtilenbounds
değerine göre Aşağıdakiler olsa bile API, bu bölgenin dışında sonuç döndürmez: kullanıcı girişiyle eşleşir.componentRestrictions
, sonuçları şununla kısıtlamak için kullanılabilir: yararlanabilirsiniz. Şu andacomponentRestrictions
ile en fazla 5 filtre uygulayabilirsiniz ülkeler. Ülkeler iki karakterlik, ISO 3166-1 Alpha-2 uyumlu ülke olarak girilmelidir. girin. Birden fazla ülke, ülke kodları listesi olarak iletilmelidir.Not: Ülke koduyla birlikte beklenmedik sonuçlar alırsanız ülkelerini, bağımlı bölgeleri ve özel bölgeleri içeren bir kod istediğiniz coğrafi alanı belirleyin. Kod bilgilerini şu adreste bulabilirsiniz: Wikipedia: ISO listesi 3166 ülke kodları veya ISO Online Browsing Platform.
placeIdOnly
, komut vermek için kullanılabilir. Yalnızca Yer Kimliklerini almak içinAutocomplete
widget'ı. Arama yapılıyorAutocomplete
nesnesindegetPlace()
,PlaceResult
kullanılabilir hale gelende yalnızcaplace id
bulunur,types
vename
özellikleri ayarlandı. Döndürülen Yerler, Coğrafi Kodlama, Yol Tarifi veya Mesafe Matrisi'ne yapılan çağrıları içeren yer kimliği kullanıma sunuyoruz.
- Dahil edilecek
Otomatik Tamamlama tahminlerini kısıtlama
Varsayılan olarak, Otomatik Yer Tamamlama özelliği, kullanıcının konumunu belirler ve kullanıcının seçtiği yere ilişkin tüm veri alanlarını getirir. Yeri Ayarla Şu kriterlere göre daha alakalı tahminler sunmak için otomatik tamamlama seçenekleri: en iyi uygulamaları görelim.
Yapım aşamasında seçenekleri ayarla
Autocomplete
oluşturucu bir AutocompleteOptions
kabul ediyor
parametresini kullanabilirsiniz. Aşağıdaki örnek,
bounds
, componentRestrictions
ve types
seçeneklerini
belirtilen coğrafi bölgedekilere tercih ederek establishment
türü yerler iste
ve tahminleri yalnızca Amerika Birleşik Devletleri'ndeki yerlerle sınırlandırıyoruz.
fields
seçeneği, kullanıcının seçtiği yerle ilgili hangi bilgilerin döndürüleceğini belirtir.
Mevcut bir widget'ta bir seçeneğin değerini değiştirmek için setOptions()
komutunu çağırın.
TypeScript
const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input") as HTMLInputElement; const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options);
JavaScript
const center = { lat: 50.064192, lng: -130.605469 }; // Create a bounding box with sides ~10km away from the center point const defaultBounds = { north: center.lat + 0.1, south: center.lat - 0.1, east: center.lng + 0.1, west: center.lng - 0.1, }; const input = document.getElementById("pac-input"); const options = { bounds: defaultBounds, componentRestrictions: { country: "us" }, fields: ["address_components", "geometry", "icon", "name"], strictBounds: false, }; const autocomplete = new google.maps.places.Autocomplete(input, options);
Veri alanlarını belirtin
İhtiyacınız olmayan Yer Verileri SKU'ları için faturalandırılmamak üzere veri alanlarını belirtin. fields
özelliğini
Önceki örnekte gösterildiği gibi, widget oluşturucuya iletilen AutocompleteOptions
veya mevcut bir Autocomplete
nesnesinde setFields()
yöntemini çağırın.
autocomplete.setFields(["place_id", "geometry", "name"]);
Her bir ekip için sapmaları ve arama alanı sınırlarını Otomatik tamamlama
Otomatik tamamlama sonuçlarında yaklaşık değerlere öncelik verebilirsiniz. aşağıda belirtilen şekillerde değiştirebilirsiniz:
Autocomplete
nesnesinin oluşturulmasıyla ilgili sınırları belirleyin.- Mevcut bir
Autocomplete
ile ilgili sınırları değiştirin. - Haritanın görüntü alanı için sınırları belirleyin.
- Aramayı sınırlarla sınırlayın.
- Aramayı belirli bir ülkeyle sınırlandırın.
Yukarıdaki örnekte, oluşturma sırasında sınırları ayarlama gösterilmektedir. Aşağıdaki örneklerde diğer ağırlık verme teknikleri gösterilmektedir.
Mevcut bir otomatik tamamlamanın sınırlarını değiştirme
Mevcut bir fotoğraftaki arama alanını değiştirmek için setBounds()
numaralı telefonu arayın
Dikdörtgen sınırlara Autocomplete
.
TypeScript
const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);
JavaScript
const southwest = { lat: 5.6108, lng: 136.589326 }; const northeast = { lat: 61.179287, lng: 2.64325 }; const newBounds = new google.maps.LatLngBounds(southwest, northeast); autocomplete.setBounds(newBounds);
Haritanın görüntü alanı için sınırları belirleyin
Sonuçları haritanın görüntü alanına göre etkilemek için bindTo()
tuşunu kullanın
değişiklik yapabilirsiniz.
TypeScript
autocomplete.bindTo("bounds", map);
JavaScript
autocomplete.bindTo("bounds", map);
Otomatik tamamlama tahminlerinin haritanın görüntü alanından bağlantısını kaldırmak için unbind()
öğesini kullanın.
TypeScript
autocomplete.unbind("bounds"); autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });
JavaScript
autocomplete.unbind("bounds"); autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });
Aramayı geçerli sınırlarla kısıtla
Sonuçları, harita görünümüne veya dikdörtgen sınırlara dayalı olarak geçerli sınırlarla kısıtlamak için strictBounds
seçeneğini ayarlayın.
autocomplete.setOptions({ strictBounds: true });
Tahminleri belirli bir ülkeyle kısıtlama
componentRestrictions
seçeneğini kullanın veya setComponentRestrictions()
en fazla beş ülkeden oluşan belirli bir küme için otomatik tamamlama araması.
TypeScript
autocomplete.setComponentRestrictions({ country: ["us", "pr", "vi", "gu", "mp"], });
JavaScript
autocomplete.setComponentRestrictions({ country: ["us", "pr", "vi", "gu", "mp"], });
Yer türlerini sınırla
Kısıtlamak için types
seçeneğini kullanın veya setTypes()
çağrısı yapın
bazı yer türlerine ilişkin tahminlerde bulunuyor. Bu kısıtlama bir tür veya tür koleksiyonunu belirtir
Yer Türleri'nde belirtildiği şekilde seçin.
Herhangi bir kısıtlama belirtilmezse tüm türler döndürülür.
types
seçeneğinin değeri veya setTypes()
öğesine iletilen değer için
şunlardan birini belirtebilir:
Tablo 1'den en fazla beş değeri içeren bir dizi veya Tablo 2, Yer Türleri. Örneğin:
types: ['hospital', 'pharmacy', 'bakery', 'country']
veya:
autocomplete.setTypes(['hospital', 'pharmacy', 'bakery', 'country']);
- Tablo 3'teki herhangi bir filtre Yer Türleri arasından seçim yapın. Tablo 3'ten yalnızca tek bir değer belirtebilirsiniz.
İstek, şu durumlarda reddedilir:
- Beşten fazla tür belirtiyorsunuz.
- Tanınmayan türleri belirtin.
- Tablo 1'deki tüm türleri karıştırabilirsiniz. veya Tablo 2'deki gibi Tablo 3'ten filtreleyin.
Yerler Otomatik Tamamlama demosu, farklı yer türleri arasındaki tahminlerdeki farklılıkları gösterir.
Yer bilgileri alınıyor
Kullanıcı, otomatik tamamlamaya ekli tahminlerden bir yer seçtiğinde
metin alanına sahipse hizmet, bir place_changed
etkinliğini tetikler. Yer sağlamak için
ayrıntılar:
place_changed
etkinliği için bir etkinlik işleyici oluşturun veaddListener()
komutunu çağırınAutocomplete
nesnesini tıklayın.Autocomplete.getPlace()
numaralı telefonu arayınPlaceResult
almak içinAutocomplete
nesnesinde Böylece, seçtiğiniz nesne hakkında daha fazla bilgi edinmek için yer.
Varsayılan olarak, kullanıcı bir yer seçtiğinde, otomatik tamamlama işlevi
kullanılabilir veri alanlarını kapsar ve buna göre ücretlendirilirsiniz.
Autocomplete.setFields()
kullanın
döndürülecek yer verisi alanlarını belirtin. Şu konu hakkında daha fazla bilgi edinin:
PlaceResult
nesnesi,
talep edebilirsiniz. İhtiyacınız olmayan veriler için ödeme yapmamak istiyorsanız Autocomplete.setFields()
kullanarak
yalnızca kullanacağınız yer verilerini ekleyin.
name
özelliği,
Yerler Otomatik Tamamlama tahminlerinden description
. Web sitemiz g.co/newsinitiative/labs
üzerinden
description
Yerler
Otomatik tamamlama belgelerine bakın.
Adres formları için adresin yapılandırılmış biçimde alınması yararlıdır. Alıcı:
seçilen yerin yapılandırılmış adresini döndürün,
Autocomplete.setFields()
ve address_components
alanını belirtin.
Aşağıdaki örnekte bir adresteki alanları doldurmak için otomatik tamamlama kullanılmaktadır formunu doldurun.
TypeScript
function fillInAddress() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); let address1 = ""; let postcode = ""; // Get each component of the address from the place details, // and then fill-in the corresponding field on the form. // place.address_components are google.maps.GeocoderAddressComponent objects // which are documented at http://goo.gle/3l5i5Mr for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) { // @ts-ignore remove once typings fixed const componentType = component.types[0]; switch (componentType) { case "street_number": { address1 = `${component.long_name} ${address1}`; break; } case "route": { address1 += component.short_name; break; } case "postal_code": { postcode = `${component.long_name}${postcode}`; break; } case "postal_code_suffix": { postcode = `${postcode}-${component.long_name}`; break; } case "locality": (document.querySelector("#locality") as HTMLInputElement).value = component.long_name; break; case "administrative_area_level_1": { (document.querySelector("#state") as HTMLInputElement).value = component.short_name; break; } case "country": (document.querySelector("#country") as HTMLInputElement).value = component.long_name; break; } } address1Field.value = address1; postalField.value = postcode; // After filling the form with address components from the Autocomplete // prediction, set cursor focus on the second address line to encourage // entry of subpremise information such as apartment, unit, or floor number. address2Field.focus(); }
JavaScript
function fillInAddress() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); let address1 = ""; let postcode = ""; // Get each component of the address from the place details, // and then fill-in the corresponding field on the form. // place.address_components are google.maps.GeocoderAddressComponent objects // which are documented at http://goo.gle/3l5i5Mr for (const component of place.address_components) { // @ts-ignore remove once typings fixed const componentType = component.types[0]; switch (componentType) { case "street_number": { address1 = `${component.long_name} ${address1}`; break; } case "route": { address1 += component.short_name; break; } case "postal_code": { postcode = `${component.long_name}${postcode}`; break; } case "postal_code_suffix": { postcode = `${postcode}-${component.long_name}`; break; } case "locality": document.querySelector("#locality").value = component.long_name; break; case "administrative_area_level_1": { document.querySelector("#state").value = component.short_name; break; } case "country": document.querySelector("#country").value = component.long_name; break; } } address1Field.value = address1; postalField.value = postcode; // After filling the form with address components from the Autocomplete // prediction, set cursor focus on the second address line to encourage // entry of subpremise information such as apartment, unit, or floor number. address2Field.focus(); } window.initAutocomplete = initAutocomplete;
Yer tutucu metni özelleştirme
Varsayılan olarak, otomatik tamamlama hizmeti tarafından oluşturulan metin alanında
standart yer tutucu metni. Metni değiştirmek için
input
öğesindeki placeholder
özelliği:
<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">
Not: Varsayılan yer tutucu metni otomatik olarak yerelleştirilir. Şu durumda: kendi yer tutucu değerinizi belirtmeniz durumunda, bunun yerelleştirilmesini değeri olarak kabul edilir. Haritalar'ın Google Haritalar'daki Kullanılacak dili JavaScript API seçer. Lütfen şu konudaki dokümanları okuyun: yerelleştirme.
Widget görünümünü özelleştirmek için Otomatik tamamlama ve Arama Kutusu widget'larının stilini belirleme başlıklı makaleye bakın.
SearchBox widget'ı ekleme
SearchBox
, kullanıcıların metin tabanlı bir coğrafi konum gerçekleştirmesine olanak tanır.
"İstanbul'da pizza" gibi bir arama yapın veya "robson sokağı yakınındaki ayakkabı mağazaları" gibi aramalar yapabilirsiniz.
SearchBox
öğesini bir metin alanına ekleyebilir ve
metin girildiğinde hizmet,
açılır liste biçimindedir.
SearchBox
, tahminlerin daha kapsamlı bir listesini sunar.
yerler (Yerler API'si tarafından tanımlandığı şekliyle) ve önerilen aramayı içerebilir
şartlarını kabul edersiniz. Örneğin, kullanıcı 'yeni pizza' girerse seçim listesi
"İstanbul'da pizza" ifadesini eklemeli çeşitli adların
pizzacılar. Kullanıcı listeden bir yer seçtiğinde,
söz konusu yer hakkındaki bilgiler Arama Kutusu nesnesine döndürülür ve
uygulamanız tarafından alındı.
SearchBox
kurucusu iki bağımsız değişken alır:
text
türünde bir HTMLinput
öğesi. BuSearchBox
hizmetinin izleyeceği giriş alanını ekleyebilirsiniz.- Şunları içerebilecek bir
options
bağımsız değişkenibounds
özelliği:bounds
birgoogle.maps.LatLngBounds
yerlerin aranacağı alanı belirten bir nesnedir. Sonuçlar yer alan yerlere karşı eğilimli olur, ancak unutmayın.
Aşağıdaki kod, sonuçlarda sapmalar sağlamak için "bounds" parametresini kullanır belirli bir coğrafi bölgedeki yerlere göre, enlem/boylam koordinatları.
var defaultBounds = new google.maps.LatLngBounds( new google.maps.LatLng(-33.8902, 151.1759), new google.maps.LatLng(-33.8474, 151.2631)); var input = document.getElementById('searchTextField'); var searchBox = new google.maps.places.SearchBox(input, { bounds: defaultBounds });
Arama Kutusu için arama alanını değiştirme
Mevcut bir SearchBox
için arama alanını değiştirmek üzere şu numarayı arayın:
SearchBox
nesnesinde setBounds()
ve
alakalı LatLngBounds
nesnesi.
Yer bilgileri alınıyor
Kullanıcı aramaya ekli tahminlerden bir öğe seçtiğinde
kutusunda, hizmet bir places_changed
etkinliği tetikler. Şunları yapabilirsiniz:
SearchBox
nesnesinde getPlaces()
yöntemini çağırın
Her biri bir tahmin içeren ve her biri
PlaceResult
nesne.
PlaceResult
nesnesi hakkında daha fazla bilgi için
belgeleri,
yer ayrıntıları sonuçlarını inceleyin.
TypeScript
// Listen for the event fired when the user selects a prediction and retrieve // more details for that place. searchBox.addListener("places_changed", () => { const places = searchBox.getPlaces(); if (places.length == 0) { return; } // Clear out the old markers. markers.forEach((marker) => { marker.setMap(null); }); markers = []; // For each place, get the icon, name and location. const bounds = new google.maps.LatLngBounds(); places.forEach((place) => { if (!place.geometry || !place.geometry.location) { console.log("Returned place contains no geometry"); return; } const icon = { url: place.icon as string, size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(25, 25), }; // Create a marker for each place. markers.push( new google.maps.Marker({ map, icon, title: place.name, position: place.geometry.location, }) ); if (place.geometry.viewport) { // Only geocodes have viewport. bounds.union(place.geometry.viewport); } else { bounds.extend(place.geometry.location); } }); map.fitBounds(bounds); });
JavaScript
// Listen for the event fired when the user selects a prediction and retrieve // more details for that place. searchBox.addListener("places_changed", () => { const places = searchBox.getPlaces(); if (places.length == 0) { return; } // Clear out the old markers. markers.forEach((marker) => { marker.setMap(null); }); markers = []; // For each place, get the icon, name and location. const bounds = new google.maps.LatLngBounds(); places.forEach((place) => { if (!place.geometry || !place.geometry.location) { console.log("Returned place contains no geometry"); return; } const icon = { url: place.icon, size: new google.maps.Size(71, 71), origin: new google.maps.Point(0, 0), anchor: new google.maps.Point(17, 34), scaledSize: new google.maps.Size(25, 25), }; // Create a marker for each place. markers.push( new google.maps.Marker({ map, icon, title: place.name, position: place.geometry.location, }), ); if (place.geometry.viewport) { // Only geocodes have viewport. bounds.union(place.geometry.viewport); } else { bounds.extend(place.geometry.location); } }); map.fitBounds(bounds); });
Widget görünümünü özelleştirmek için Otomatik tamamlama ve Arama Kutusu widget'larının stilini belirleme başlıklı makaleye bakın.
Otomatik Yer Tamamlama Hizmeti tahminlerini programatik olarak alma
Tahminleri programatik olarak almak için
AutocompleteService
sınıfı. AutocompleteService
.
herhangi bir kullanıcı arayüzü denetimi eklemez. Bunun yerine bir tahmin dizisi döndürüyor
her biri tahmin metnini, referans bilgilerini ve bilgileri içeren
ve sonucun kullanıcı girişiyle
nasıl eşleştiğine dair ayrıntılar.
Bu özellik, kullanıcı arayüzü üzerinde
Autocomplete
ve SearchBox
tarafından sunulmaktadır
'ne başvurun.
AutocompleteService
aşağıdaki yöntemleri sunar:
getPlacePredictions()
sonuç tahminleri döndürüyor. Not: "Yer" bir kuruluş, coğrafi konum veya önemli bir yer olabilir eksiksiz bir şekilde sunmalıdır.getQueryPredictions()
, şunun genişletilmiş bir listesini döndürür: yerleri içerebilen tahminler (Places API tarafından tanımlandığı şekliyle) artı önerilen arama terimleri. Örneğin, kullanıcı yazarsa, seçim listesi şu ifadeyi içerebilir: "kebap in İstanbul" çeşitli pizzacıların isimlerini de görebilirsiniz.
Yukarıdaki yöntemlerin her ikisi de tahmin nesnelerinde bulunacaktır:
description
, eşleşen tahmindir.distance_meters
, yerin ile arasındaki mesafeyi metre cinsinden belirtir belirtilenAutocompletionRequest.origin
.matched_substrings
, kullanıcının girişindeki öğelerle eşleşen açıklama. Bu, özellikle ve uygulamanızda bu alt dizeleri vurgulayabilirsiniz. Birçok durumda, sorgusu, açıklama alanının alt dizesi olarak görünür.length
, alt dizenin uzunluğudur.offset
, karakter uzaklığıdır ve açıklama dizesinin başlangıcı, burada eşleşen alt dize görünür.
place_id
, benzersiz bir şekilde tanımlayan metinsel bir tanımlayıcıdır bir yer. Yer hakkında bilgi almak için bu tanımlayıcıyı birplaceId
alanı Yer Ayrıntıları isteyin. Şu işlemler hakkında daha fazla bilgi edinin: bir yere referans verin girin.terms
, sorgu öğelerini içeren bir dizidir. Örneğin, yer alırsa her öğe genellikle adresin bir bölümünü oluşturur.offset
, karakter uzaklığıdır ve açıklama dizesinin başlangıcı, burada eşleşen alt dize görünür.value
, eşleşen terim.
Aşağıdaki örnek, şu ifade için bir sorgu tahmin isteği yürütür: "yakınımda pizzacı" ve sonucu bir listede görüntüler.
TypeScript
// This example retrieves autocomplete predictions programmatically from the // autocomplete service, and displays them as an HTML list. // This example requires the Places library. Include the libraries=places // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> function initService(): void { const displaySuggestions = function ( predictions: google.maps.places.QueryAutocompletePrediction[] | null, status: google.maps.places.PlacesServiceStatus ) { if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) { alert(status); return; } predictions.forEach((prediction) => { const li = document.createElement("li"); li.appendChild(document.createTextNode(prediction.description)); (document.getElementById("results") as HTMLUListElement).appendChild(li); }); }; const service = new google.maps.places.AutocompleteService(); service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions); } declare global { interface Window { initService: () => void; } } window.initService = initService;
JavaScript
// This example retrieves autocomplete predictions programmatically from the // autocomplete service, and displays them as an HTML list. // This example requires the Places library. Include the libraries=places // parameter when you first load the API. For example: // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"> function initService() { const displaySuggestions = function (predictions, status) { if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) { alert(status); return; } predictions.forEach((prediction) => { const li = document.createElement("li"); li.appendChild(document.createTextNode(prediction.description)); document.getElementById("results").appendChild(li); }); }; const service = new google.maps.places.AutocompleteService(); service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions); } window.initService = initService;
CSS
HTML
<html> <head> <title>Retrieving Autocomplete Predictions</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <p>Query suggestions for 'pizza near Syd':</p> <ul id="results"></ul> <!-- Replace Powered By Google image src with self hosted image. https://developers.google.com/maps/documentation/places/web-service/policies#other_attribution_requirements --> <img class="powered-by-google" src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png" alt="Powered by Google" /> <!-- The `defer` attribute causes the script to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initService&libraries=places&v=weekly" defer ></script> </body> </html>
Örneği Deneyin
Oturum jetonları
AutocompleteService.getPlacePredictions()
Faturalandırma için otomatik tamamlama isteklerini birlikte gruplandırmak üzere oturum jetonlarını (uygulandıysa) kullanabilir
amaçlar. Oturum jetonları, bir kullanıcının sorgu ve seçim aşamalarını gruplandırır
faturalandırma amacıyla ayrı bir oturuma otomatik olarak tamamlama özelliği sunar. Oturum
kullanıcı sorgu yazmaya başladığında başlar ve bir sorgu seçtiğinde sona erer
yer. Her oturumda birden fazla sorgu bulunabilir ve ardından tek bir yer seçimi yapılabilir.
Oturum sona erdiğinde jeton artık geçerli olmaz. Uygulamanız
yeni bir jeton oluşturabilirsiniz. Şunun için oturum jetonlarının kullanılmasını öneririz:
tüm otomatik tamamlama oturumlarını
kullanabilirsiniz. sessionToken
parametresi
atlanırsa veya bir oturum jetonunu yeniden kullanırsanız oturum,
oturum jetonu sağlandı (her istek ayrı olarak faturalandırılır).
Aynı oturum jetonunu kullanarak tek bir
Yer Ayrıntıları
AutocompleteService.getPlacePredictions()
numaralı telefona yapılan aramadan kaynaklanan yerle ilgili istek.
Bu durumda, otomatik tamamlama isteği Yer Ayrıntıları ile birleştirilir
isteği yer alır ve arama, normal Yer Ayrıntısı isteği olarak ücretlendirilir. Ücretsiz
Otomatik tamamlama isteği.
Her yeni oturum için benzersiz bir oturum jetonu ilettiğinizden emin olun. Aynı jetonu şundan daha fazla süre için kullanmak: bir Otomatik Tamamlama oturumu, bu Otomatik Tamamlama oturumlarını geçersiz kılar ve tüm Otomatik Tamamlama isteği geçersiz oturumlarda Otomatik Tamamlama özelliği kullanılarak tek tek ücretlendirilecektir. İstek Başına SKU'su. Oturum jetonları hakkında daha fazla bilgi edinin.
Aşağıdaki örnekte bir oturum jetonu oluşturma ve daha sonra bunu
AutocompleteService
(displaySuggestions()
fonksiyonunun kısaltılması için atılmıştır):
// Create a new session token. var sessionToken = new google.maps.places.AutocompleteSessionToken(); // Pass the token to the autocomplete service. var autocompleteService = new google.maps.places.AutocompleteService(); autocompleteService.getPlacePredictions({ input: 'pizza near Syd', sessionToken: sessionToken }, displaySuggestions);
Her yeni oturum için benzersiz bir oturum jetonu ilettiğinizden emin olun. Aynı birden fazla oturum için jeton her bir isteğin faturalandırılmasına neden olur ayrı ayrı düzenleyebilirsiniz.
Oturum jetonları hakkında daha fazla bilgi edinin.
Otomatik tamamlama ve Arama Kutusu widget'larının stilini belirleme
Varsayılan olarak, Autocomplete
ve
SearchBox
bir Google haritasına dahil edilmek üzere stilize edildi. İstebilirsiniz
kullanarak stili sitenize
uygun şekilde ayarlayabilirsiniz. Aşağıdaki CSS sınıfları
kullanılabilir. Aşağıda listelenen tüm sınıflar hem
Autocomplete
ve SearchBox
widget'ları.
![Otomatik tamamlama ve otomatik tamamlama için CSS sınıflarının
Arama Kutusu widget'ları](https://developers.google.cn/static/maps/documentation/javascript/images/place-autocomplete-css-diagram.png?authuser=9&hl=tr)
CSS sınıfı | Açıklama |
---|---|
pac-container |
Veri öğesi tarafından döndürülen tahminlerin listesini içeren görsel öğe
Otomatik Yer Tamamlama hizmeti. Bu liste,
Autocomplete veya SearchBox widget'ı. |
pac-icon |
Listedeki her bir öğenin solunda görüntülenen simge tahminler. |
pac-item |
Autocomplete veya SearchBox widget'ı. |
pac-item:hover |
Kullanıcı, fare imlecini üzerine getirdiğinde bulunan öğe. |
pac-item-selected |
Kullanıcı klavyeyi kullanarak seçtiği öğe. Not: Seçili öğeler
bu sınıfın ve pac-item sınıfının üyesi olacak.
|
pac-item-query |
Çalışmanın ana parçası olan bir pac-item içindeki
bir tahmindir. Coğrafi konumlar için bu,
"Sidney" veya sokak adı ve numarası, örneğin "10 King Street". Örneğin,
"İstanbul'da pizza" gibi metin tabanlı aramalar, aramanın tam metnini
anlamına gelir. pac-item-query , varsayılan olarak renklidir.
siyah. pac-item içinde başka metin varsa
pac-item-query dışından ve stilini şuradan devralır:
pac-item Varsayılan olarak gri renklidir. Ek metin
genellikle bir adrestir. |
pac-matched |
Döndürülen tahminin, kullanıcının girişiyle eşleşen bölümü. Ölçüt
varsayılan olarak, bu eşleşen metin kalın metinle vurgulanır. Lütfen
eşleşen metin pac-item içinde herhangi bir yerde olabilir. değil
mutlaka pac-item-query kapsamındadır ve kısmen
pac-item-query içinde ve kalan metnin içinde
pac-item içinde. |
Yer Seçici bileşenini kullanma
Not: Bu örnekte açık kaynak bir kitaplık kullanılmaktadır. Bkz. Destek için README geri bildirim almaktır.
Web bileşenlerini deneyin. Son kullanıcıların otomatik tamamlama özelliğini kullanarak belirli bir adresi veya yeri aramasına olanak tanıyan metin girişini etkinleştirmek için Yer Seçici web bileşeni.
![Arama kutusu içeren GIF. Kullanıcı, giriş olarak bir adres yazmaya başlar ve alakalı
görünür. Kullanıcı açılır menüden bir adresi tıklar ve arama kutusu dolar
ekleyin.](https://developers.google.cn/static/maps/documentation/javascript/images/place-picker.gif?authuser=9&hl=tr)
Yer Otomatik Tamamlama optimizasyonu
Bu bölümde Google Ads'den en iyi şekilde yararlanmanıza yardımcı olacak en iyi uygulamalar Otomatik Yer Tamamlama hizmeti.
Bazı genel kurallar şunlardır:
- Çalışan bir kullanıcı arayüzü geliştirmenin en hızlı yolu Maps JavaScript API Otomatik tamamlama widget'ı, Android için Yerler SDK'sı Otomatik tamamlama widget'ı, veya Yerler SDK'sı Otomatik tamamlama kullanıcı arayüzü kontrolü
- Temel Yer Otomatik Tamamlama özelliği hakkında bilgi sahibi olun veri alanlarını en baştan iki kez kontrol edin.
- Konuma ağırlık verme ve konum kısıtlama alanları isteğe bağlıdır, ancak otomatik tamamlama performansı üzerinde önemli bir etkisi vardır.
- Uygulamanızın sorunsuz şekilde düşmesini sağlamak için hata işlemeyi kullanın bir hata döndürür.
- Uygulamanızın seçim yapılmadığı durumlarda bunu yaptığından ve kullanıcılara seçeneğini tıklayın.
Maliyet optimizasyonuyla ilgili en iyi uygulamalar
Temel maliyet optimizasyonu
Otomatik Yer Tamamlama özelliğini kullanmanın maliyetini optimize etmek için hizmeti kullanmak için, Yer Ayrıntıları ve Yer Otomatik Tamamlama widget'larındaki alan maskelerini kullanarak yalnızca yer veri alanlarını kullanın.
Gelişmiş maliyet optimizasyonu
İstek Başına fiyatlandırma özelliğine erişmek ve seçilen yer hakkında Yer Ayrıntıları yerine Coğrafi Kodlama API'si sonuçlarını istemek için Otomatik Yer Tamamlama özelliğinin programatik olarak uygulanmasını göz önünde bulundurun. Aşağıdaki koşulların her ikisi de karşılanırsa İstek Başına Fiyatlandırma, Geocoding API ile eşleştirilen Oturum Başına (oturuma dayalı) fiyatlandırmadan daha uygun maliyetlidir:
- Yalnızca kullanıcının seçtiği yerin enlem/boylam veya adresine ihtiyaç duyarsanız Coğrafi Kodlama API'si bu bilgileri Yer Ayrıntısı çağrısından daha düşük bir ücret karşılığında sunar.
- Kullanıcılar ortalama dört veya daha az Otomatik Tamamlama tahmin isteği içinde bir otomatik tamamlama tahmini seçerse, İstek Başına fiyatlandırma, Oturum Başına fiyatlandırmadan daha uygun maliyetli olabilir.
Uygulamanız, seçilen tahminin adresi ve enlem/boylam dışında herhangi bir bilgi gerektiriyor mu?
Evet, daha fazla ayrıntı gerekiyor
Yer Ayrıntıları ile oturuma dayalı Otomatik Yer Tamamlama özelliğini kullanın.
.
Uygulamanız; yer adı, işletme durumu veya çalışma saatleri gibi Yer Ayrıntıları gerektirdiğinden, Otomatik Yer Tamamlama uygulamanız programatik olarak veya JavaScript, Android ya da iOS widget'larında yerleşik olarak bulunan bir oturum jetonu kullanmalıdır.Bu kullanım için toplamda 0,017 ABD doları tutarında oturum başına maliyet ve geçerli Yer Verileri SKU'ları kullanılır.
Widget uygulaması
Oturum yönetimi otomatik olarak JavaScript, Android veya iOS widget'larına eklenir. Buna hem otomatik Yer Tamamlama istekleri hem de seçilen tahmindeki Yer Ayrıntısı isteği dahildir. Yalnızca şu istekte bulunduğunuzdan emin olmak için fields
parametresini belirttiğinizden emin olun:
yer verisi alanlarını girin.
Programatik uygulama
Otomatik Yer Tamamlama isteklerinizde bir oturum jetonu kullanın. Seçilen tahmin hakkında Yer Ayrıntıları isterken aşağıdaki parametreleri ekleyin:
- Otomatik Yer Tamamlama yanıtındaki yer kimliği
- Otomatik Yer Tamamlama isteğinde kullanılan oturum jetonu
fields
parametresi, İhtiyacınız olan yer verisi alanlarını
Hayır, yalnızca adres ve konum gerekiyor
Otomatik Yer Tamamlama kullanımınızın performansına bağlı olarak Coğrafi Kodlama API'sı, uygulamanız için Yer Ayrıntıları'ndan daha uygun maliyetli bir seçenek olabilir. Her uygulamanın Otomatik Tamamlama verimliliği, hangi kullanıcıların giriş yaptığına, uygulamanın nerede kullanıldığına ve performans optimizasyonuyla ilgili en iyi uygulamaların uygulanıp uygulanmadığına bağlı olarak değişiklik gösterir.
Aşağıdaki soruyu yanıtlamak için, bir kullanıcının uygulamanızda Yer Otomatik Tamamlama tahmini seçmeden önce ortalama kaç karakter yazdığını analiz edin.
Kullanıcılarınız ortalama olarak dört veya daha az istekte Yer Otomatik Tamamlama tahminini seçiyor mu?
Evet
Otomatik Yer Tamamlama özelliğini oturum jetonları olmadan programatik olarak uygulayın ve seçilen yer tahmininde Coğrafi Kodlama API'sini çağırın.
.
Geocoding API, adresleri ve enlem/boylam koordinatlarını istek başına 0,005 ABD doları karşılığında sunar. Dört adet Otomatik Otomatik Tamamlama - İstek Başına isteği göndermenin maliyeti 0,01132 ABD dolarıdır. Bu nedenle, seçilen yer tahminiyle ilgili dört isteğin toplam maliyeti ve Coğrafi Kodlama API'si çağrısı 0,01632 ABD doları olur. Bu da oturum başına 0,017 ABD doları olan Oturum Başına Otomatik Tamamlama fiyatından daha düşüktür.1
Kullanıcılarınızın aradıkları tahmini daha az karakterle bulmalarına yardımcı olmak için performans en iyi uygulamalarından yararlanmayı düşünebilirsiniz.
Hayır
Yer Ayrıntıları ile oturuma dayalı Otomatik Yer Tamamlama özelliğini kullanın.
.
Bir kullanıcı Otomatik Yer Tamamlama tahminini seçmeden önce gerçekleştirmeyi beklediğiniz ortalama istek sayısı Oturum Başına fiyatlandırmayı aştığından, Otomatik Yer Tamamlama özelliğini uygulamanız hem Otomatik Yer Tamamlama istekleri hem de ilişkili Yer Ayrıntısı isteği için bir oturum jetonu kullanarak toplam oturum başına 0,017 ABD doları tutarında maliyet içermelidir.1
Widget uygulaması
Oturum yönetimi otomatik olarak JavaScript, Android veya iOS widget'larına eklenir. Buna hem otomatik Yer Tamamlama istekleri hem de seçilen tahmindeki Yer Ayrıntısı isteği dahildir. Yalnızca Temel Veriler alanlarını istediğinizden emin olmak için fields
parametresini belirttiğinizden emin olun.
Programatik uygulama
Otomatik Yer Tamamlama isteklerinizde bir oturum jetonu kullanın. Seçilen tahmin hakkında Yer Ayrıntıları isterken aşağıdaki parametreleri ekleyin:
- Otomatik Yer Tamamlama yanıtındaki yer kimliği
- Otomatik Yer Tamamlama isteğinde kullanılan oturum jetonu
- Adres ve geometri gibi Temel Veri alanlarını belirten
fields
parametresi
Yer Otomatik Tamamlama isteklerini ertelemeyi düşünün
Otomatik Yer Tamamlama isteğini, kullanıcı ilk üç veya dört karakteri yazana kadar ertelemek gibi stratejiler kullanarak uygulamanızın daha az istek göndermesini sağlayabilirsiniz. Örneğin, kullanıcı üçüncü karakteri yazdıktan sonra her karakter için Otomatik Tamamlama isteklerinde bulunmak, kullanıcı yedi karakteri yazdıktan sonra bir Coğrafi Kodlama API'si isteği gönderdiğiniz bir tahmin seçerse toplam maliyetin 0,01632 ABD doları (4 * 0,00283 ABD doları Otomatik Tamamlama + 0,005 ABD doları Coğrafi Kodlama) olacağı anlamına gelir.1
İstekleri ertelemek ortalama programatik isteğinizin dörtün altına düşmesine neden oluyorsa Geocoding API ile otomatik yer tamamlama performansı uygulama yönergelerinden yararlanabilirsiniz. İsteklerin geciktirilmesinin, her yeni tuş vuruşunda tahmin görmeyi bekleyen kullanıcılar tarafından gecikme olarak algılanabileceğini unutmayın.
Kullanıcılarınızın aradıkları tahmini daha kısa sürede elde etmelerine yardımcı olmak için performansla ilgili en iyi uygulamalardan yararlanabilirsiniz.
-
Burada listelenen maliyetler ABD doları cinsindendir. Tam fiyatlandırma bilgileri için lütfen Google Haritalar Platformu Faturalandırma sayfasına bakın.
Performansla ilgili en iyi uygulamalar
Aşağıdaki yönergelerde Otomatik Yer Tamamlama performansının optimize edilmesi için izlenecek yöntemler açıklanmaktadır:
- Ülke kısıtlamaları ekleyin, konuma ağırlık verme, Otomatik Yer Tamamlama ayarınıza (programatik uygulamalar için) dil tercihinizi ekleyin hakkında bilgi edindiniz. Dil tercihi yapmanız gerekmez Dil tercihlerini kullanıcının tarayıcısından veya mobil cihazından seçtikleri için, widget'larla
- Otomatik Yer Tamamlama'ya bir harita eşlik ediyorsa, konumu harita görünümüne göre değiştirebilirsiniz.
- Kullanıcının Otomatik Tamamlama tahminlerinden birini seçmediği durumlarda, genellikle
Bu tahminlerin hiçbiri istenen sonuç adresi olmadığından, orijinal
daha alakalı sonuçlar almaya çalışmak için kullanıcı girdisi:
- Kullanıcının yalnızca adres bilgilerini girmesini bekliyorsanız orijinal kullanıcı girişini yeniden kullanın Geocoding API'ye yapılan bir çağrıda.
- Kullanıcının ada veya adrese göre belirli bir yer hakkında sorgu girmesini bekliyorsanız Yer Bulma isteği kullanın. Yalnızca belirli bir bölgede sonuç bekleniyorsa konuma ağırlık verme.
- Otomatik Yer Tamamlama desteğinin sunulduğu ülkelerdeki alt şirket içi adresleri giren kullanıcılar alt şirket adresleri eksik, ör. Çekya, Estonya ve Litvanya. Örneğin, Çekçe adres "Stroupežnického 3191/17, Praha" Place konumunda kısmi bir tahmin verir Otomatik tamamlama.
- "23-30 29th St, Queens" gibi yol ön ekleriyle adresler giren kullanıcılar inç New York City veya "47-380 Kamehameha Hwy, Kaneohe" bir şehir manzarası var.
Kullanım sınırları ve politikalar
Kotalar
Kota ve fiyatlandırma bilgileri için bkz. Places API için Kullanım ve Faturalandırma belgeleri.
Politikalar
Yerler Kitaplığı'nın kullanımı için Maps JavaScript API, tanımlanan politikalar hakkında daha fazla bilgi edinin.