Yer Ayrıntıları

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ış bir listesini sağlayın; alan adlarını büyük/küçük harf olacak şekilde belirtin. İstenen alanlarla ilgili verileri almak için döndürülen Place nesnesini kullanın.

Aşağıdaki örnekte yeni bir Place oluşturmak için bir yer kimliği kullanılmıştır, Place.fetchFields displayName ve formattedAddress alanlarını ister, haritaya bir işaretçi ekler ve bazı verileri konsola 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,
    });
}
index.ts

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,
  });
}

index.js

Yere Genel Bakış bileşenini kullanma

Not: Bu örnekte açık kaynak kitaplık kullanılmaktadır. Kitaplıkla ilgili destek ve geri bildirim için BENİOKU sayfasına göz atın.

Web bileşenlerini kullanarak yer ayrıntılarını yalnızca birkaç satır kodla görüntüleyin.

Yere Genel Bakış bileşeninin kullanıcı tarafından girilen boyut alanına göre gösterilen x-küçük, küçük, orta, büyük ve x-büyük boyutlu varyasyonlarını gösteren resim.
Şekil 1: Beş farklı beden varyasyonuyla yer ayrıntılarına ilişkin bilgiler

Web bileşenleri nedir?

Web bileşenleri, web uygulamanızın HTML'sinin herhangi bir yerinde kullanılabilen özel, yeniden kullanılabilir, kapsüllenmiş HTML etiketleri oluşturmanıza olanak tanır. Bu bileşenler tüm modern tarayıcılarda desteklenir ve kullanıcı arayüzü ile işlevleri kapsamak için çerçeveden bağımsız bir mekanizma sunar.

Yere Genel Bakış bileşeni nedir?

Yere Genel Bakış bileşeni, milyonlarca işletme hakkında ayrıntılı bilgilerin (çalışma saatleri, yıldızlı yorumlar ve fotoğrafların yanı sıra yol tarifleri ve diğer işlemler dahil) önceden hazırlanmış bir kullanıcı arayüzünde 5 boyut ve biçimde görüntüler.

Genişletilmiş Bileşen Kitaplığı nedir?

Google Haritalar Platformu'nun Genişletilmiş Bileşen Kitaplığı, geliştiricilerin daha hızlı bir şekilde ve daha az çabayla daha iyi haritalar ve konum özellikleri oluşturmasına yardımcı olan bir web bileşenleri grubudur. Standart kodu, en iyi uygulamaları ve duyarlı tasarımı kapsayarak karmaşık harita arayüzlerini tek bir HTML öğesine dönüştürür. Sonuç olarak bu bileşenler, haritaları ve konumla ilgili kodları okumayı, öğrenmeyi, özelleştirmeyi ve bakımını yapmayı kolaylaştırır.

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. Ş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 adres, Auckland'daki bir Google ofisinin yer tutucusudur.

  <gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw"></gmpx-place-overview>

Yere Genel Bakış bileşeninin beş boyut varyasyonu vardır. Varsayılan bileşen, bir x-large boyut varyasyonu kullanır. Diğer beden varyantları 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 adresine göz atın. Örnek kodda kullanılan bileşenleri görmek için GitHub'daki örnekler sayfasına göz atın.