Alanları getir
Mevcut bir Place
nesneniz veya yer kimliğiniz varsa bu yerle ilgili ayrıntıları almak için Place.fetchFields
yöntemini kullanın. Döndürülecek yer verisi alanlarının virgülle ayrılmış listesini sağlayın; alan adlarını büyük/küçük harf şeklinde belirtin. İstenen alanlar için verileri almak üzere döndürülen Place
nesnesini kullanın.
Aşağıdaki örnekte yeni bir Place
oluşturmak için yer kimliği kullanılmaktadır; displayName
ve formattedAddress
alanlarını isterken Place.fetchFields
öğesini çağırır, haritaya bir işaretçi ekler ve konsola bazı veriler kaydeder.
TypeScript
async function getPlaceDetails(Place) { const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // Use place ID to create a new Place instance. const place = new Place({ id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg', requestedLanguage: 'en', // optional }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] }); // Log the result console.log(place.displayName); console.log(place.formattedAddress); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); }
JavaScript
async function getPlaceDetails(Place) { const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // Use place ID to create a new Place instance. const place = new Place({ id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg", requestedLanguage: "en", // optional }); // Call fetchFields, passing the desired data fields. await place.fetchFields({ fields: ["displayName", "formattedAddress", "location"], }); // Log the result console.log(place.displayName); console.log(place.formattedAddress); // Add an Advanced Marker const marker = new AdvancedMarkerElement({ map, position: place.location, title: place.displayName, }); }
Yere Genel Bakış bileşenini kullanma
Not: Bu örnekte açık kaynak bir kitaplık kullanılmaktadır. Kitaplıkla ilgili destek ve geri bildirim için BENİOKU sayfasını inceleyin.
Yere Genel Bakış bileşeni, 5 boyut ve biçimde önceden hazırlanmış bir kullanıcı arayüzünde milyonlarca işletme hakkında ayrıntılı bilgiler (ör. çalışma saatleri, yıldız yorumları ve fotoğraflar, yol tarifleri ve diğer işlemler) görüntüler. Geliştiricilerin daha iyi haritaları ve konum özelliklerini daha hızlı oluşturmasına yardımcı olan bir dizi web bileşeni olan Google Haritalar Platformu'nun Genişletilmiş Bileşen Kitaplığı'nın bir parçasıdır.
Yere Genel Bakış yapılandırıcısı
Yapılandırıcıyı kullanarak özel bir Yere Genel Bakış bileşeni için yerleştirilebilir kod oluşturun, ardından React ve Angular gibi popüler çerçevelerle kullanmak veya hiç çerçeve olmadan kullanmak üzere dışa aktarın.
Başlayın
Başlamak için Genişletilmiş Bileşen kitaplığını npm ile yükleyin.
En iyi performans için bir paket yöneticisi kullanın ve yalnızca ihtiyacınız olan bileşenleri içe aktarın. Bu paket, npm'de @googlemaps/extended-component-library olarak listelenir. Uygulamayı şununla yükleyin:
npm i @googlemaps/extended-component-library;
Ardından uygulamanızda kullandığınız bileşenleri içe aktarın.
import '@googlemaps/extended-component-library/place_overview.js';
npm kitaplığını yükledikten sonra Cloud Console'dan bir API anahtarı alın.
<gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placeoverview_v1"></gmpx-api-loader>
Yere Genel Bakış bileşen etiketini istediğiniz bir Yer Kimliği ile kullanın. Bu, Auckland'daki bir Google ofisi için yer tutucudur.
<gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw"></gmpx-place-overview>
Yere Genel Bakış bileşeninin beş boyut varyasyonu vardır. Varsayılan bileşen, x-large
boyut varyasyonunu kullanır. Diğer beden varyasyonlarını almak için size
özelliğini ekleyin ve değiştirin.
<!-- Try setting the size attribute to "x-small", "small", "medium", "large", or "x-large" --> <gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw" size="small"></gmpx-place-overview>
Daha fazla bilgi için GitHub veya npm'ye göz atın. Örnek kodda kullanılan bileşenleri görmek için GitHub'daki örnekler sayfasına göz atın.