इमेज और एनोटेशन दिखाना

यूरोपियन इकनॉमिक एरिया (ईईए) के डेवलपर

Geocoding API के SearchDestinations एंडपॉइंट से, हाइपरलोकल कॉन्टेक्स्ट मिलता है, इसमें नेविगेशन पॉइंट और एंट्री शामिल हैं. उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, रिस्पॉन्स में Street View Static API के पैरामीटर शामिल किए जा सकते हैं. इससे, इन जगहों के लिए काम की इमेज दिखाई जा सकती हैं.

इमेज और एनोटेशन का अनुरोध करना

इमेज और एनोटेशन की जानकारी पाने के लिए, आपको X-Goog-FieldMask हेडर में ये फ़ील्ड शामिल करने होंगे:

cURL अनुरोध का उदाहरण

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

JSON रिस्पॉन्स का उदाहरण

{
  "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
              }
            ]
          }
        }
      ]
    }
  ]
}

रिस्पॉन्स में मौजूद Entrance और NavigationPoint ऑब्जेक्ट में, streetViewThumbnail फ़ील्ड शामिल हो सकता है. इसमें ये फ़ील्ड शामिल हो सकते हैं:

फ़ील्ड ब्यौरा Static API पैरामीटर
pano किसी खास पैनोरामा का आईडी. pano
widthPx इमेज के लिए सुझाई गई चौड़ाई. size (चौड़ाई वाला हिस्सा)
heightPx इमेज के लिए सुझाई गई ऊंचाई. size (ऊंचाई वाला हिस्सा)
headingDegree कैमरे की कंपास हेडिंग (0-360). heading
pitchDegree कैमरे का ऊपर/नीचे की ओर ऐंगल (-90 से 90). pitch
fovDegree हॉरिज़ॉन्टल फ़ील्ड ऑफ़ व्यू (0-120). fov

किसी इमेज का अनुरोध करना

Street View की इमेज का अनुरोध करने के लिए, streetViewThumbnail ऑब्जेक्ट की वैल्यू का इस्तेमाल करके Street View Static API के लिए यूआरएल बनाएं.

यूआरएल का उदाहरण

यहां, Street View Static API के बनाए गए यूआरएल का उदाहरण दिया गया है:

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

कोड का नमूना: TypeScript

यहां दिए गए TypeScript फ़ंक्शन में, Destinations एंडपॉइंट के आउटपुट से, Static Street View API का यूआरएल बनाने का तरीका बताया गया है.

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()}`;
}

इमेज एनोटेशन

अगर कोई Entrance या NavigationPoint दिखता है, तो इसमें streetViewAnnotation या entranceAnnotation फ़ील्ड में, उससे जुड़ी एंट्री का इमेज एनोटेशन भी शामिल हो सकता है. इससे, थंबनेल इमेज में एंट्री की आउटलाइन बनाने वाले पॉलीगॉन के पिक्सल कोऑर्डिनेट मिलते हैं.

ये एनोटेशन, क्लाइंट-साइड रेंडरिंग के लिए होते हैं. इनका इस्तेमाल करके, Static API से मिली इमेज पर ओवरले बनाया जा सकता है. उदाहरण के लिए, SVG या <canvas> का इस्तेमाल करके.

एनोटेशन कोऑर्डिनेट सिस्टम

ऑरिजिन (0,0) इमेज का सबसे ऊपर का बायां कोना होता है.

  • xPx: बाएं किनारे से हॉरिज़ॉन्टल दूरी.
  • yPx: ऊपरी किनारे से वर्टिकल दूरी.

यह पक्का करने के लिए कि पॉलीगॉन सही तरीके से अलाइन हो, आपको Static API से इमेज का अनुरोध करते समय, widthPx और heightPx से तय किया गया size इस्तेमाल करना होगा.

कोड का नमूना: एनोटेशन बनाना (TypeScript और SVG)

इस उदाहरण में, Street View की इमेज पर, एंट्री एनोटेशन पॉलीगॉन को ओवरले करने के लिए, TypeScript और SVG का इस्तेमाल करने का तरीका बताया गया है.

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>

आपको कुछ ऐसा दिखेगा:

Google NYC Street View

सुझाव/राय दें या शिकायत करें

यह Geocoding API की एक एक्सपेरिमेंटल सुविधा है. हमें सुझाव/राय/शिकायत geocoding-feedback-channel@google.com पर भेजें.