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

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

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 फ़ील्ड हो सकता है. इसमें ये फ़ील्ड शामिल होते हैं:

फ़ील्ड जानकारी स्टैटिक एपीआई पैरामीटर
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 फ़ंक्शन से पता चलता है कि डेस्टिनेशन एंडपॉइंट के आउटपुट से, 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)

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

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);

एचटीएमएल

<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 का Street View

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

यह Geocoding API की एक सुविधा है, जिसे फ़िलहाल एक्सपेरिमेंट के तौर पर उपलब्ध कराया गया है. हमें आपके सुझाव/राय/शिकायत का इंतज़ार रहेगा. इसके लिए, geocoding-feedback-channel@google.com पर ईमेल भेजें.