Görüntüleri ve ek açıklamaları görüntüleme

Avrupa Ekonomik Alanı (AEA) geliştiricileri

Coğrafi Kodlama API'sinin SearchDestinations uç noktası, navigasyon noktaları ve girişler de dahil olmak üzere yakın çevreye özel bağlam sağlar. Kullanıcı deneyimini iyileştirmek için yanıtta Street View Static API parametreleri yer alabilir. Bu sayede, bu konumlarla ilgili görüntüleri gösterebilirsiniz.

Görüntü ve ek açıklama isteğinde bulunma

Görüntü ve açıklama bilgilerini almak için X-Goog-FieldMask başlığına aşağıdaki alanları eklemeniz gerekir:

Örnek cURL isteği

curl -X POST -d '{
  "place": "places/ChIJkU89GL9ZwokRvVjWDQzhaNg"
}' \
-H 'Content-Type: application/json' \
-H "X-Goog-Api-Key: API_KEY" \
-H "X-Goog-FieldMask: destinations.navigationPoints.streetViewThumbnail,destinations.navigationPoints.entranceAnnotation,destinations.entrances.streetViewThumbnail,destinations.entrances.streetViewAnnotation" \
https://geocode.googleapis.com/v4alpha/geocode/destinations

Örnek JSON yanıtı

{
  "destinations": [
    {
      "entrances": [
        {
          "location": {
            "latitude": 40.7406763,
            "longitude": -74.0020733
          },
          "tags": [
            "PREFERRED"
          ],
          "place": "places/ChIJkU89GL9ZwokRvVjWDQzhaNg",
          "streetViewThumbnail": {
            "pano": "EUKaIR67fBVmpsHnXuIevA",
            "widthPx": 400,
            "heightPx": 600,
            "headingDegree": 331.06186,
            "fovDegree": 60
          },
          "streetViewAnnotation": {
            "coordinates": [
              {
                "xPx": 184.7,
                "yPx": 290.4
              },
              {
                "xPx": 213.3,
                "yPx": 289.4
              },
              {
                "xPx": 214.8,
                "yPx": 330.8
              },
              {
                "xPx": 186.0,
                "yPx": 332.5
              }
            ]
          }
        }
      ]
    }
  ]
}

Yanıttaki Entrance ve NavigationPoint nesneleri, aşağıdaki alanları içeren bir streetViewThumbnail alanı içerebilir:

Alan Açıklama Static API Parameter
pano Belirli bir panorama kimliği. pano
widthPx Resim için önerilen genişlik. size (genişlik kısmı)
heightPx Resim için önerilen yükseklik. size (yükseklik kısmı)
headingDegree Kameranın pusula istikameti (0-360). heading
pitchDegree Kameranın yukarı/aşağı açısı (-90 ila 90). pitch
fovDegree Yatay görüş alanı (0-120). fov

Resim isteğinde bulunma

Street View görüntüsü istemek için streetViewThumbnail nesnesindeki değerleri kullanarak Street View Static API için bir URL oluşturun.

Örnek URL

Aşağıda, oluşturulmuş bir Street View Static API URL'si örneği verilmiştir:

https://maps.googleapis.com/maps/api/streetview?size=400x600&pano=EUKaIR67fBVmpsHnXuIevA&heading=331.06186&fov=60&key=YOUR_API_KEY&signature=YOUR_SIGNATURE

Örnek kod: TypeScript

Aşağıdaki TypeScript işlevi, Static Street View API URL'sinin Destinations uç nokta çıkışından nasıl oluşturulacağını gösterir.

interface StreetViewThumbnail {
  pano: string;
  widthPx: number;
  heightPx: number;
  headingDegree: number;
  pitchDegree: number;
  fovDegree: number;
}

function getStreetViewUrl(thumbnail: StreetViewThumbnail, apiKey: string): string {
  const params = new URLSearchParams({
    size: `${thumbnail.widthPx}x${thumbnail.heightPx}`,
    pano: thumbnail.pano,
    heading: thumbnail.headingDegree.toString(),
    pitch: thumbnail.pitchDegree.toString(),
    fov: thumbnail.fovDegree.toString(),
    key: apiKey,
  });

  return `https://maps.googleapis.com/maps/api/streetview?${params.toString()}`;
}

Resim ek açıklamaları

Entrance veya NavigationPoint döndürülürse streetViewAnnotation ya da entranceAnnotation alanında ilgili girişin resim açıklaması da yer alabilir. Bu, küçük resimde girişi belirten bir poligonun piksel koordinatlarını sağlar.

Bu ek açıklamalar istemci tarafı oluşturma için tasarlanmıştır. Bunları, Static API tarafından döndürülen resmin üzerine bir yer paylaşımı çizmek için (örneğin, SVG veya <canvas> kullanarak) kullanabilirsiniz.

Not koordinat sistemi

Başlangıç noktası (0,0), resmin sol üst köşesidir.

  • xPx: Sol kenardan yatay uzaklık.
  • yPx: Üst kenardan dikey uzaklık.

Çokgenin doğru şekilde hizalanması için görüntüyü size, widthPx ve heightPx tarafından belirtilen size kullanılarak Static API'den istemelisiniz.

Örnek kod: Çizim ek açıklamaları (TypeScript ve SVG)

Bu örnekte, giriş ek açıklama poligonunu Street View görüntüsünün üzerine yerleştirmek için TypeScript ve SVG'nin nasıl kullanılacağı gösterilmektedir.

TypeScript

interface Coordinate {
  xPx: number;
  yPx: number;
}

interface StreetViewAnnotation {
  coordinates: Coordinate[];
}

function drawAnnotations(annotation: StreetViewAnnotation, width: number, height: number) {
  const svg = document.getElementById('annotation-overlay') as unknown as SVGSVGElement;
  const polygon = document.getElementById('entrance-polygon') as unknown as SVGPolygonElement;

  // Set SVG dimensions to match the image
  svg.setAttribute('width', width.toString());
  svg.setAttribute('height', height.toString());
  svg.setAttribute('viewBox', `0 0 ${width} ${height}`);

  // Construct points string for the polygon
  const points = annotation.coordinates
    .map(coord => `${coord.xPx},${coord.yPx}`)
    .join(' ');

  polygon.setAttribute('points', points);
}

// Example usage:
const annotation = {
  coordinates: [
    {xPx: 184.7, yPx: 290.4},
    {xPx: 213.3, yPx: 289.4},
    {xPx: 214.8, yPx: 330.8},
    {xPx: 186.0, yPx: 332.5}
  ]
};
drawAnnotations(annotation, 400, 600);

HTML

<div style="position: relative; display: inline-block;">
  <!-- The Street View image from the previous step -->
  <img id="street-view-image" src="STREET_VIEW_IMAGE" alt="Street View" style="display: block;">

  <!-- SVG overlay for annotations -->
  <svg id="annotation-overlay" style="position: absolute; top: 0; left: 0; pointer-events: none;">
    <polygon id="entrance-polygon" points="" style="fill:rgba(0, 255, 17, 0.3);stroke:rgba(0, 255, 17, 0.9);stroke-width:3" />
  </svg>
</div>

Aşağıdakine benzer bir ifade görürsünüz:

Google NYC Street View

Geri bildirim

Bu, Geocoding API'nin deneysel bir özelliğidir. geocoding-feedback-channel@google.com adresinden geri bildirimlerinizi iletebilirsiniz.