खास जानकारी
Google Street View, पूरे कवरेज एरिया में सड़कों से पैनोरामा 360 डिग्री व्यू दिखाता है. Street View का एपीआई कवरेज, Google Maps ऐप्लिकेशन (https://maps.google.com/) के कवरेज जैसा ही है. Street View के लिए फ़िलहाल जिन शहरों में यह सुविधा काम करती है उनकी सूची Google Maps की वेबसाइट पर उपलब्ध है.
Street View की एक सैंपल इमेज यहां दिखाई गई है.
Maps JavaScript API, Street View की सेवा देता है. इसकी मदद से, Google Maps के Street View में इस्तेमाल की गई तस्वीरों का संग्रह हासिल किया जा सकता है और उसमें बदलाव किया जा सकता है. यह Street View सेवा, मूल रूप से ब्राउज़र में काम करती है.
Street View मैप का इस्तेमाल
हालांकि, Street View का इस्तेमाल
स्टैंडअलोन डीओएम एलिमेंट में किया जा सकता है, लेकिन मैप पर किसी जगह के बारे में बताते समय
यह सबसे ज़्यादा काम आता है. मैप पर Street View डिफ़ॉल्ट रूप से चालू रहता है. साथ ही,
नेविगेशन (ज़ूम और पैन करने) के कंट्रोल में Street View का पेगमैन कंट्रोल दिखता है. streetViewControl को false पर सेट करके,
इस कंट्रोल को मैप के MapOptions में छिपाया जा सकता है. Map की streetViewControlOptions.position प्रॉपर्टी को नई ControlPosition पर सेट करके, Street View कंट्रोल की डिफ़ॉल्ट जगह को भी बदला जा सकता है.
Street View पेगमैन कंट्रोल की मदद से, Street View पैनोरामा को सीधे मैप में देखा जा सकता है. जब उपयोगकर्ता पेगमैन को क्लिक करके रखता है, तो मैप अपडेट हो जाता है और Street View की सुविधा वाली सड़कों के आस-पास नीली आउटलाइन दिखाने लगता है. इससे, उपयोगकर्ता को Google Maps ऐप्लिकेशन जैसा अनुभव मिलता है.
जब उपयोगकर्ता पेगमैन मार्कर को किसी सड़क पर डालता है, तब मैप अपडेट हो जाता है और बताई गई जगह का Street View पैनोरामा दिखाता है.
Street View पैनोरामा
Street View की इमेज, StreetViewPanorama ऑब्जेक्ट का इस्तेमाल करके काम करती हैं. इससे, Street View "व्यूअर" को एपीआई इंटरफ़ेस मिलता है. हर मैप में डिफ़ॉल्ट
Street View पैनोरामा होता है, जिसे मैप के getStreetView() तरीके का इस्तेमाल करके
देखा जा सकता है. जब किसी Street View कंट्रोल को, मैप में
जोड़ने के लिए streetViewControl
विकल्प को true पर सेट किया जाता है, तो पेगमैन कंट्रोल अपने-आप इस डिफ़ॉल्ट Street View पैनोरामा से जुड़ जाता है.
अपना खुद का StreetViewPanorama ऑब्जेक्ट बनाया जा सकता है. साथ ही, मैप को उस ऑब्जेक्ट के लिए डिफ़ॉल्ट के बजाय, इस्तेमाल करने के लिए सेट किया जा सकता है. इसके लिए, मैप की streetView प्रॉपर्टी को साफ़ तौर पर उस ऑब्जेक्ट के लिए सेट करें. अगर आप डिफ़ॉल्ट व्यवहार में बदलाव करना चाहते हैं,
जैसे कि मैप और पैनोरामा के बीच ओवरले
अपने-आप शेयर करना, तो आप डिफ़ॉल्ट पैनोरामा को ओवरराइड कर सकते हैं. (नीचे
Street View में ओवरले देखें.)
Street View कंटेनर
इसके बजाय, आपके पास StreetViewPanorama को किसी अलग DOM एलिमेंट में दिखाने का विकल्प है. आम तौर पर, यह एक <div> एलिमेंट होता है.
बस StreetViewPanorama के कंस्ट्रक्टर में DOM एलिमेंट पास करें. इमेज को सही तरीके से दिखाने के लिए, हमारा सुझाव है कि इमेज का साइज़, कम से कम
200 पिक्सल x 200 पिक्सल होना चाहिए.
ध्यान दें: हालांकि, Street View की सुविधा को मैप के साथ इस्तेमाल करने के लिए डिज़ाइन किया गया है, लेकिन इसके इस्तेमाल की ज़रूरत नहीं है. मैप के बिना, Street View के स्टैंडअलोन ऑब्जेक्ट का इस्तेमाल किया जा सकता है.
Street View लोकेशन और पॉइंट-ऑफ़-व्यू (POV)
StreetViewPanorama कंस्ट्रक्टर की मदद से, StreetViewOptions पैरामीटर का इस्तेमाल करके, Street View की जगह और ऐंगल ऑफ़ व्यू को भी सेट किया जा सकता है. ऑब्जेक्ट बनाने के बाद, उसकी जगह और POV को बदलने के लिए,
उस ऑब्जेक्ट पर
setPosition() और setPov() को कॉल किया जा सकता है.
Street View की जगह से यह पता चलता है कि किसी इमेज पर कैमरे का फ़ोकस सही है या नहीं. हालांकि, यह किसी इमेज के लिए कैमरे का ओरिएंटेशन तय नहीं करता. इस काम के लिए, StreetViewPov ऑब्जेक्ट
दो प्रॉपर्टी के बारे में बताता है:
heading(डिफ़ॉल्ट0) सही उत्तर से डिग्री के हिसाब से कैमरे की जगह के चारों ओर घूमने के कोण को तय करता है. शीर्षक को घड़ी की दिशा में मापा जाता है (पूर्व की ओर 90 डिग्री सही है).pitch(डिफ़ॉल्ट0) कैमरे के शुरुआती डिफ़ॉल्ट पिच से ऐंगल वैरियंस "अप" या "डाउन" तय करता है, जो आम तौर पर सपाट हॉरिज़ॉन्टल होता है. हालांकि, ऐसा हमेशा नहीं होता. (उदाहरण के लिए, किसी पहाड़ी पर ली गई इमेज में एक डिफ़ॉल्ट पिच दिखाई देगी. यह हॉरिज़ॉन्टल नहीं है.) पिच कोणों को पॉज़िटिव वैल्यू के हिसाब से मापा जाता है. वैल्यू को ऊपर की ओर देखकर (+90 डिग्री सीधे ऊपर की ओर और डिफ़ॉल्ट पिच से ऑर्थोगोनल) और नेगेटिव वैल्यू नीचे की ओर (-90 डिग्री सीधे नीचे और डिफ़ॉल्ट पिच से ऑर्थोगनल) देखे जाते हैं.
Street View कैमरे का नज़रिया तय करने के लिए, अक्सर StreetViewPov ऑब्जेक्ट का इस्तेमाल किया जाता है. StreetViewPanorama.getPhotographerPov() तरीके से
यह भी पता लगाया जा सकता है कि फ़ोटोग्राफ़र किस नज़रिए से बात कर रहा है — आम तौर पर, वह किस दिशा में कार या ट्राइक किस दिशा में था.
नीचे दिए गए कोड में, बॉस्टन का मैप दिखाया गया है. इसमें फ़ैनवे पार्क का शुरुआती व्यू दिख रहा है. पेगमैन को चुनने और उसे मैप पर किसी समर्थित जगह पर खींचने से स्ट्रीट व्यू पैनोरामा बदल जाएगा:
TypeScript
function initialize() {
const fenway = { lat: 42.345573, lng: -71.098326 };
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
center: fenway,
zoom: 14,
}
);
const panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano") as HTMLElement,
{
position: fenway,
pov: {
heading: 34,
pitch: 10,
},
}
);
map.setStreetView(panorama);
}
declare global {
interface Window {
initialize: () => void;
}
}
window.initialize = initialize;
JavaScript
function initialize() {
const fenway = { lat: 42.345573, lng: -71.098326 };
const map = new google.maps.Map(document.getElementById("map"), {
center: fenway,
zoom: 14,
});
const panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"),
{
position: fenway,
pov: {
heading: 34,
pitch: 10,
},
},
);
map.setStreetView(panorama);
}
window.initialize = initialize;
सीएसएस
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map,
#pano {
float: left;
height: 100%;
width: 50%;
}
एचटीएमएल
<html>
<head>
<title>Street View split-map-panes</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<div id="pano"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initialize&v=weekly"
defer
></script>
</body>
</html>
सैंपल आज़माएं
मोबाइल डिवाइस पर मोशन ट्रैकिंग
यह एपीआई, डिवाइस की स्क्रीन की दिशा से जुड़े इवेंट के साथ काम करने वाले डिवाइसों पर, उपयोगकर्ताओं को उनकी हलचल के हिसाब से Street View के पॉइंट को बदलने की सुविधा देता है. उपयोगकर्ता अपने डिवाइसों को इधर-उधर ले जाकर आस-पास की जगहें देख सकते हैं. इसे मोशन ट्रैकिंग या डिवाइस रोटेशन ट्रैकिंग कहा जाता है.
ऐप्लिकेशन डेवलपर के तौर पर, आपके पास डिफ़ॉल्ट तरीका बदलने का विकल्प होता है:
- मोशन ट्रैकिंग की सुविधा चालू या बंद करें. डिफ़ॉल्ट रूप से, मोशन
ट्रैकिंग की सुविधा उन सभी डिवाइसों पर चालू होती है जिन पर यह सुविधा काम करती है. नीचे दिया गया सैंपल,
मोशन ट्रैकिंग को बंद कर देता है, लेकिन मोशन ट्रैकिंग कंट्रोल को दिखता रहता है.
(ध्यान दें कि कंट्रोल पर टैप करके उपयोगकर्ता मोशन ट्रैकिंग को चालू कर सकता है.)
var panorama = new google.maps.StreetViewPanorama( document.getElementById('pano'), { position: {lat: 37.869260, lng: -122.254811}, pov: {heading: 165, pitch: 0}, motionTracking: false }); -
मोशन ट्रैकिंग कंट्रोल को छिपाएं या दिखाएं. डिफ़ॉल्ट रूप से, यह कंट्रोल उन डिवाइसों पर दिखता है जिन पर मोशन ट्रैकिंग की सुविधा काम करती है. मोशन ट्रैकिंग को चालू या बंद करने के लिए, उपयोगकर्ता कंट्रोल पर टैप कर सकते हैं. ध्यान दें कि अगर डिवाइस पर मोशन ट्रैकिंग की सुविधा काम नहीं करती है, तो कंट्रोल कभी नहीं दिखेगा. भले ही,
motionTrackingControlकी वैल्यू कुछ भी हो.नीचे दिया गया सैंपल, मोशन ट्रैकिंग और मोशन ट्रैकिंग कंट्रोल, दोनों को बंद करता है. इस मामले में, उपयोगकर्ता मोशन ट्रैकिंग को चालू नहीं कर सकता:
var panorama = new google.maps.StreetViewPanorama( document.getElementById('pano'), { position: {lat: 37.869260, lng: -122.254811}, pov: {heading: 165, pitch: 0}, motionTracking: false, motionTrackingControl: false }); - मोशन ट्रैकिंग कंट्रोल की डिफ़ॉल्ट जगह बदलें. डिफ़ॉल्ट रूप से, कंट्रोल, पैनोरामा की सबसे नीचे दाईं ओर (रैंक
RIGHT_BOTTOM) के पास दिखता है. नीचे दिया गया सैंपल, कंट्रोल की पोज़िशन को बाईं ओर सबसे नीचे सेट करता है:var panorama = new google.maps.StreetViewPanorama( document.getElementById('pano'), { position: {lat: 37.869260, lng: -122.254811}, pov: {heading: 165, pitch: 0}, motionTrackingControlOptions: { position: google.maps.ControlPosition.LEFT_BOTTOM } });
मोशन ट्रैकिंग का इस्तेमाल करने के लिए, मोबाइल डिवाइस या किसी भी ऐसे डिवाइस पर यह सैंपल देखें जिस पर डिवाइस ओरिएंटेशन इवेंट काम करते हैं:
Street View में ओवरले
डिफ़ॉल्ट StreetViewPanorama ऑब्जेक्ट, मैप
ओवरले के नेटिव डिसप्ले के साथ काम करता है.
ओवरले आम तौर पर "स्ट्रीट लेवल" पर दिखते हैं. ये LatLng पोज़िशन पर दिखते हैं. (उदाहरण के लिए, मार्कर अपनी पूंछ को जगह के हॉरिज़ॉन्टल प्लेन की ओर ऐंकर किए गए दिखेंगे. उदाहरण के लिए, Street View पैनोरामा में यह दिखता है.)
फ़िलहाल, Street View पैनोरामा पर जिस तरह के ओवरले काम करते हैं वे Marker, InfoWindow, और कस्टम OverlayView तक ही दिखाए जा सकते हैं. मैप पर दिखाए जाने वाले ओवरले, Street View पैनोरामा पर दिखाए जा सकते हैं. इसके लिए, पैनोरामा को Map ऑब्जेक्ट की जगह इस्तेमाल करके, setMap() को कॉल किया जा सकता है और मैप के बजाय, StreetViewPanorama को तर्क के तौर पर पास किया जा सकता है. जानकारी
विंडो इसी तरह की जानकारी वाली विंडो को मैप के बजाय, StreetViewPanorama() को पास करते हुए
open() को कॉल करके, Street View पैनोरामा में खुल सकती है.
इसके अलावा, डिफ़ॉल्ट StreetViewPanorama वाला मैप बनाते समय,
मैप पर बनाए गए सभी मार्कर, मैप से जुड़े Street View पैनोरामा के साथ अपने-आप शेयर हो जाते हैं, बशर्ते
पैनोरामा दिख रहा हो. डिफ़ॉल्ट Street View पैनोरामा को फिर से पाने के लिए, Map ऑब्जेक्ट पर
getStreetView() को कॉल करें. ध्यान दें कि अगर आप
मैप की streetView प्रॉपर्टी को साफ़ तौर पर अपने बनाए गए निर्माण के
StreetViewPanorama के लिए सेट करते हैं, तो डिफ़ॉल्ट पैनोरामा को बदल दिया जाएगा.
नीचे दिए गए उदाहरण में मार्कर से, न्यूयॉर्क शहर के एस्टर प्लेस के आस-पास की अलग-अलग जगहों को दिखाया गया है. StreetViewPanorama में दिख रहे शेयर किए गए मार्कर दिखाने के लिए, डिसप्ले को Street View पर टॉगल करें.
TypeScript
let panorama: google.maps.StreetViewPanorama;
function initMap(): void {
const astorPlace = { lat: 40.729884, lng: -73.990988 };
// Set up the map
const map = new google.maps.Map(
document.getElementById("map") as HTMLElement,
{
center: astorPlace,
zoom: 18,
streetViewControl: false,
}
);
document
.getElementById("toggle")!
.addEventListener("click", toggleStreetView);
// Set up the markers on the map
const cafeMarker = new google.maps.Marker({
position: { lat: 40.730031, lng: -73.991428 },
map,
icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00",
title: "Cafe",
});
const bankMarker = new google.maps.Marker({
position: { lat: 40.729681, lng: -73.991138 },
map,
icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00",
title: "Bank",
});
const busMarker = new google.maps.Marker({
position: { lat: 40.729559, lng: -73.990741 },
map,
icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00",
title: "Bus Stop",
});
// We get the map's default panorama and set up some defaults.
// Note that we don't yet set it visible.
panorama = map.getStreetView()!; // TODO fix type
panorama.setPosition(astorPlace);
panorama.setPov(
/** @type {google.maps.StreetViewPov} */ {
heading: 265,
pitch: 0,
}
);
}
function toggleStreetView(): void {
const toggle = panorama.getVisible();
if (toggle == false) {
panorama.setVisible(true);
} else {
panorama.setVisible(false);
}
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
let panorama;
function initMap() {
const astorPlace = { lat: 40.729884, lng: -73.990988 };
// Set up the map
const map = new google.maps.Map(document.getElementById("map"), {
center: astorPlace,
zoom: 18,
streetViewControl: false,
});
document.getElementById("toggle").addEventListener("click", toggleStreetView);
// Set up the markers on the map
const cafeMarker = new google.maps.Marker({
position: { lat: 40.730031, lng: -73.991428 },
map,
icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00",
title: "Cafe",
});
const bankMarker = new google.maps.Marker({
position: { lat: 40.729681, lng: -73.991138 },
map,
icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00",
title: "Bank",
});
const busMarker = new google.maps.Marker({
position: { lat: 40.729559, lng: -73.990741 },
map,
icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00",
title: "Bus Stop",
});
// We get the map's default panorama and set up some defaults.
// Note that we don't yet set it visible.
panorama = map.getStreetView(); // TODO fix type
panorama.setPosition(astorPlace);
panorama.setPov(
/** @type {google.maps.StreetViewPov} */ {
heading: 265,
pitch: 0,
},
);
}
function toggleStreetView() {
const toggle = panorama.getVisible();
if (toggle == false) {
panorama.setVisible(true);
} else {
panorama.setVisible(false);
}
}
window.initMap = initMap;
सीएसएस
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: "Roboto", "sans-serif";
line-height: 30px;
padding-left: 10px;
}
#floating-panel {
margin-left: -100px;
}
एचटीएमएल
<html>
<head>
<title>Overlays Within Street View</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="floating-panel">
<input type="button" value="Toggle Street View" id="toggle" />
</div>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
सैंपल आज़माएं
Street View इवेंट
Street View के बीच नेविगेट करते समय या इसके ओरिएंटेशन में बदलाव करते समय, हो सकता है कि आप ऐसे कई इवेंट पर नज़र रखना चाहें जिनसे StreetViewPanorama की स्थिति में बदलाव होते हैं:
- जब भी अलग पैनो आईडी बदलता है,
pano_changedचालू हो जाता है. यह इवेंट इस बात की गारंटी नहीं देता कि इस इवेंट के ट्रिगर होने तक, पैनोरामा में मौजूद डेटा (जैसे कि लिंक) में भी बदलाव हुआ है या नहीं. यह इवेंट सिर्फ़ यह बताता है कि पैनोरामा आईडी बदल गया है. ध्यान दें कि पैनो आईडी (जिसका इस्तेमाल इस पैनोरामा का रेफ़रंस देने के लिए किया जा सकता है) सिर्फ़ मौजूदा ब्राउज़र सेशन में स्थिर रहता है. - जब भी पैनोरामा की बुनियादी
(
LatLng) जगह बदलती है,position_changedट्रिगर हो जाता है. पैनोरामा को घुमाने से यह इवेंट ट्रिगर नहीं होगा. ध्यान दें कि आप उससे जुड़े पैनो आईडी को बदले बिना, पैनोरामा की मूल जगह बदल सकते हैं. ऐसा इसलिए, क्योंकि एपीआई, पैनोरामा की जगह से सबसे नज़दीकी Pano आईडी अपने-आप जोड़ देगा. - जब भी Street View के
StreetViewPovमें बदलाव होता है,pov_changedट्रिगर हो जाता है. ध्यान रखें कि यह इवेंट तब तक चालू हो सकता है, जब तक पोज़िशन और पैनोरामा आईडी के बीच कोई बदलाव न हो. - जब भी Street View के
लिंक बदलते हैं, तो
links_changedट्रिगर हो जाता है. ध्यान रखें किpano_changedसे बताए गए पैनो आईडी में बदलाव होने के बाद, यह इवेंट एसिंक्रोनस रूप से फ़ायर हो सकता है. - जब भी Street View की 'किसको दिखे' सेटिंग में बदलाव होता है,
visible_changedट्रिगर हो जाता है. ध्यान रखें किpano_changedसे बताए गए पैनो आईडी में बदलाव होने के बाद, यह इवेंट एसिंक्रोनस रूप से फ़ायर हो सकता है.
इस कोड से पता चलता है कि StreetViewPanorama के बारे में डेटा इकट्ठा करने के लिए, इन इवेंट को कैसे मैनेज किया जा सकता है:
TypeScript
function initPano() {
const panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano") as HTMLElement,
{
position: { lat: 37.869, lng: -122.255 },
pov: {
heading: 270,
pitch: 0,
},
visible: true,
}
);
panorama.addListener("pano_changed", () => {
const panoCell = document.getElementById("pano-cell") as HTMLElement;
panoCell.innerHTML = panorama.getPano();
});
panorama.addListener("links_changed", () => {
const linksTable = document.getElementById("links_table") as HTMLElement;
while (linksTable.hasChildNodes()) {
linksTable.removeChild(linksTable.lastChild as ChildNode);
}
const links = panorama.getLinks();
for (const i in links) {
const row = document.createElement("tr");
linksTable.appendChild(row);
const labelCell = document.createElement("td");
labelCell.innerHTML = "<b>Link: " + i + "</b>";
const valueCell = document.createElement("td");
valueCell.innerHTML = links[i].description as string;
linksTable.appendChild(labelCell);
linksTable.appendChild(valueCell);
}
});
panorama.addListener("position_changed", () => {
const positionCell = document.getElementById(
"position-cell"
) as HTMLElement;
(positionCell.firstChild as HTMLElement).nodeValue =
panorama.getPosition() + "";
});
panorama.addListener("pov_changed", () => {
const headingCell = document.getElementById("heading-cell") as HTMLElement;
const pitchCell = document.getElementById("pitch-cell") as HTMLElement;
(headingCell.firstChild as HTMLElement).nodeValue =
panorama.getPov().heading + "";
(pitchCell.firstChild as HTMLElement).nodeValue =
panorama.getPov().pitch + "";
});
}
declare global {
interface Window {
initPano: () => void;
}
}
window.initPano = initPano;
JavaScript
function initPano() {
const panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"),
{
position: { lat: 37.869, lng: -122.255 },
pov: {
heading: 270,
pitch: 0,
},
visible: true,
},
);
panorama.addListener("pano_changed", () => {
const panoCell = document.getElementById("pano-cell");
panoCell.innerHTML = panorama.getPano();
});
panorama.addListener("links_changed", () => {
const linksTable = document.getElementById("links_table");
while (linksTable.hasChildNodes()) {
linksTable.removeChild(linksTable.lastChild);
}
const links = panorama.getLinks();
for (const i in links) {
const row = document.createElement("tr");
linksTable.appendChild(row);
const labelCell = document.createElement("td");
labelCell.innerHTML = "<b>Link: " + i + "</b>";
const valueCell = document.createElement("td");
valueCell.innerHTML = links[i].description;
linksTable.appendChild(labelCell);
linksTable.appendChild(valueCell);
}
});
panorama.addListener("position_changed", () => {
const positionCell = document.getElementById("position-cell");
positionCell.firstChild.nodeValue = panorama.getPosition() + "";
});
panorama.addListener("pov_changed", () => {
const headingCell = document.getElementById("heading-cell");
const pitchCell = document.getElementById("pitch-cell");
headingCell.firstChild.nodeValue = panorama.getPov().heading + "";
pitchCell.firstChild.nodeValue = panorama.getPov().pitch + "";
});
}
window.initPano = initPano;
सीएसएस
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#floating-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: "Roboto", "sans-serif";
line-height: 30px;
padding-left: 10px;
}
#pano {
width: 50%;
height: 100%;
float: left;
}
#floating-panel {
width: 45%;
height: 100%;
float: right;
text-align: left;
overflow: auto;
position: static;
border: 0px solid #999;
}
एचटीएमएल
<html>
<head>
<title>Street View Events</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="pano"></div>
<div id="floating-panel">
<table>
<tr>
<td><b>Position</b></td>
<td id="position-cell"> </td>
</tr>
<tr>
<td><b>POV Heading</b></td>
<td id="heading-cell">270</td>
</tr>
<tr>
<td><b>POV Pitch</b></td>
<td id="pitch-cell">0.0</td>
</tr>
<tr>
<td><b>Pano ID</b></td>
<td id="pano-cell"> </td>
</tr>
<table id="links_table"></table>
</table>
</div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
defer
></script>
</body>
</html>
सैंपल आज़माएं
Street View कंट्रोल
StreetViewPanorama दिखाते समय, पैनोरामा पर डिफ़ॉल्ट रूप से कई तरह के कंट्रोल दिखते हैं. इन कंट्रोल को चालू या बंद करने के लिए, StreetViewPanoramaOptions के अंदर true या false पर जाएं. इसके लिए, इनके सही फ़ील्ड को सेट करें:
panControlसे पैनोरामा को घुमाया जा सकता है. यह कंट्रोल, डिफ़ॉल्ट रूप से इंटिग्रेट किए गए स्टैंडर्ड कंपास और पैन कंट्रोल के तौर पर दिखता है.panControlOptionsफ़ील्ड मेंPanControlOptionsदेकर, कंट्रोल की जगह बदली जा सकती है.zoomControlसे, इमेज को ज़ूम किया जा सकता है. यह कंट्रोल, डिफ़ॉल्ट रूप से पैनोरामा के सबसे नीचे दाईं ओर दिखता है.zoomControlOptionsफ़ील्ड मेंZoomControlOptionsदेकर, कंट्रोल के दिखने का तरीका बदला जा सकता है.addressControlटेक्स्ट ओवरले में, विज्ञापन से जुड़ी जगह का पता दिखाता है. साथ ही, Google Maps में जगह की जानकारी खोलने के लिए एक लिंक देता है.addressControlOptionsफ़ील्ड मेंStreetViewAddressControlOptionsदेकर, कंट्रोल के दिखने का तरीका बदला जा सकता है.fullscreenControlमें Street View को फ़ुलस्क्रीन मोड में खोलने का विकल्प मिलता है.fullscreenControlOptionsफ़ील्ड मेंFullscreenControlOptionsदेकर, कंट्रोल के दिखने का तरीका बदला जा सकता है.motionTrackingControlमें, मोबाइल डिवाइसों पर मोशन ट्रैकिंग को चालू या बंद करने का विकल्प मिलता है. यह कंट्रोल सिर्फ़ उन डिवाइसों पर दिखता है जिन पर डिवाइस ओरिएंटेशन इवेंट काम करते हैं. डिफ़ॉल्ट रूप से, कंट्रोल, पैनोरामा के नीचे दाईं ओर दिखता है.MotionTrackingControlOptionsदेकर, कंट्रोल की जगह बदली जा सकती है. ज़्यादा जानकारी के लिए, मोशन ट्रैकिंग सेक्शन देखें.linksControlसे आस-पास की पैनोरामा इमेज देखने के लिए, इमेज पर गाइड ऐरो दिए गए हैं.- क्लोज़ कंट्रोल का इस्तेमाल करके, उपयोगकर्ता Street View व्यूअर को बंद कर सकता है.
enableCloseButtonकोtrueयाfalseपर सेट करके, 'बंद करें' कंट्रोल को चालू या बंद किया जा सकता है.
नीचे दिए गए उदाहरण में, असोसिएट किए गए Street View में दिखने वाले कंट्रोल में बदलाव किया गया है और व्यू के लिंक हटा दिए गए हैं:
TypeScript
function initPano() {
// Note: constructed panorama objects have visible: true
// set by default.
const panorama = new google.maps.StreetViewPanorama(
document.getElementById("map") as HTMLElement,
{
position: { lat: 42.345573, lng: -71.098326 },
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER,
},
linksControl: false,
panControl: false,
enableCloseButton: false,
}
);
}
declare global {
interface Window {
initPano: () => void;
}
}
window.initPano = initPano;
JavaScript
function initPano() {
// Note: constructed panorama objects have visible: true
// set by default.
const panorama = new google.maps.StreetViewPanorama(
document.getElementById("map"),
{
position: { lat: 42.345573, lng: -71.098326 },
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM_CENTER,
},
linksControl: false,
panControl: false,
enableCloseButton: false,
},
);
}
window.initPano = initPano;
सीएसएस
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
एचटीएमएल
<html>
<head>
<title>Street View Controls</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
defer
></script>
</body>
</html>
सैंपल आज़माएं
Street View डेटा को सीधे ऐक्सेस करना
हो सकता है कि आप प्रोग्राम के ज़रिए यह तय करना चाहें कि मैप/पैनोरामा में सीधे तौर पर हेर-फेर किए बिना, Street View का डेटा उपलब्ध हो या किसी पैनोरामा की जानकारी
दिखाई जाए. ऐसा करने के लिए,
StreetViewService ऑब्जेक्ट का इस्तेमाल किया जा सकता है. यह ऑब्जेक्ट, Google की Street View सेवा में स्टोर किए गए डेटा
के लिए इंटरफ़ेस उपलब्ध कराता है.
Street View सेवा के अनुरोध
Street View सेवा को ऐक्सेस करना एसिंक्रोनस होता है, क्योंकि Google Maps API को बाहरी सर्वर को कॉल करने की ज़रूरत होती है. इसलिए, अनुरोध पूरा होने के बाद उसे चलाने के लिए, आपको एक कॉलबैक तरीका पास करना होगा. यह कॉलबैक का तरीका, नतीजे को प्रोसेस करता है.
आप
StreetViewPanoRequest या
StreetViewLocationRequest का इस्तेमाल करके, StreetViewService को अनुरोध भेज सकते हैं.
StreetViewPanoRequest का इस्तेमाल करने वाला अनुरोध, पैनोरामा डेटा दिखाता है. इसे एक रेफ़रंस आईडी दिया जाता है, जो पैनोरामा की खास पहचान करता है. ध्यान दें कि
ये संदर्भ आईडी सिर्फ़ उस पैनोरामा की तस्वीरों के जीवनकाल तक ही स्थिर रहते हैं.
StreetViewLocationRequest का इस्तेमाल करने वाला अनुरोध,
नीचे दिए गए पैरामीटर का इस्तेमाल करके, किसी खास जगह पर पैनोरामा डेटा खोजता है:
locationवह जगह बताता है जहां से पैनोरामा खोजा जा सकता है. जैसे, अक्षांश और देशांतर.preferenceयह प्राथमिकता तय करता है कि दायरे में कौनसा पैनोरामा दिखना चाहिए: दी गई जगह के सबसे करीब का या उस दायरे में सबसे अच्छा पैनोरामा.radius, मीटर में तय किया गया दायरा सेट करता है. इसमें पैनोरामा खोजना है, जो दिए गए अक्षांश और देशांतर पर आधारित होता है. वैल्यू न देने पर, डिफ़ॉल्ट वैल्यू 50 होती है.sourceखोजने के लिए पैनोरामा के स्रोत के बारे में बताता है. कन्वर्ज़न के लिए मान्य डिवाइस ये हैं:default, Street View के लिए डिफ़ॉल्ट सोर्स का इस्तेमाल करता है. खोजें, सिर्फ़ कुछ खास सोर्स के लिए ही उपलब्ध हैं.outdoor, खोजों को आउटडोर कलेक्शन तक सीमित करता है. ध्यान दें, हो सकता है कि बताई गई जगह के लिए आउटडोर पैनोरामा मौजूद न हों.
Street View सेवा से मिले जवाब
Street View सेवा से नतीजा वापस पाने के बाद, getPanorama() फ़ंक्शन को लागू करने के लिए कॉलबैक फ़ंक्शन की ज़रूरत होती है. यह कॉलबैक फ़ंक्शन, StreetViewPanoramaData ऑब्जेक्ट में पैनोरामा डेटा का एक सेट और उसी क्रम में अनुरोध की स्थिति के बारे में बताने वाला एक StreetViewStatus कोड दिखाता है.
StreetViewPanoramaData ऑब्जेक्ट की खास बातों में, इस तरह के 'स्ट्रीट व्यू' पैनोरामा के बारे में मेटा-डेटा होता है:
{
"location": {
"latLng": LatLng,
"description": string,
"pano": string
},
"copyright": string,
"links": [{
"heading": number,
"description": string,
"pano": string,
"roadColor": string,
"roadOpacity": number
}],
"tiles": {
"worldSize": Size,
"tileSize": Size,
"centerHeading": number
}
}
ध्यान दें कि यह डेटा ऑब्जेक्ट, StreetViewPanorama
ऑब्जेक्ट नहीं है. इस डेटा का इस्तेमाल करके Street View ऑब्जेक्ट बनाने के लिए, आपको StreetViewPanorama बनाना होगा और setPano() को कॉल करना होगा. साथ ही, location.pano फ़ील्ड में दिए गए आईडी को पास करना होगा.
status कोड इनमें से कोई एक वैल्यू दिखा सकता है:
OKबताता है कि सेवा को कोई मिलता-जुलता पैनोरामा मिला है.ZERO_RESULTSबताता है कि सेवा को पास की गई शर्तों के साथ मिलता-जुलता पैनोरामा नहीं मिला.UNKNOWN_ERRORबताता है कि Street View के अनुरोध को प्रोसेस नहीं किया जा सका. हालांकि, इसकी सटीक वजह का पता नहीं है.
यह कोड एक StreetViewService
बनाता है, जो मार्कर बनाकर मैप पर उपयोगकर्ता के क्लिक का जवाब देता है.
क्लिक करने पर, उस जगह का StreetViewPanorama दिखता है. यह कोड, सेवा से लौटाए गए StreetViewPanoramaData
के कॉन्टेंट का इस्तेमाल करता है.
TypeScript
/*
* Click the map to set a new location for the Street View camera.
*/
let map: google.maps.Map;
let panorama: google.maps.StreetViewPanorama;
function initMap(): void {
const berkeley = { lat: 37.869085, lng: -122.254775 };
const sv = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano") as HTMLElement
);
// Set up the map.
map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
center: berkeley,
zoom: 16,
streetViewControl: false,
});
// Set the initial Street View camera to the center of the map
sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData);
// Look for a nearby Street View panorama when the map is clicked.
// getPanorama will return the nearest pano when the given
// radius is 50 meters or less.
map.addListener("click", (event) => {
sv.getPanorama({ location: event.latLng, radius: 50 })
.then(processSVData)
.catch((e) =>
console.error("Street View data not found for this location.")
);
});
}
function processSVData({ data }: google.maps.StreetViewResponse) {
const location = data.location!;
const marker = new google.maps.Marker({
position: location.latLng,
map,
title: location.description,
});
panorama.setPano(location.pano as string);
panorama.setPov({
heading: 270,
pitch: 0,
});
panorama.setVisible(true);
marker.addListener("click", () => {
const markerPanoID = location.pano;
// Set the Pano to use the passed panoID.
panorama.setPano(markerPanoID as string);
panorama.setPov({
heading: 270,
pitch: 0,
});
panorama.setVisible(true);
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
/*
* Click the map to set a new location for the Street View camera.
*/
let map;
let panorama;
function initMap() {
const berkeley = { lat: 37.869085, lng: -122.254775 };
const sv = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"),
);
// Set up the map.
map = new google.maps.Map(document.getElementById("map"), {
center: berkeley,
zoom: 16,
streetViewControl: false,
});
// Set the initial Street View camera to the center of the map
sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData);
// Look for a nearby Street View panorama when the map is clicked.
// getPanorama will return the nearest pano when the given
// radius is 50 meters or less.
map.addListener("click", (event) => {
sv.getPanorama({ location: event.latLng, radius: 50 })
.then(processSVData)
.catch((e) =>
console.error("Street View data not found for this location."),
);
});
}
function processSVData({ data }) {
const location = data.location;
const marker = new google.maps.Marker({
position: location.latLng,
map,
title: location.description,
});
panorama.setPano(location.pano);
panorama.setPov({
heading: 270,
pitch: 0,
});
panorama.setVisible(true);
marker.addListener("click", () => {
const markerPanoID = location.pano;
// Set the Pano to use the passed panoID.
panorama.setPano(markerPanoID);
panorama.setPov({
heading: 270,
pitch: 0,
});
panorama.setVisible(true);
});
}
window.initMap = initMap;
सीएसएस
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
एचटीएमएल
<html>
<head>
<title>Directly Accessing Street View Data</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map" style="width: 45%; height: 100%; float: left"></div>
<div id="pano" style="width: 45%; height: 100%; float: left"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
सैंपल आज़माएं
पसंद के मुताबिक Street View पैनोरामा उपलब्ध कराना
Maps JavaScript API, StreetViewPanorama ऑब्जेक्ट में पसंद के मुताबिक पैनोरामा दिखाने की सुविधा देता है. पसंद के मुताबिक पैनोरामा का इस्तेमाल करके, इमारतों के अंदर के हिस्से, खूबसूरत जगहों के नज़ारे या अपनी कल्पना से जुड़ी किसी भी चीज़ को दिखाया जा सकता है. यहां तक कि इन कस्टम पैनोरामा को, Google के मौजूदा Street View पैनोरामा से भी जोड़ा जा सकता है.
कस्टम पैनोरामा तस्वीरों का सेट सेट अप करने के लिए, इन चरणों को पूरा करना होता है:
- हर कस्टम पैनोरामा के लिए बेस पैनोरामिक इमेज बनाएं. यह बेस इमेज सबसे ज़्यादा रिज़ॉल्यूशन वाली ऐसी इमेज होनी चाहिए जिसके साथ आपको ज़ूम इन की गई इमेज दिखानी हो.
- (ज़रूरी नहीं, लेकिन इसका सुझाव दिया जाता है) सामान्य इमेज से अलग-अलग ज़ूम लेवल पर पैनोरामिक टाइल का सेट बनाएं.
- अपने कस्टम पैनोरामा के बीच लिंक बनाएं.
- (ज़रूरी नहीं) Google के मौजूदा Street View की तस्वीरों में "एंट्री" पैनोरामा तय करें. साथ ही, कस्टम सेट से लेकर स्टैंडर्ड सेट तक के लिंक को पसंद के मुताबिक बनाएं.
- किसी
StreetViewPanoramaDataऑब्जेक्ट में हर पैनोरामा इमेज के लिए मेटाडेटा तय करें. - ऐसा तरीका लागू करें जो कस्टम पैनोरामा डेटा और इमेज तय करे. साथ ही, उस तरीके को
StreetViewPanoramaऑब्जेक्ट में अपने कस्टम हैंडलर के तौर पर सेट करें.
नीचे दिए गए सेक्शन में इस प्रोसेस के बारे में बताया गया है.
पसंद के मुताबिक पैनोरामा बनाना
हर Street View पैनोरामा, एक इमेज या इमेज का सेट होता है,
जो किसी एक जगह से पूरा 360 डिग्री व्यू दिखाता है.
StreetViewPanorama ऑब्जेक्ट में, ऐसी इमेज इस्तेमाल की जाती हैं जो इक्वीरेक्टैंग्युलर (प्लेट कैरी) प्रोजेक्शन के मुताबिक हों. ऐसे प्रोजेक्शन में हॉरिज़ॉन्टल व्यू 360 डिग्री (पूरी तरह रैप-अराउंड) और वर्टिकल व्यू 180 डिग्री (सीधे ऊपर से सीधे नीचे) होता है. इन फ़ील्ड में इमेज दिखती है, जिसका आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) 2:1 होता है.
पूरी तरह से रैप-अराउंड पैनोरामा को नीचे दिखाया गया है.
आम तौर पर, पैनोरामा इमेज लेने के लिए एक ही जगह से कई फ़ोटो ली जाती हैं और पैनोरामा सॉफ़्टवेयर का इस्तेमाल करके, उन्हें एक साथ जोड़ा जाता है. (ज़्यादा जानकारी के लिए, विकिपीडिया का फ़ोटो स्टिचिंग ऐप्लिकेशन की तुलना देखें.) ऐसी इमेज में एक "कैमरा" जगह की जानकारी शामिल होनी चाहिए, जहां से हर पैनोरामा इमेज ली जाती है. इसके बाद, मिलने वाला 360 डिग्री वाला पैनोरामा, गोले पर दो-डाइमेंशन वाली सतह पर लिपटी हुई इमेज पर प्रोजेक्शन तय कर सकता है.
इमेज को आयताकार टाइल में बांटने और कंप्यूट किए गए टाइल कोऑर्डिनेट के आधार पर इमेज दिखाने के लिए, पैनोरामा को रेक्टैंगल कोऑर्डिनेट सिस्टम की मदद से, गोले पर प्रोजेक्शन सिस्टम की तरह इस्तेमाल करना फ़ायदेमंद होता है.
पसंद के मुताबिक पैनोरामा टाइल बनाना
Street View में ज़ूम कंट्रोल का इस्तेमाल करके, इमेज की जानकारी के अलग-अलग लेवल भी काम करते हैं. इससे, डिफ़ॉल्ट व्यू से ज़ूम इन और ज़ूम आउट किया जा सकता है. आम तौर पर, Street View किसी भी पैनोरामा इमेज के लिए, पांच लेवल का ज़ूम रिज़ॉल्यूशन उपलब्ध कराता है. अगर आपको सभी ज़ूम लेवल दिखाने के लिए, एक ही पैनोरामा इमेज का इस्तेमाल करना है, तो ज़रूरी है कि ऐसी इमेज काफ़ी बड़ी होगी और आपके ऐप्लिकेशन की रफ़्तार को काफ़ी हद तक कम कर देगी या फिर ज़्यादा ज़ूम लेवल पर इतना खराब रिज़ॉल्यूशन होगा कि आपको खराब पिक्सलेट वाली इमेज दिखेगी. हालांकि, अच्छी बात यह है कि हम मिलते-जुलते डिज़ाइन पैटर्न का इस्तेमाल कर सकते हैं. इस पैटर्न का इस्तेमाल, अलग-अलग ज़ूम लेवल पर Google के मैप टाइल को दिखाने के लिए किया जाता है. इससे, हर ज़ूम लेवल पर, पैनोरामा के लिए सही रिज़ॉल्यूशन वाली तस्वीरें उपलब्ध कराई जा सकती हैं.
जब StreetViewPanorama पहली बार लोड होता है, तो डिफ़ॉल्ट रूप से
यह ज़ूम लेवल 1 पर पैनोरामा की हॉरिज़ॉन्टल चौड़ाई का 25% (90 डिग्री का चाप) वाला इमेज दिखाता है. यह व्यू
करीब-करीब किसी सामान्य इंसान के व्यू से मेल खाता है. इस डिफ़ॉल्ट व्यू से "आउट" करने पर ज़्यादा बड़ा आर्क मिलता है,
जबकि ज़ूम इन करने से व्यू का फ़ील्ड छोटा हो जाता है. StreetViewPanorama, चुने गए ज़ूम लेवल के लिए
सही फ़ील्ड ऑफ़ व्यू का अपने-आप कैलकुलेशन करता है. इसके बाद,
उस रिज़ॉल्यूशन के हिसाब से सबसे सही तस्वीरों को चुनता है. इसके लिए,
टाइल सेट को चुना जाता है, जो करीब-करीब हॉरिज़ॉन्टल फ़ील्ड ऑफ़ व्यू के डाइमेंशन से मेल खाता है. Street View के ज़ूम लेवल पर, व्यू मैप
के ये फ़ील्ड:
| Street View का ज़ूम लेवल | फ़ील्ड ऑफ़ व्यू (डिग्री) |
|---|---|
| 0 | 180 |
| 1 (डिफ़ॉल्ट) | 90 |
| 2 | 45 |
| 3 | 22.5 |
| 4 | 11.25 |
ध्यान दें कि Street View में दिखाई गई इमेज का साइज़, पूरी तरह से Street View कंटेनर के स्क्रीन साइज़ (चौड़ाई) पर निर्भर करता है. अगर चौड़ा कंटेनर दिया जाता है, तो सेवा अब भी किसी भी ज़ूम लेवल के लिए एक ही फ़ील्ड ऑफ़ व्यू देगी. हालांकि, वह इस रिज़ॉल्यूशन के लिए ज़्यादा सही टाइल चुन सकती है.
हर पैनोरामा में इक्वीरेक्टैंग्युलर प्रोजेक्शन होता है, इसलिए, पैनोरामा टाइल बनाना आसान होता है. प्रोजेक्शन से एक इमेज मिलती है, जिसका आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) 2:1 होता है. ऐसे में, 2:1 अनुपात वाली टाइल का इस्तेमाल करना आसान होता है. हालांकि, स्क्वेयर टाइल की परफ़ॉर्मेंस बेहतर हो सकती है. इसकी वजह यह है कि स्क्वेयर मैप पर स्क्वेयर टाइल की परफ़ॉर्मेंस होती है. इसकी वजह यह है कि व्यू का फ़ील्ड स्क्वेयर होगा.
2:1 टाइल के लिए, पूरे पैनोरामा को शामिल करने वाली एक इमेज, ज़ूम लेवल 0 पर पूरे पैनोरामा "वर्ल्ड" (बेस इमेज) को दिखाती है. हर ज़ूम लेवल के बढ़ते हुए ज़ूम लेवल पर, 4zoomLevel टाइल मिलते हैं. (उदाहरण के लिए, ज़ूम लेवल 2 पर, पूरे पैनोरामा में 16 टाइल होती हैं.) ध्यान दें: Street View कंट्रोल में दिए गए ज़ूम लेवल की टाइल, सीधे तौर पर ज़ूम लेवल से मेल नहीं खाती हैं. इसके बजाय, Street View कंट्रोल के ज़ूम लेवल, फ़ील्ड के व्यू (एफ़ओवी) को चुनते हैं, जिससे सही टाइल चुनी जाती हैं.
आम तौर पर, इमेज टाइल को नाम दिया जाता है, ताकि उन्हें प्रोग्राम के हिसाब से चुना जा सके. नाम रखने के इस तरीके के बारे में, पसंद के मुताबिक बनाए गए पैनोरामा के अनुरोधों को मैनेज करना लेख में बताया गया है.
पसंद के मुताबिक पैनोरामा के अनुरोधों को मैनेज करना
अपने हिसाब से पैनोरामा का इस्तेमाल करने के लिए, StreetViewPanorama.registerPanoProvider() पर कॉल करें. साथ ही, पैनोरामा की सुविधा देने वाले कस्टम तरीके का नाम बताएं. पैनोरामा की सुविधा देने वाले तरीके को,
StreetViewPanoramaData ऑब्जेक्ट दिखाना चाहिए. साथ ही, इस तरीके का
सिग्नेचर यह होना चाहिए:
Function(pano):StreetViewPanoramaData
StreetViewPanoramaData इस फ़ॉर्म का एक ऑब्जेक्ट है:
{
copyright: string,
location: {
description: string,
latLng: google.maps.LatLng,
pano: string
},
tiles: {
tileSize: google.maps.Size,
worldSize: google.maps.Size,
heading: number,
getTileUrl: Function
},
links: [
description: string,
heading: number,
pano: string,
roadColor: string,
roadOpacity: number
]
}
कस्टम पैनोरामा को इस तरह दिखाएं:
StreetViewPanoramaOptions.panoप्रॉपर्टी को कस्टम वैल्यू पर सेट करें.- पैनोरामा प्रोवाइडर का फ़ंक्शन उपलब्ध कराने के लिए,
StreetViewPanorama.registerPanoProvider()को कॉल करें. panoकी तय की गई वैल्यू को मैनेज करने के लिए, कस्टम पैनोरामा प्रोवाइडर फ़ंक्शन लागू करें.- एक
StreetViewPanoramaDataऑब्जेक्ट बनाएं. StreetViewTileData.getTileUrlप्रॉपर्टी को उस कस्टम टाइल प्रोवाइडर फ़ंक्शन के नाम पर सेट करें जिसे आपने उपलब्ध कराया है. उदाहरण के लिए,getCustomPanoramaTileUrl.- अपनी पसंद के मुताबिक टाइल प्रोवाइडर फ़ंक्शन लागू करें, जैसा कि नीचे दिए गए उदाहरणों में दिखाया गया है.
StreetViewPanoramaDataऑब्जेक्ट दिखाएं.
ध्यान दें: जब आप कस्टम पैनोरामा दिखाने के लिए चाहें, तो सीधे StreetViewPanorama पर
position सेट न करें. ऐसा करने से, Street View की सेवा को उस जगह के पास मौजूद, Street View की डिफ़ॉल्ट तस्वीरों के लिए अनुरोध करने का
निर्देश मिलेगा. इसके बजाय, कस्टम StreetViewPanoramaData ऑब्जेक्ट के
location.latLng फ़ील्ड में यह पोज़िशन सेट करें.
नीचे दिए गए उदाहरण में, Google के सिडनी ऑफ़िस का कस्टम पैनोरामा दिखाया गया है. ध्यान दें कि इस उदाहरण में मैप या Street View की डिफ़ॉल्ट तस्वीरों का इस्तेमाल नहीं किया गया है:
TypeScript
function initPano() {
// Set up Street View and initially set it visible. Register the
// custom panorama provider function. Set the StreetView to display
// the custom panorama 'reception' which we check for below.
const panorama = new google.maps.StreetViewPanorama(
document.getElementById("map") as HTMLElement,
{ pano: "reception", visible: true }
);
panorama.registerPanoProvider(getCustomPanorama);
}
// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(
pano: string,
zoom: number,
tileX: number,
tileY: number
): string {
return (
"https://developers.google.com/maps/documentation/javascript/examples/full/images/" +
"panoReception1024-" +
zoom +
"-" +
tileX +
"-" +
tileY +
".jpg"
);
}
// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano: string): google.maps.StreetViewPanoramaData {
if (pano === "reception") {
return {
location: {
pano: "reception",
description: "Google Sydney - Reception",
},
links: [],
// The text for the copyright control.
copyright: "Imagery (c) 2010 Google",
// The definition of the tiles for this panorama.
tiles: {
tileSize: new google.maps.Size(1024, 512),
worldSize: new google.maps.Size(2048, 1024),
// The heading in degrees at the origin of the panorama
// tile set.
centerHeading: 105,
getTileUrl: getCustomPanoramaTileUrl,
},
};
}
// @ts-ignore TODO fix typings
return null;
}
declare global {
interface Window {
initPano: () => void;
}
}
window.initPano = initPano;
JavaScript
function initPano() {
// Set up Street View and initially set it visible. Register the
// custom panorama provider function. Set the StreetView to display
// the custom panorama 'reception' which we check for below.
const panorama = new google.maps.StreetViewPanorama(
document.getElementById("map"),
{ pano: "reception", visible: true },
);
panorama.registerPanoProvider(getCustomPanorama);
}
// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
return (
"https://developers.google.com/maps/documentation/javascript/examples/full/images/" +
"panoReception1024-" +
zoom +
"-" +
tileX +
"-" +
tileY +
".jpg"
);
}
// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano) {
if (pano === "reception") {
return {
location: {
pano: "reception",
description: "Google Sydney - Reception",
},
links: [],
// The text for the copyright control.
copyright: "Imagery (c) 2010 Google",
// The definition of the tiles for this panorama.
tiles: {
tileSize: new google.maps.Size(1024, 512),
worldSize: new google.maps.Size(2048, 1024),
// The heading in degrees at the origin of the panorama
// tile set.
centerHeading: 105,
getTileUrl: getCustomPanoramaTileUrl,
},
};
}
// @ts-ignore TODO fix typings
return null;
}
window.initPano = initPano;
सीएसएस
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
एचटीएमएल
<html>
<head>
<title>Custom Street View Panoramas</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="map"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
defer
></script>
</body>
</html>
सैंपल आज़माएं
पसंद के मुताबिक पैनोरामा की सेवा देने वाली कंपनी, पास किए गए पैनोरामा आईडी, ज़ूम लेवल, और पैनोरामा टाइल कोऑर्डिनेट के आधार पर सही टाइल दिखाती है.
इमेज का चुनाव, पास की गई इन वैल्यू पर निर्भर करता है. इसलिए, जिन इमेज को पास की गई वैल्यू के आधार पर प्रोग्राम के ज़रिए चुना जा सकता है उन्हें pano_zoom_tileX_tileY.png जैसे नाम के साथ प्रोग्राम के ज़रिए चुना जा सकता है.
नीचे दिए गए उदाहरण में, इमेज में एक और ऐरो जोड़ा गया है. साथ ही, डिफ़ॉल्ट Street View नेविगेशन ऐरो के अलावा, Google Sydney और कस्टम तस्वीरों के लिंक के लिंक भी जोड़े गए हैं:
TypeScript
let panorama: google.maps.StreetViewPanorama;
// StreetViewPanoramaData of a panorama just outside the Google Sydney office.
let outsideGoogle: google.maps.StreetViewPanoramaData;
// StreetViewPanoramaData for a custom panorama: the Google Sydney reception.
function getReceptionPanoramaData(): google.maps.StreetViewPanoramaData {
return {
location: {
pano: "reception", // The ID for this custom panorama.
description: "Google Sydney - Reception",
latLng: new google.maps.LatLng(-33.86684, 151.19583),
},
links: [
{
heading: 195,
description: "Exit",
pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano,
},
],
copyright: "Imagery (c) 2010 Google",
tiles: {
tileSize: new google.maps.Size(1024, 512),
worldSize: new google.maps.Size(2048, 1024),
centerHeading: 105,
getTileUrl: function (
pano: string,
zoom: number,
tileX: number,
tileY: number
): string {
return (
"https://developers.google.com/maps/documentation/javascript/examples/full/images/" +
"panoReception1024-" +
zoom +
"-" +
tileX +
"-" +
tileY +
".jpg"
);
},
},
};
}
function initPanorama() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById("street-view") as HTMLElement,
{ pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano }
);
// Register a provider for the custom panorama.
panorama.registerPanoProvider(
(pano: string): google.maps.StreetViewPanoramaData => {
if (pano === "reception") {
return getReceptionPanoramaData();
}
// @ts-ignore TODO fix typings
return null;
}
);
// Add a link to our custom panorama from outside the Google Sydney office.
panorama.addListener("links_changed", () => {
if (
panorama.getPano() ===
(outsideGoogle.location as google.maps.StreetViewLocation).pano
) {
panorama.getLinks().push({
description: "Google Sydney",
heading: 25,
pano: "reception",
});
}
});
}
function initMap(): void {
// Use the Street View service to find a pano ID on Pirrama Rd, outside the
// Google office.
new google.maps.StreetViewService()
.getPanorama({ location: { lat: -33.867386, lng: 151.195767 } })
.then(({ data }: google.maps.StreetViewResponse) => {
outsideGoogle = data;
initPanorama();
});
}
declare global {
interface Window {
initMap: () => void;
}
}
window.initMap = initMap;
JavaScript
let panorama;
// StreetViewPanoramaData of a panorama just outside the Google Sydney office.
let outsideGoogle;
// StreetViewPanoramaData for a custom panorama: the Google Sydney reception.
function getReceptionPanoramaData() {
return {
location: {
pano: "reception",
description: "Google Sydney - Reception",
latLng: new google.maps.LatLng(-33.86684, 151.19583),
},
links: [
{
heading: 195,
description: "Exit",
pano: outsideGoogle.location.pano,
},
],
copyright: "Imagery (c) 2010 Google",
tiles: {
tileSize: new google.maps.Size(1024, 512),
worldSize: new google.maps.Size(2048, 1024),
centerHeading: 105,
getTileUrl: function (pano, zoom, tileX, tileY) {
return (
"https://developers.google.com/maps/documentation/javascript/examples/full/images/" +
"panoReception1024-" +
zoom +
"-" +
tileX +
"-" +
tileY +
".jpg"
);
},
},
};
}
function initPanorama() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById("street-view"),
{ pano: outsideGoogle.location.pano },
);
// Register a provider for the custom panorama.
panorama.registerPanoProvider((pano) => {
if (pano === "reception") {
return getReceptionPanoramaData();
}
// @ts-ignore TODO fix typings
return null;
});
// Add a link to our custom panorama from outside the Google Sydney office.
panorama.addListener("links_changed", () => {
if (panorama.getPano() === outsideGoogle.location.pano) {
panorama.getLinks().push({
description: "Google Sydney",
heading: 25,
pano: "reception",
});
}
});
}
function initMap() {
// Use the Street View service to find a pano ID on Pirrama Rd, outside the
// Google office.
new google.maps.StreetViewService()
.getPanorama({ location: { lat: -33.867386, lng: 151.195767 } })
.then(({ data }) => {
outsideGoogle = data;
initPanorama();
});
}
window.initMap = initMap;
सीएसएस
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#street-view {
height: 100%;
}
एचटीएमएल
<html>
<head>
<title>Custom Street View Panorama Tiles</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<div id="street-view"></div>
<!--
The `defer` attribute causes the callback to execute after the full HTML
document has been parsed. For non-blocking uses, avoiding race conditions,
and consistent behavior across browsers, consider loading using Promises.
See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
defer
></script>
</body>
</html>