Güvenlik uyarısı: Belirli üçüncü taraf kitaplıkları (polyfill.io dahil) kullanan web sitelerini etkileyebilecek bir güvenlik sorununun olduğunu tespit ettik. Bu sorun bazen, web sitesi sahibinin bilgisi veya izni olmadan ziyaretçileri istenen web sitesinden başka yere yönlendirebilir. JavaScript örneklerimizin çoğu önceden bir polyfill.io komut dosyası beyanı içeriyordu. Bunu örneklerimizden kaldırdık. Bu bildirimi içeren JavaScript örneklerimizi kullandıysanız beyanı kaldırmanızı öneririz.
Bu sayfada,
Maps JavaScript API'yi kullanıyor. Proje yöneticisi olarak
Sunucunuzdaki Places API web hizmeti
Google Haritalar Hizmetleri için Node.js İstemcisi. Sayfa:
Java İstemcisi'ni de tanıtıyor.
Google Haritalar Hizmetleri için Python İstemcisi ve Go İstemcisi.
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 bir testtir.
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:
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 fazla
Autocomplete 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çin Autocomplete. Projede
aramayı belirli bir LatLngBounds 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.
ziyaret edin.
Şekil 3: Arama kutusu, arama terimlerini ve yer tahminlerini sunar. ziyaret edin.
Ayrıntıları aşağıda bulabilirsiniz.
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 veya getQueryPredictions() 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 HTML input öğ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ği PlaceResult için Place 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çin PlaceResult 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 bir google.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 bir boolean
API'nin yalnızca kesin olarak tanımlanan bölgenin içinde olan yerleri döndürüp döndürmeyeceğini belirtmek
belirtilen bounds 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 anda componentRestrictions 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çin Autocomplete widget'ı. Arama yapılıyor
Autocomplete nesnesinde getPlace(),
PlaceResult kullanılabilir hale gelende yalnızca place id bulunur,
types ve name ö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.
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);
İ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.
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ı.
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:
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 ve addListener() komutunu çağırın
Autocomplete nesnesini tıklayın.
Autocomplete.getPlace() numaralı telefonu arayın
PlaceResult almak için Autocomplete 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.
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();
}
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;
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.
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 HTML input öğesi. Bu
SearchBox hizmetinin izleyeceği giriş alanını
ekleyebilirsiniz.
Şunları içerebilecek bir options bağımsız değişkeni
bounds özelliği:
bounds bir google.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.
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.
// 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);
});
// 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);
});
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.
distance_meters, yerin ile arasındaki mesafeyi metre cinsinden belirtir
belirtilen AutocompletionRequest.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ı
bir placeId 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;
// 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;
<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>
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.
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.
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 SearchBox widget'ları için CSS sınıfları
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.
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.
ziyaret edin.
İhtiyaçlarınıza uyan Otomatik Yer Tamamlama uygulamasını seçme konusunda yardım için aşağıdaki soruya vereceğiniz yanıta karşılık gelen sekmeyi seçin.
Uygulamanız, seçilen tahminin adresi ve enlem/boylam dışında herhangi bir bilgi gerektiriyor mu?
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.
ziyaret edin.
Coğrafi Kodlama API'sini kullanmanın en iyi seçenek olacağı diğer senaryolar şunlardır:
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.
[[["Anlaması kolay","easyToUnderstand","thumb-up"],["Sorunumu çözdü","solvedMyProblem","thumb-up"],["Diğer","otherUp","thumb-up"]],[["İhtiyacım olan bilgiler yok","missingTheInformationINeed","thumb-down"],["Çok karmaşık / çok fazla adım var","tooComplicatedTooManySteps","thumb-down"],["Güncel değil","outOfDate","thumb-down"],["Çeviri sorunu","translationIssue","thumb-down"],["Örnek veya kod sorunu","samplesCodeIssue","thumb-down"],["Diğer","otherDown","thumb-down"]],["Son güncelleme tarihi: 2024-09-06 UTC."],[],[]]
