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

Avrupa Ekonomik Alanı'ndaki (AEA) geliştiriciler

Geocoding API'nin SearchDestinations uç noktası, navigasyon noktaları ve girişler dahil olmak üzere yakın çevreye özel bağlam sağlar. Kullanıcı deneyimini iyileştirmek için yanıt, Street View Static API parametrelerini içerebilir. Böylece bu konumlarla ilgili görüntüleri gösterebilirsiniz.

Görüntü ve ek açıklama isteme

Görüntü ve ek 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 Statik API Parametresi
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 yönü (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=API_KEY&signature=YOUR_SIGNATURE

Örnek kod: TypeScript

Aşağıdaki TypeScript işlevi, Destinations uç noktası çıkışından Static Street View API URL'sinin 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 ek açıklaması da bulunabilir. Bu, küçük resimdeki girişi çevreleyen bir poligonun piksel koordinatlarını sağlar.

Bu ek açıklamalar istemci tarafı oluşturma için tasarlanmıştır. Bu koordinatları, Static API tarafından döndürülen resmin üzerine bir yer paylaşımı (ör. SVG veya <canvas> kullanarak) çizmek için 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 widthPx ve heightPx tarafından belirtilen size değerini kullanarak Static API'den resmi istemeniz gerekir.

Örnek kod: Not çizme (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>

Şuna benzer bir şey görürsünüz:

Google NYC Street View

Geri bildirim

Bu, Geocoding API'nin deneysel bir özelliğidir. Geri bildirimlerinizi geocoding-feedback-channel@google.com adresine gönderebilirsiniz.