Yer Ayrıntıları

Alanları getir

Mevcut bir Place nesneniz veya yer kimliğiniz varsa Place.fetchFields kullanın yöntemini de kullanabilirsiniz. döndürülecek veri alanlarını yerleştir; alan adlarını büyük/küçük harf şeklinde belirtin. Şunun için verileri almak için döndürülen Place nesnesini kullanın: zorunlu alanlardır.

Aşağıdaki örnekte Place.fetchFields çağrısı yapan yeni bir Place oluşturmak için yer kimliği kullanılmaktadır. displayName ve formattedAddress alanlarını istediğinde bir işaretçi ekler haritaya 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 bir kitaplık kullanılmaktadır. Bkz. Destek için README geri bildirim almaktır.

Yere Genel Bakış bileşeni, milyonlarca işletme hakkında ayrıntılı bilgiler görüntüler. çalışma saatleri, yıldızlı yorumlar, fotoğraflar, yol tarifleri ve diğer işlemleri 5 boyut ve biçimde hazır bir kullanıcı arayüzünde sunar. Genişletilmiş Bileşen Kitaplığı'nın bir parçasıdır. geliştiricilerin daha iyi haritalar geliştirmelerine yardımcı olan bir dizi web bileşeni ve konum özelliklerini daha hızlı hale getirir.

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 kullanılmasını veya hiç çerçeve olmadan kullanılmasını sağlayabilir.

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 olarak listeleniyor @googlemaps/extended-component-library. 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.

  <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 bir x-large boyutu kullanır daha fazla bilgi edineceksiniz. 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. Örnek kodda kullanılan bileşenleri görmek için şuna göz atın: examples sayfasını ziyaret edin.