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.

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

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.

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. Google Haritalar Platformu'nun Genişletilmiş Bileşen Kitaplığı'nın bir parçasıdır. Google Haritalar Platformu, geliştiricilerin daha iyi haritaları ve konum özelliklerini daha hızlı oluşturmasına yardımcı olan bir web bileşenleri kümesidir.

Yere Genel Bakış yapılandırıcısı

Yapılandırıcıyı kullanarak özel bir Yere Genel Bakış bileşeni oluşturun ve bir web sayfasına ekleyebileceğiniz kod oluşturun.

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.