Street View सेवा

खास जानकारी

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

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 पेगमैन कंट्रोल दिखता है जो नेविगेशन (ज़ूम और पैन) कंट्रोल में इंटिग्रेट किए गए हों. आप इसे छिपा सकते हैं मैप के MapOptions में नियंत्रण को सेट करके false के लिए streetViewControl. आप यह भी बदल सकते हैं Street View कंट्रोल की डिफ़ॉल्ट स्थिति Map का streetViewControlOptions.position सेट कर रही हूँ प्रॉपर्टी को नए ControlPosition में ले जाना.

सड़क दृश्य पेगमैन नियंत्रण से आप सड़क दृश्य देख सकते हैं पैनोरामा को सीधे मैप से देख सकते हैं. जब उपयोगकर्ता पेगमैन को क्लिक करके रखता है, Street View की सुविधा वाले सड़कों के आस-पास की नीली आउटलाइन दिखाने के लिए, मैप अपडेट हो जाता है. Google Maps ऐप्लिकेशन जैसा ही उपयोगकर्ता अनुभव देते हैं.

जब उपयोगकर्ता पेगमैन मार्कर को किसी सड़क पर छोड़ता है, तो मैप दिखाई गई जगह का Street View पैनोरामा दिखा सकता है.

Street View पैनोरामा

Street View की तस्वीरें लेने के लिए, StreetViewPanorama ऑब्जेक्ट, जो एपीआई की सुविधा देता है इंटरफ़ेस को Street View "व्यूअर" के तौर पर जोड़ सकता है. हर मैप में एक डिफ़ॉल्ट मैप होता है सड़क दृश्य पैनोरामा, जिसे आप मैप की getStreetView() विधि. Street View जोड़ने पर मैप पर streetViewControl सेट करके कंट्रोल करें true का विकल्प. इससे पेगमैन अपने-आप कनेक्ट हो जाता है इस डिफ़ॉल्ट स्ट्रीट व्यू पैनोरामा को कंट्रोल कर सकते हैं.

अपना खुद का StreetViewPanorama भी बनाया जा सकता है ऑब्जेक्ट बनाएं और मैप को डिफ़ॉल्ट के बजाय उसका इस्तेमाल करने के लिए, मैप की streetView प्रॉपर्टी को साफ़ तौर पर इस पर सेट कर रहा है कोई ऐसी चीज़ हो सकती है. आप डिफ़ॉल्ट पैनोरामा को बदल सकते है डिफ़ॉल्ट व्यवहार में बदलाव करना है, जैसे कि अपने आप मैप और पैनोरामा के बीच ओवरले शेयर करना. (देखें Street View के अंदर ओवरले नीचे दिए गए हैं.)

Street View कंटेनर

इसके बजाय, आपके पास StreetViewPanorama को दिखाने का विकल्प है जो अक्सर <div> एलिमेंट में होता है. बस StreetViewPanorama के अंदर डीओएम एलिमेंट पास करें कंस्ट्रक्टर है. इमेज को बढ़िया तरीके से दिखाने के लिए, हमारा सुझाव है कि इमेज का कम से कम साइज़ 200 पिक्सल x 200 पिक्सल.

नोट: हालांकि सड़क दृश्य इस सुविधा को मैप के साथ इस्तेमाल करने के लिए डिज़ाइन किया गया है, इस्तेमाल करने की ज़रूरत नहीं है. आप किसी स्टैंडअलोन Street View ऑब्जेक्ट का इस्तेमाल कर सकते हैं होना चाहिए.

Street View की जगहें और पॉइंट-ऑफ़-व्यू (POV)

StreetViewPanorama कंस्ट्रक्टर की मदद से, Street View की जगह की जानकारी और व्यू सेट करने के लिए, StreetViewOptions पैरामीटर. इस समय के बाद, ऑब्जेक्ट पर setPosition() और setPov() को कॉल किया जा सकता है उसकी जगह और POV बदलने के लिए काफ़ी हद तक तैयार है.

Street View की जगह की जानकारी से, कैमरे के फ़ोकस की जगह तय होती है चित्र के लिए, लेकिन यह कैमरे के ओरिएंटेशन को परिभाषित नहीं करता है उस इमेज के लिए. इस मकसद से, StreetViewPov ऑब्जेक्ट दो प्रॉपर्टी के बारे में बताता है:

  • heading (डिफ़ॉल्ट 0), रोटेशन एंगल के बारे में बताता है कैमरे की जगह के आस-पास की जगह को, सही उत्तर की ओर से डिग्री में देखा जा सकता है. टाइटल ये हैं घड़ी की सुई की दिशा में मापा गया (90 डिग्री पूर्व दिशा में है).
  • pitch (डिफ़ॉल्ट 0), ऐंगल वैरियंस तय करता है "ऊपर" या "कम" कैमरे की शुरुआती डिफ़ॉल्ट पिच से हमेशा नहीं) फ़्लैट हॉरिज़ॉन्टल. (उदाहरण के लिए, पहाड़ी पर ली गई इमेज डिफ़ॉल्ट तौर पर ऐसी पिच दिखाई जा सकती है जो हॉरिज़ॉन्टल न हो.) पिच कोण को सकारात्मक मान के साथ मापा जाता है (+90 डिग्री सीधे ऊपर और डिफ़ॉल्ट पिच के लिए ऑर्थोगोनल) और नेगेटिव वैल्यू (यानी -90 तक) डिफ़ॉल्ट पिच के लिए सीधे डिग्री नीचे और ऑर्थोगनल).

StreetViewPov ऑब्जेक्ट का इस्तेमाल अक्सर यह पता लगाने के लिए किया जाता है कि Street View कैमरे का पॉइंट ऑफ़ व्यू. यह भी तय किया जा सकता है कि फ़ोटोग्राफ़र का पॉइंट-ऑफ़-व्यू — आम तौर पर, कार या ट्राइक का सामना करना पड़ रहा था — StreetViewPanorama.getPhotographerPov() तरीका.

नीचे दिया गया कोड, बॉस्टन का एक मैप दिखाता है. इसमें फ़ेनवे का शुरुआती व्यू दिखाया गया है पार्क. पेगमैन को चुनें और उसे मैप पर समर्थित स्थान पर खींचकर छोड़ें Street View का पैनोरामा बदल देगा:

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;
index.ts

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;
index.js

सीएसएस

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map,
#pano {
  float: left;
  height: 100%;
  width: 50%;
}

style.css

एचटीएमएल

<html>
  <head>
    <title>Street View split-map-panes</title>

    <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 script 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>
index.html
उदाहरण देखें

सैंपल आज़माएं

मोबाइल डिवाइस पर मोशन ट्रैकिंग

जिन डिवाइसों पर डिवाइस ओरिएंटेशन इवेंट काम करते हैं उन पर एपीआई, उपयोगकर्ताओं को में हलचल के आधार पर सड़क दृश्य का नज़रिया बदलने की क्षमता डिवाइस. उपयोगकर्ता अपने डिवाइसों को इधर-उधर ले जाकर, आस-पास की जगहें देख सकते हैं. इसे मोशन कहा जाता है ट्रैकिंग या डिवाइस रोटेशन ट्रैकिंग का उपयोग करते हैं.

ऐप्लिकेशन डेवलपर के तौर पर, डिफ़ॉल्ट ऐक्शन को इस तरह बदला जा सकता है:

  • मोशन ट्रैकिंग की सुविधा को चालू या बंद करें. डिफ़ॉल्ट रूप से, मोशन ट्रैकिंग को सपोर्ट करने वाले हर डिवाइस पर ट्रैकिंग चालू हो जाएगी. नीचे दिया गया सैंपल इससे मोशन ट्रैकिंग बंद हो जाती है, लेकिन मोशन ट्रैकिंग कंट्रोल दिखता रहता है. (ध्यान दें कि उपयोगकर्ता, कंट्रोल पर टैप करके मोशन ट्रैकिंग की सुविधा चालू कर सकता है.) 
    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 पैनोरामा में हॉरिज़ॉन्टल प्लेन.

वर्तमान में, सड़क दृश्य पर समर्थित ओवरले के प्रकार पैनोरामा Marker, InfoWindow और कस्टम OverlayView. मैप पर दिखाए जाने वाले ओवरले पैनोरामा को विकल्प के रूप में स्वीकार करके, उसे Street View पैनोरामा पर नहीं दिखाया जा सकता है Map ऑब्जेक्ट के लिए, setMap() को कॉल करने के बाद पास StreetViewPanorama को मैप के बजाय तर्क के रूप में डालें. इन्फ़ो कॉल करके Street View पैनोरामा की मदद से, इसी तरह की विंडो खोली जा सकती हैं open(), इसकी जगह StreetViewPanorama() को पास कर रहा है एक मैप.

इसके अलावा, डिफ़ॉल्ट मैपों के साथ मैप बनाते समय StreetViewPanorama, मैप पर बनाए गए सभी मार्कर शेयर किए जाते हैं साथ ही, मैप से जुड़े Street View पैनोरामा की सुविधा भी देता है. हालांकि, इसके लिए यह ज़रूरी है कि तो पैनोरामा दृश्यमान होता है. डिफ़ॉल्ट सड़क दृश्य पैनोरामा पुनर्प्राप्त करने के लिए, कॉल करें Map ऑब्जेक्ट पर getStreetView(). ध्यान दें कि अगर मैप की streetView प्रॉपर्टी को साफ़ तौर पर अपने निर्माण का StreetViewPanorama, आप ओवरराइड करेंगे डिफ़ॉल्ट पैनोरामा पर क्लिक करें.

नीचे दिए गए उदाहरण में, आस-पास की अलग-अलग जगहों के बारे में बताने वाले मार्कर दिखाए गए हैं ऐस्टर प्लेस, दिल्ली. यह दिखाने के लिए स्ट्रीट व्यू पर डिसप्ले टॉगल करें StreetViewPanorama में दिखाए जा रहे शेयर किए गए मार्कर.

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

  const cafeIcon = document.createElement("img");
  cafeIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/cafe_icon.svg";

  const dollarIcon = document.createElement("img");
  dollarIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/bank_icon.svg";

  const busIcon = document.createElement("img");
  busIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/bus_icon.svg";


  // Set up the markers on the map
  const cafeMarker = new google.maps.Marker({
    position: { lat: 40.730031, lng: -73.991428 },
    map,
    title: "Cafe",
    icon: cafeIcon.src,
  });

  const bankMarker = new google.maps.Marker({
    position: { lat: 40.729681, lng: -73.991138 },
    map,
    title: "Bank",
    icon: dollarIcon.src,
  });

  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    title: "Bus Stop",
    icon: busIcon.src,
  });

  // 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;
index.ts

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

  const cafeIcon = document.createElement("img");

  cafeIcon.src =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/cafe_icon.svg";

  const dollarIcon = document.createElement("img");

  dollarIcon.src =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/bank_icon.svg";

  const busIcon = document.createElement("img");

  busIcon.src =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/bus_icon.svg";

  // Set up the markers on the map
  const cafeMarker = new google.maps.Marker({
    position: { lat: 40.730031, lng: -73.991428 },
    map,
    title: "Cafe",
    icon: cafeIcon.src,
  });
  const bankMarker = new google.maps.Marker({
    position: { lat: 40.729681, lng: -73.991138 },
    map,
    title: "Bank",
    icon: dollarIcon.src,
  });
  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    title: "Bus Stop",
    icon: busIcon.src,
  });

  // 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;
index.js

सीएसएस

/* 
 * 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;
}

style.css

एचटीएमएल

<html>
  <head>
    <title>Overlays Within Street View</title>

    <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 script 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&libraries=marker&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
उदाहरण देखें

सैंपल आज़माएं

Street View इवेंट

सड़क दृश्य के बीच नेविगेट करते समय या इसके साथ छेड़छाड़ करते समय ओरिएंटेशन के साथ, हो सकता है कि आप कई ऐसी घटनाओं की निगरानी करना चाहें जो StreetViewPanorama की स्थिति में बदलाव आएगा:

  • अलग-अलग पैनो होने पर pano_changed सक्रिय हो जाता है आईडी में किए गए बदलाव. यह इवेंट इस बात की गारंटी नहीं देता कि इस इवेंट के समय के हिसाब से, पैनोरामा (जैसे कि लिंक) भी बदल गया है ट्रिगर होता है; इस इवेंट से सिर्फ़ यह पता चलता है कि पैनो आईडी बदल गया है. ध्यान दें कि पैनो आईडी (जिसका उपयोग आप संदर्भ के लिए कर सकते हैं) यह पैनोरामा) केवल वर्तमान ब्राउज़र सत्र में स्थिर है.
  • जब भी बुनियादी पैरामीटर के तौर पर सेट किया जाता है, तब position_changed ट्रिगर होता है (LatLng) पैनोरामा की स्थिति बदल जाती है. रोटेटिंग एक पैनोरामा इस इवेंट को ट्रिगर नहीं करेगा. ध्यान दें कि आपके पास उससे जुड़ी ऐसेट को बदले बिना, पैनोरामा की बुनियादी जगह पैनो आईडी, क्योंकि API अपने आप पैनोरामा आईडी को पैनोरामा की स्थिति तक पहुंचा सकता है.
  • जब भी Street View की इमेज शुरू होती है, तब pov_changed ट्रिगर हो जाता है StreetViewPov बदलाव. ध्यान दें कि यह इवेंट ट्रिगर हो सकता है जबकि स्थिति और पैनो आईडी स्थिर रहते हैं.
  • जब भी 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;
index.ts

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;
index.js

सीएसएस

/* 
 * 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;
}

style.css

एचटीएमएल

<html>
  <head>
    <title>Street View Events</title>

    <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">&nbsp;</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">&nbsp;</td>
        </tr>
        <table id="links_table"></table>
      </table>
    </div>

    <!-- 
      The `defer` attribute causes the script 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>
index.html
उदाहरण देखें

सैंपल आज़माएं

Street View कंट्रोल

StreetViewPanorama दिखाते समय, कई तरह के कंट्रोल, डिफ़ॉल्ट रूप से पैनोरामा पर दिखते हैं. आप इसे चालू या बंद कर सकते हैं यह कंट्रोल करने के लिए, StreetViewPanoramaOptions true या false को:

  • panControl पैनोरामा. यह कंट्रोल डिफ़ॉल्ट रूप से, स्टैंडर्ड इंटिग्रेटेड कंपास के तौर पर दिखता है और पैन कंट्रोल करें. कंट्रोल की जगह बदली जा सकती है. इसके लिए, PanControlOptions panControlOptions फ़ील्ड.
  • zoomControl की मदद से, इमेज को ज़ूम किया जा सकता है. यह नियंत्रण, पैनोरामा के नीचे दाईं ओर डिफ़ॉल्ट रूप से दिखाई देता है. कंट्रोल का रंग-रूप बदला जा सकता है. इसके लिए, ZoomControlOptions zoomControlOptions फ़ील्ड.
  • addressControl एक टेक्स्ट वाला ओवरले देता है, जो संबंधित स्थान का पता और एक लिंक उपलब्ध कराता है, जहां से Google मैप में स्थान. कंट्रोल का रंग-रूप बदला जा सकता है. इसके लिए, StreetViewAddressControlOptions addressControlOptions फ़ील्ड.
  • fullscreenControl पर आपको Street View खोलने का विकल्प मिलता है फ़ुलस्क्रीन मोड में देखना चाहिए. कंट्रोल का रंग-रूप बदला जा सकता है. इसके लिए, FullscreenControlOptions fullscreenControlOptions फ़ील्ड.
  • motionTrackingControl को चालू करने का विकल्प मिलता है या मोबाइल डिवाइस पर मोशन ट्रैकिंग को बंद कर देती हूँ. यह कंट्रोल सिर्फ़ दिखेगा पर काम करता है. डिफ़ॉल्ट रूप से, कंट्रोल पैनोरामा के नीचे दाईं ओर दिखाई देता है. कंट्रोल वाली विंडो में MotionTrackingControlOptions देकर पोज़िशन. ज़्यादा जानकारी के लिए, मोशन ट्रैकिंग.
  • linksControl, इमेज पर गाइड ऐरो का इस्तेमाल करता है आस-पास के पैनोरामा फ़ोटो पर नेविगेट करना.
  • बंद नियंत्रण से उपयोगकर्ता सड़क दृश्य व्यूअर को बंद कर सकता है. आप सेटिंग में जाकर, 'बंद करें' सेटिंग को चालू या बंद करें 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;
index.ts

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;
index.js

सीएसएस

/* 
 * 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;
}

style.css

एचटीएमएल

<html>
  <head>
    <title>Street View Controls</title>

    <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 script 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>
index.html
उदाहरण देखें

सैंपल आज़माएं

Street View का डेटा सीधे ऐक्सेस करना

प्रोग्राम बनाकर, यह तय किया जा सकता है कि सड़क दृश्य डेटा, या विशेष पैनोरमा के बारे में जानकारी दें, इसके लिए, मैप/पैनोरामा में सीधे तौर पर छेड़छाड़ करने की ज़रूरत नहीं होती. आप ऐसा कर सकते हैं StreetViewService ऑब्जेक्ट का इस्तेमाल करके, जो इंटरफ़ेस किया जा सकता है.

Street View सेवा के अनुरोध

Google Maps API के ज़रिए, Street View सेवा को ऐक्सेस करने की प्रोसेस एसिंक्रोनस होती है किसी बाहरी सर्वर को कॉल करने की आवश्यकता है. इस वजह से, आपको ज़रूरी शर्तें पूरी करनी होंगी कॉलबैक तरीका, जिसे अनुरोध पूरा होने पर एक्ज़ीक्यूट किया जा सके. यह कॉलबैक का तरीका नतीजे को प्रोसेस करता है.

StreetViewService को अनुरोध भेजने के लिए, इनका इस्तेमाल किया जा सकता है StreetViewPanoRequest या StreetViewLocationRequest.

StreetViewPanoRequest का इस्तेमाल करने पर, पैनोरामा व्यू मिलता है डेटा को एक रेफ़रंस आईडी दिया जाता है, जो पैनोरामा की खास पहचान करता है. ध्यान दें कि ये रेफ़रंस आईडी सिर्फ़ तब तक स्थिर रहेंगे, जब तक पैनोरामा.

StreetViewLocationRequest का इस्तेमाल करके अनुरोध करने पर, ये नतीजे मिलते हैं नीचे दिए गए पैरामीटर का इस्तेमाल करके, किसी खास जगह पर पैनोरामा डेटा देख सकते हैं:

  • location खोजने के लिए स्थान (अक्षांश और देशांतर) बताता है शामिल किया जा सकता है.
  • preference यह प्राथमिकता सेट करता है कि किस पैनोरामा में देखा जाना चाहिए दायरा: दिए गए स्थान से सबसे नज़दीक या दायरे में मौजूद सबसे अच्छी जगह.
  • radius मीटर में एक दायरा सेट करता है, जिसमें पैनोरामा से खोज करनी है, जो दिए गए अक्षांश और देशांतर पर आधारित होता है. जानकारी न देने पर, यह डिफ़ॉल्ट वैल्यू 50 होती है.
  • source यह बताता है कि पैनोरामा किस सोर्स से खोजे जाते हैं. मान्य वैल्यू ये हैं:
    • default, Street View के लिए डिफ़ॉल्ट सोर्स का इस्तेमाल करता है; खोजने के लिए सिर्फ़ खास सोर्स तक सीमित नहीं.
    • outdoor, खोजों को आउटडोर कलेक्शन तक सीमित करता है. ध्यान दें कि हो सकता है कि बताए गए स्थान के लिए आउटडोर पैनोरामा मौजूद न हों.

Street View सेवा से मिले जवाब

फ़ंक्शन getPanorama() नतीजा वापस पाने के बाद, उसे एक्ज़ीक्यूट करने के लिए कॉलबैक फ़ंक्शन की ज़रूरत होती है से हटा दिया जाएगा. यह कॉलबैक फ़ंक्शन StreetViewPanoramaData ऑब्जेक्ट में पैनोरामा डेटा और अनुरोध की स्थिति को दिखाता StreetViewStatus कोड उस क्रम में.

StreetViewPanoramaData ऑब्जेक्ट स्पेसिफ़िकेशन में यह शामिल है इस फ़ॉर्म के Street View पैनोरामा का मेटा-डेटा:

{
  "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;
index.ts

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;
index.js

सीएसएस

/* 
 * 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;
}

style.css

एचटीएमएल

<html>
  <head>
    <title>Directly Accessing Street View Data</title>

    <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 script 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>
index.html
उदाहरण देखें

सैंपल आज़माएं

पसंद के मुताबिक Street View पैनोरामा उपलब्ध कराना

Maps JavaScript API कस्टम पैनोरामा दिखाने की सुविधा देता है StreetViewPanorama ऑब्जेक्ट में. कस्टम सेटिंग का इस्तेमाल किया जा रहा है पैनोरामा से, इमारतों के अंदरूनी हिस्से, खूबसूरत जगहें या अपनी कल्पनाओं से तैयार की गई किसी भी चीज़ के लिए. यहाँ तक कि इन कस्टम पैनोरामा को Google के मौजूदा Street View से लिंक करें दिखाई देता है.

कस्टम पैनोरामा इमेजरी का सेट सेट अप करने में इसके लिए, नीचे दिया गया तरीका अपनाएं:

  • हर कस्टम पैनोरामा के लिए बेस पैनोरामिक इमेज बनाएं. यह बेस इमेज का रिज़ॉल्यूशन सबसे ज़्यादा होना चाहिए, आपको ज़ूम इन की गई इमेज दिखानी है.
  • (ज़रूरी नहीं, लेकिन सुझाया गया) पैनोरामिक टाइल का एक सेट बनाएं पर क्लिक करें.
  • अपनी पसंद के मुताबिक बनाए गए पैनोरामा के बीच लिंक बनाएं.
  • (ज़रूरी नहीं) "एंट्री" तय करें इसके अंदर के पैनोरामा Google की मौजूदा Street View तस्वीरें और लिंक को पसंद के मुताबिक बनाएं कस्टम सेट में से या स्टैंडर्ड सेट से.
  • हर पैनोरामा इमेज के लिए मेटाडेटा तय करना StreetViewPanoramaData ऑब्जेक्ट में.
  • कस्टम पैनोरामा तय करने का तरीका लागू करें डेटा और इमेज सेट कर सकते हैं और उस तरीके को अपने कस्टम हैंडलर के तौर पर तय कर सकते हैं StreetViewPanorama ऑब्जेक्ट में.

नीचे दिए सेक्शन में इस प्रोसेस के बारे में बताया गया है.

कस्टम पैनोरामा बनाना

हर Street View पैनोरामा, एक इमेज या कई इमेज का सेट होता है जो एक ही जगह से पूरा 360 डिग्री व्यू देती है. StreetViewPanorama ऑब्जेक्ट ऐसी इमेज का इस्तेमाल करता है जो इक्वीरेक्टेंगुलर (प्लेट) के मुताबिक होती हैं कैरी) प्रोजेक्शन. इस तरह के प्रोजेक्शन में 360 डिग्री होता है का हॉरिज़ॉन्टल व्यू (पूरा रैप-अराउंड) और 180 डिग्री वर्टिकल व्यू (सीधे ऊपर से सीधे नीचे). ये फ़ील्ड 2:1 के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) वाली इमेज में व्यू के नतीजे का प्रतिशत. ऐप्लिकेशन पूरा रैप-अराउंड पैनोरामा नीचे दिखाया गया है.

शहर की सड़क का पैनोरामा व्यू

पैनोरामा इमेज आम तौर पर एक से ज़्यादा इमेज लेकर फ़ोटो कहां से ली गई हैं और उन्हें जोड़ने के लिए पैनोरामा सॉफ़्टवेयर. (Wikipedia की ज़्यादा जानकारी के लिए, फ़ोटो स्टिचिंग ऐप्लिकेशन की तुलना.) इस तरह की इमेज में सिर्फ़ एक "कैमरा" शामिल होना चाहिए जगह, जिससे हर पैनोरामा इमेज ली जाती है. कॉन्टेंट बनाने इससे 360 डिग्री का पैनोरामा प्रोजेक्शन चालू कर सकता है एक स्फ़ीयर, जिसमें इमेज को दो-डाइमेंशन वाली सतह पर रैप किया गया है बनाए रखें.

स्फ़ीर, जिसकी सतह पर सड़क का पैनोरामा व्यू है

गोल आकार के साथ पैनोरामा को आयताकार बनाना इमेज को इनमें बांटने पर, निर्देशांक सिस्टम फ़ायदेमंद होता है टाइल को सीधा करना और कंप्यूट की गई टाइल के आधार पर इमेज दिखाना निर्देशांक.

अपनी पसंद के हिसाब से पैनोरामा टाइल बनाना

Street View, इमेज की जानकारी के अलग-अलग लेवल के साथ भी काम करता है जो आपको ज़ूम इन और ज़ूम आउट करने के लिए डिफ़ॉल्ट व्यू. आम तौर पर, Street View की मदद से किसी भी दी गई पैनोरामा इमेज के लिए ज़ूम रिज़ॉल्यूशन के लेवल. अगर आपको यहां जाना था सभी ज़ूम लेवल दिखाने के लिए एक ही पैनोरामा इमेज का इस्तेमाल करना चाहिए, जैसे कि कोई इमेज या तो काफ़ी बड़ा होगा और काफ़ी धीमा हो जाएगा या उच्च ज़ूम स्तर पर ऐसे खराब रिज़ॉल्यूशन के हों पिक्सलेट की हुई इमेज नहीं दिखाई जाएगी. हालांकि, अच्छी बात यह है कि हम वेब पर काम करने के लिए इस्तेमाल किए जाने वाले मिलते-जुलते डिज़ाइन पैटर्न उपलब्ध कराने के लिए, अलग-अलग ज़ूम लेवल पर Google की मैप टाइल प्रत्येक ज़ूम स्तर पर पैनोरामा के लिए उपयुक्त रिज़ॉल्यूशन इमेजरी.

डिफ़ॉल्ट रूप से, पहली बार StreetViewPanorama लोड होने पर यह 25% (90 डिग्री आर्क) वाली इमेज दिखाता है ज़ूम स्तर 1 पर पैनोरामा की क्षैतिज चौड़ाई. यह व्यू करीब-करीब इंसानी नज़रिए से मेल खाती है. ज़ूम किया जा रहा है "आउट" इस डिफ़ॉल्ट व्यू से असल में एक बहुत बड़ी चाप मिलती है, जब ज़ूम इन किया जाता है, तब दृश्य के फ़ील्ड को एक छोटे चाप तक सीमित कर दिया जाता है. कॉन्टेंट बनाने StreetViewPanorama हर महीने चयनित ज़ूम स्तर के लिए दृश्य के उचित फ़ील्ड पर, और फिर उस रिज़ॉल्यूशन के लिए सबसे सही तस्वीरों को चुनने के लिए, ऐसा टाइल सेट जो हॉरिज़ॉन्टल के डाइमेंशन से मोटे तौर पर मेल खाता हो फ़ील्ड ऑफ़ व्यू (कैमरे से दिख रहा व्यू) के हिसाब से. व्यू मैप के नीचे दिए गए फ़ील्ड, Street View से लिंक किए गए हैं ज़ूम स्तर:

स्ट्रीट व्यू का ज़ूम लेवल फ़ील्ड ऑफ़ व्यू (डिग्री)
0 180
1 (डिफ़ॉल्ट) 90
2 45
3 22.5
4 11.25

ध्यान दें कि Street View में दिखाई गई इमेज का साइज़ पूरी तरह से स्ट्रीट व्यू के स्क्रीन साइज़ (चौड़ाई) पर निर्भर करता है कंटेनर. अगर बड़ा कंटेनर उपलब्ध कराया जाता है, तो सेवा दिए गए कीवर्ड के लिए, फ़ील्ड ऑफ़ व्यू (कैमरे से दिख रहा व्यू) के बराबर ज़ूम करने का लेवल. हालांकि, यह ज़्यादा सही टाइल चुन सकता है का विकल्प है.

हर पैनोरामा में इक्वीरेक्टेंगुलर प्रोजेक्शन होता है, इसलिए पैनोरामा टाइल बनाना पहले से कहीं ज़्यादा आसान है. प्रोजेक्शन के रूप में 2:1 के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) वाली इमेज उपलब्ध कराता है. साथ ही, 2:1 के अनुपात वाली टाइल का इस्तेमाल करता है इनका इस्तेमाल करना आसान होता है, लेकिन स्क्वेयर टाइल से बेहतर परफ़ॉर्मेंस मिल सकती है वर्ग मैप पर (क्योंकि व्यू का फ़ील्ड वर्ग होगा).

2:1 टाइल के लिए, पूरा पैनोरामा शामिल करने वाली एक इमेज पूरे पैनोरामा की "दुनिया" का प्रतिनिधित्व करता है ज़ूम करने पर (बेस इमेज) लेवल 0, जिसमें हर ज़ूम लेवल की सुविधा उपलब्ध है 4zoomLevel टाइल. (उदाहरण के लिए: ज़ूम लेवल 2 है, पूरे पैनोरामा में 16 टाइल हैं.) ध्यान दें: Street View में ज़ूम के लेवल टाइलिंग, ज़ूम लेवल से सीधे मैच नहीं करती, जैसा कि इसकी मदद से बताया गया है Street View कंट्रोल; इसके बजाय, Street View कंट्रोल को ज़ूम करने की ज़रूरत है लेवल एक ऐसा फ़ील्ड ऑफ़ व्यू (FoV) चुनते हैं जिसमें से उचित हो टाइल चुनी गई हैं.

टाइल में बंटी शहर की सड़क का पैनोरामा व्यू

आम तौर पर, आप अपनी इमेज टाइल को नाम देना चाहेंगे, ताकि वे प्रोग्रामेटिक रूप से चुना गया है. ऐसा नाम रखने की कस्टम हैंडलिंग के बारे में यहां बताया गया है पैनोरामा अनुरोध.

पसंद के मुताबिक बनाए गए पैनोरामा अनुरोधों को मैनेज करना

कस्टम पैनोरामा का उपयोग करने के लिए, कॉल करें 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 ऑब्जेक्ट दिखाएं.

ध्यान दें: सीधे तौर पर position सेट न करें StreetViewPanorama पर जब आप दिखाना चाहें कस्टम पैनोरामा देख सकते हैं, जैसे कि इस तरह की स्थिति सड़क के लिए निर्देश देती है डिफ़ॉल्ट Street View की तस्वीरों के संग्रह को बंद करने का अनुरोध करने के लिए सेवा देखें उस स्थान तक. इसके बजाय, यह स्थान कस्टम StreetViewPanoramaData ऑब्जेक्ट location.latLng फ़ील्ड.

नीचे दिए गए उदाहरण में Google सिडनी का कस्टम पैनोरामा दिखाया गया है ऑफ़िस. ध्यान दें कि इस उदाहरण में मैप या डिफ़ॉल्ट स्ट्रीट व्यू का इस्तेमाल नहीं किया गया है तस्वीरें:

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;
index.ts

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;
index.js

सीएसएस

/* 
 * 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;
}

style.css

एचटीएमएल

<html>
  <head>
    <title>Custom Street View Panoramas</title>

    <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 script 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>
index.html
उदाहरण देखें

सैंपल आज़माएं

कस्टम पैनोरामा सेवा देने वाली कंपनी, दी गई सही टाइल दिखाती है पास किए गए पैनोरामा आईडी, ज़ूम लेवल, और पैनोरामा टाइल कोऑर्डिनेट. इमेज चुनना, स्वीकार की गई इन वैल्यू पर निर्भर करता है. इसलिए, यह काम का है उन इमेज को नाम दें जिन्हें प्रोग्राम के हिसाब से, पास की गई वैल्यू, जैसे कि pano_zoom_tileX_tileY.png.

नीचे दिए गए उदाहरण में, इमेज में एक और ऐरो जोड़ा गया है. इसके अलावा, डिफ़ॉल्ट Street View नेविगेशन ऐरो, जो Google सिडनी और इसके लिंक पर ले जाते हैं को कस्टम तस्वीरों के संग्रह में जोड़ दें:

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;
index.ts

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", // 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.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;
index.js

सीएसएस

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#street-view {
  height: 100%;
}

style.css

एचटीएमएल

<html>
  <head>
    <title>Custom Street View Panorama Tiles</title>

    <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 script 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>
index.html
उदाहरण देखें

सैंपल आज़माएं