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ış 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.

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 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.