Places UI Kit : یک کتابخانه آماده برای استفاده که فضایی را برای سفارشی‌سازی و توسعه کم کد فراهم می‌کند. آن را امتحان کنید و نظرات خود را در مورد تجربه کیت UI خود به اشتراک بگذارید.

این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

عکس های مکان

توسعه‌دهندگان منطقه اقتصادی اروپا (EEA)

عکس‌های مکان به شما امکان می‌دهد محتوای تصویری با کیفیت بالا را به صفحات وب خود اضافه کنید. به میلیون‌ها عکس ذخیره شده در پایگاه داده مکان‌ها دسترسی پیدا کنید و با استفاده از «یافتن مکان»، «جستجوی نزدیک»، «جستجوی متن»، «تکمیل خودکار» و «جزئیات مکان»، تصاویر قابل تغییر اندازه دریافت کنید.

کد منبع کامل مثال را ببینید

این چرخ فلک عکس ابتدایی، عکس‌های مربوط به مکان مشخص‌شده، از جمله مشخصات نویسنده مورد نیاز (که در گوشه سمت چپ بالای عکس نشان داده شده است) را نمایش می‌دهد.

تایپ اسکریپت

async function init() {
    const { Place } = await google.maps.importLibrary('places') as google.maps.PlacesLibrary;

    // Use a place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
    });

    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({ fields: ['displayName', 'photos', 'editorialSummary'] });

    // Get the various HTML elements.
    let heading = document.getElementById('heading') as HTMLElement;
    let summary = document.getElementById('summary') as HTMLElement;
    let gallery = document.getElementById('gallery') as HTMLElement;
    let expandedImageDiv = document.getElementById('expanded-image') as HTMLElement;
    let attributionLabel;

    // Show the display name and summary for the place.
    heading.textContent = place.displayName as string;
    summary.textContent = place.editorialSummary as string;

    // Add photos to the gallery.
    if (place.photos) {
        place.photos?.forEach((photo) => {
            const img = document.createElement('img');
            const expandedImage = document.createElement('img');
            img.src = photo.getURI({maxHeight: 380});
            img.addEventListener('click', (event) => {
                event.preventDefault();
                expandedImage.src = img.src;
                expandedImageDiv.innerHTML = '';
                expandedImageDiv.appendChild(expandedImage);
                attributionLabel = createAttribution(photo.authorAttributions);
                expandedImageDiv.appendChild(attributionLabel);
            });

            gallery.appendChild(img);
        });
    }

    // Display the first photo.
    const img = document.createElement('img');
    img.src = place.photos![0].getURI();
    expandedImageDiv.appendChild(img);
    attributionLabel = createAttribution(place.photos![0].authorAttributions);
    expandedImageDiv.appendChild(attributionLabel);

    // Helper function to create attribution DIV.
    function createAttribution(attribution) {
        attributionLabel = document.createElement("a");
        attributionLabel.classList.add('attribution-label');
        attributionLabel.textContent = attribution[0].displayName;
        attributionLabel.href = attribution[0].uri;
        attributionLabel.target = '_blank;'
        return attributionLabel;
    }
}

init();index.ts

جاوا اسکریپت

async function init() {
  const { Place } = await google.maps.importLibrary("places");
  // Use a place ID to create a new Place instance.
  const place = new Place({
    id: "ChIJydSuSkkUkFQRsqhB-cEtYnw", // Woodland Park Zoo, Seattle WA
  });

  // Call fetchFields, passing the desired data fields.
  await place.fetchFields({
    fields: ["displayName", "photos", "editorialSummary"],
  });

  // Get the various HTML elements.
  let heading = document.getElementById("heading");
  let summary = document.getElementById("summary");
  let gallery = document.getElementById("gallery");
  let expandedImageDiv = document.getElementById("expanded-image");
  let attributionLabel;

  // Show the display name and summary for the place.
  heading.textContent = place.displayName;
  summary.textContent = place.editorialSummary;
  // Add photos to the gallery.
  if (place.photos) {
    place.photos?.forEach((photo) => {
      const img = document.createElement("img");
      const expandedImage = document.createElement("img");

      img.src = photo.getURI({ maxHeight: 380 });
      img.addEventListener("click", (event) => {
        event.preventDefault();
        expandedImage.src = img.src;
        expandedImageDiv.innerHTML = "";
        expandedImageDiv.appendChild(expandedImage);
        attributionLabel = createAttribution(photo.authorAttributions);
        expandedImageDiv.appendChild(attributionLabel);
      });
      gallery.appendChild(img);
    });
  }

  // Display the first photo.
  const img = document.createElement("img");

  img.src = place.photos[0].getURI();
  expandedImageDiv.appendChild(img);
  attributionLabel = createAttribution(place.photos[0].authorAttributions);
  expandedImageDiv.appendChild(attributionLabel);

  // Helper function to create attribution DIV.
  function createAttribution(attribution) {
    attributionLabel = document.createElement("a");
    attributionLabel.classList.add("attribution-label");
    attributionLabel.textContent = attribution[0].displayName;
    attributionLabel.href = attribution[0].uri;
    attributionLabel.target = "_blank;";
    return attributionLabel;
  }
}

init();index.js

سی‌اس‌اس

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#container {
  display: flex;
  padding: 10px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.place-overview {
  width: 400px;
  height: 380px;
  overflow-x: auto;
  position: relative;
  margin-right: 20px;
}

#info {
  font-family: sans-serif;
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  padding-bottom: 10px;
}

#heading {
  width: 500px;
  font-size: x-large;
  margin-bottom: 20px;
}

#summary {
  width: 500px;
}

#gallery {
  display: flex;
}

#gallery img {
  width: 200px;
  height: 200px;
  margin-right: 10px;
  margin-top: 40px;
  border-radius: 10px;
  cursor: pointer;
}

#expanded-image {
  display: flex;
  height: 380px;
  overflow: hidden;
  background-color: #000;
}

#expanded-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.attribution-label {
  background-color: #fff;
  opacity: 0.7;
  font-size: 10px;
  font-family: sans-serif;
  margin: 2px;
  position: absolute;
}
style.css

اچ‌تی‌ام‌ال

<html>
  <head>
    <title>Place Photos</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="container">
      <div class="place-overview">
        <div id="info">
          <div id="heading"></div>
          <div id="summary"></div>
        </div>
        <div id="gallery"></div>
      </div>
      <div id="expanded-image"></div>
    </div>

    <!-- prettier-ignore -->
    <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>index.html

نمونه را امتحان کنید

JSFiddle.net پوسته ابری گوگل

دریافت عکس‌ها

برای دریافت عکس‌های یک مکان، فیلد photos را در پارامترهای درخواست fetchFields() خود قرار دهید. نمونه Place حاصل شامل آرایه‌ای از حداکثر 10 شیء Photo است که از طریق آن می‌توانید به تصاویر و اطلاعات مربوط به آنها دسترسی پیدا کنید. getURI() را برای بازگرداندن URI عکس منبع فراخوانی کنید و با استفاده PhotoOptions حداکثر ارتفاع و/یا عرض تصویر را تنظیم کنید. اگر مقداری را برای maxHeight و maxWidth تعیین کنید، سرویس عکس، تصویر را به کوچکترین اندازه از بین دو اندازه تغییر اندازه می‌دهد، در حالی که نسبت ابعاد اصلی را حفظ می‌کند.

مثال زیر نحوه ایجاد درخواست Place Details برای عکس‌ها، فراخوانی getURI() روی یک نمونه عکس برای بازگرداندن URI منبع برای تصویر و سپس اضافه کردن اولین نتیجه عکس به یک عنصر img را نشان می‌دهد (برای وضوح بیشتر، نسبت‌ها حذف شده‌اند):

const { Place } = await google.maps.importLibrary('places');

// Use a place ID to create a new Place instance.
const place = new Place({
    id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
});

// Call fetchFields, passing the desired data fields.
await place.fetchFields({ fields: ['photos'] });

// Add the first photo to an img element.
const photoImg = document.getElementById('image-container');
photoImg.src = place.photos[0].getURI({maxHeight: 400});

انتساب نویسندگان

وقتی عکسی را نمایش می‌دهید، باید مشخصات نویسنده را نیز برای آن نمایش دهید. از کلاس AuthorAttribution برای برگرداندن مشخصات استفاده کنید. یک مشخصات شامل نام نویسنده ( displayName )، یک URI برای پروفایل نقشه گوگل او ( uri ) و یک URI برای عکس نویسنده ( photoURI ) است. قطعه کد زیر نحوه برگرداندن displayName ، uri و photoURI برای عکس یک مکان را نشان می‌دهد.

  let name = place.photos[0].authorAttributions[0].displayName;
  let url = place.photos[0].authorAttributions[0].uri;
  let authorPhoto = place.photos[0].authorAttributions[0].photoURI;