Geocoding API का SearchDestinations एंडपॉइंट, आस-पास की जगह के बारे में जानकारी देता है. इसमें नेविगेशन पॉइंट और प्रवेश द्वार शामिल हैं. उपयोगकर्ताओं को बेहतर अनुभव देने के लिए, जवाब में Street View Static API के पैरामीटर शामिल किए जा सकते हैं. इससे आपको इन जगहों के लिए काम की इमेज दिखाने में मदद मिलती है.
इमेज और एनोटेशन का अनुरोध करना
इमेज और एनोटेशन की जानकारी पाने के लिए, आपको X-Goog-FieldMask हेडर में ये फ़ील्ड शामिल करने होंगे:
destinations.navigationPoints.streetViewThumbnaildestinations.navigationPoints.entranceAnnotationdestinations.entrances.streetViewThumbnaildestinations.entrances.streetViewAnnotation
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 |
किसी इमेज का अनुरोध करना
स्ट्रीट व्यू इमेज का अनुरोध करने के लिए, 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=YOUR_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 फ़ील्ड में मौजूद, संबंधित एंट्री की इमेज एनोटेशन भी शामिल हो सकता है. इससे थंबनेल इमेज में मौजूद दरवाज़े के चारों ओर बने पॉलीगॉन के पिक्सल कोऑर्डिनेट मिलते हैं.
ये एनोटेशन, क्लाइंट-साइड रेंडरिंग के लिए होते हैं. इनका इस्तेमाल करके, स्टैटिक एपीआई से मिली इमेज के ऊपर ओवरले बनाया जा सकता है. उदाहरण के लिए, SVG या <canvas> का इस्तेमाल करके.
एनोटेशन कोऑर्डिनेट सिस्टम
ऑरिजिन (0,0), इमेज का ऊपर बायां कोना होता है.
xPx: बाएं किनारे से हॉरिज़ॉन्टल दूरी.yPx: सबसे ऊपर के किनारे से वर्टिकल दूरी.
यह पक्का करने के लिए कि पॉलीगॉन सही तरीके से अलाइन हो, आपको widthPx और heightPx के ज़रिए तय किए गए size का इस्तेमाल करके, Static API से इमेज का अनुरोध ज़रूर करना चाहिए.
कोड का उदाहरण: ड्रॉइंग एनोटेशन (टाइपस्क्रिप्ट और एसवीजी)
इस उदाहरण में, 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);
एचटीएमएल
<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>
आपको कुछ ऐसा दिखेगा:
सुझाव/राय दें या शिकायत करें
यह Geocoding API की एक ऐसी सुविधा है जिसे फ़िलहाल आज़माया जा रहा है. हमें आपके सुझाव/राय/शिकायत का इंतज़ार रहेगा. इसके लिए, geocoding-feedback-channel@google.com पर ईमेल भेजें.