Street View Hizmeti

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Genel bakış

Platform seçin: Android iOS JavaScript

Google Street View, belirli yolların kapsama alanında panoramik manzaraların 360 derecelik bir görünümünü sağlar. Street View API kapsamı, Google Haritalar uygulamasının (https://maps.google.com/) kapsamıyla aynıdır. Şu anda Street View için desteklenen şehirlerin listesine Google Haritalar web sitesinden ulaşabilirsiniz.

Aşağıda örnek bir Street View resmi gösterilmektedir.


Maps JavaScript API, Google Haritalar Street View'da kullanılan görüntüleri almak ve değiştirmek için bir Street View hizmeti sunar. Bu Street View hizmeti, tarayıcıda yerel olarak desteklenir.

Street View Haritası Kullanımı

Street View, bağımsız DOM öğesinde kullanılabilir, ancak haritadaki bir konumu belirtirken en yararlı olan seçenektir. Varsayılan olarak, Street View bir harita üzerinde etkindir ve Street View Pegman kontrolü gezinme (yakınlaştırma ve kaydırma) denetimlerine entegre edilmiştir. streetViewControl için false öğesini ayarlayarak bu kontrolü haritanın MapOptions bölümünde gizleyebilirsiniz. Ayrıca Map's streetViewControlOptions.position özelliğini yeni bir ControlPosition olarak ayarlayarak Street View kontrolünün varsayılan konumunu değiştirebilirsiniz.

Street View Pegman kontrolü, doğrudan harita üzerinde Street View panoramaları görüntülemenize olanak tanır. Kullanıcı Pegman'i tıklayıp basılı tuttuğunda harita, Street View özellikli caddelerin etrafındaki mavi dış çizgileri gösterecek şekilde güncellenir ve Google Haritalar uygulamasına benzer bir kullanıcı deneyimi sunar.

Kullanıcı Pegman işaretçisini bir caddeye bıraktığında harita, belirtilen konumun Street View panoramasını gösterecek şekilde güncellenir.

Street View Panoramaları

Street View görüntüleri, Street View "görüntüleyici"ye bir API arayüzü sağlayan StreetViewPanorama nesnesinin kullanımıyla desteklenir. Her haritada varsayılan bir Street View panoraması bulunur. Haritalar'ın getStreetView() yöntemini çağırarak bu görüntüyü alabilirsiniz. streetViewControl seçeneğini true olarak ayarlayarak haritaya bir Street View kontrolü eklediğinizde, Pegman kontrolünü otomatik olarak bu varsayılan Street View panoramasına bağlarsınız.

Ayrıca kendi StreetViewPanorama nesnenizi oluşturabilir ve haritanın streetView özelliğini açıkça oluşturulan söz konusu nesneye ayarlayarak haritayı varsayılan yerine bu nesneyi kullanacak şekilde ayarlayabilirsiniz. Harita ve panorama arasında bindirmelerin otomatik paylaşımı gibi varsayılan davranışı değiştirmek isterseniz, varsayılan panoramayı geçersiz kılmak isteyebilirsiniz. (Aşağıdaki Street View içerisinde yer paylaşımları konusuna bakın.)

Street View Kapsayıcıları

Bunun yerine, ayrı bir DOM öğesinde (genellikle <div> öğesi) StreetViewPanorama görüntülemek isteyebilirsiniz. DOM öğesini StreetViewPanorama' oluşturucuda iletmeniz yeterlidir. Resimlerin en iyi şekilde görüntülenmesi için en az 200 x 200 piksel boyutunda olmasını öneririz.

Not: Street View işlevleri bir haritayla birlikte kullanılmak üzere tasarlanmış olsa da bu kullanım gerekli değildir. Bağımsız bir Street View nesnesini harita olmadan kullanabilirsiniz.

Street View Konumları ve Seyir Noktası (POV)

StreetViewPanorama oluşturucu, Street View konumunu ve bakış açısını StreetViewOptions parametresiyle ayarlamanıza da olanak tanır. İnşaattan sonra nesnenin konumunu ve çevresini değiştirmek için setPosition() ve setPov() değerlerini çağırabilirsiniz.

Street View konumu, bir resim için kamera odağının yerleşimini tanımlar, ancak ilgili resim için kameranın yönünü tanımlamaz. Bu amaçla StreetViewPov nesnesi iki özelliği tanımlar:

  • heading (varsayılan 0), kamera ucundaki döndürme açısını gerçek kuzeye göre derece cinsinden tanımlar. Başlıklar saat yönünde ölçülür (doğu 90 derece doğrudur).
  • pitch (varsayılan 0), kameranın başlangıçtaki varsayılan eğimindeki"yukarı"veya"aşağı"açı çeşidini tanımlar. Bu değer, genellikle her zaman düz yatay olarak ayarlanır. (Örneğin, tepe üzerinde çekilen bir resimde büyük olasılıkla yatay olmayan bir varsayılan perde yer almaktadır.) Ses tonları, yukarı bakan pozitif değerler (düz yukarıya göre varsayılan değer 90 dereceye kadar) ve aşağıya bakan negatif değerler (varsayılan olarak -90 derece aşağıya ve dikey yönde) varsayılan değerle ölçülür.

StreetViewPov nesnesi genellikle Street View kamerasının bakış açısını belirlemek için kullanılır. StreetViewPanorama.getPhotographerPov() yöntemini kullanarak fotoğrafçının bakış açısını da (genellikle arabanın veya üç tekerlekli araçların baktığı yön) belirleyebilirsiniz.

Aşağıdaki kodda, Fenway Park'ın ilk görünümüyle Boston'ın haritası gösterilmektedir. Pegman'i seçip haritada desteklenen bir yere sürüklerseniz Street View panoraması değişir:

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;

CSS

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

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

HTML

<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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initialize&v=weekly"
      defer
    ></script>
  </body>
</html>
Örneği göster

Örneği Dene

Mobil cihazlarda hareket izleme

Cihaz yönü etkinliklerini destekleyen cihazlarda API, kullanıcılara cihazın hareketine göre Street View bakış açısını değiştirme olanağı sunuyor. Kullanıcılar cihazlarını taşıyarak etrafa bakabilirler. Buna hareket izleme veya cihaz döndürme izlemesi denir.

Uygulama geliştiricisi olarak varsayılan davranışı aşağıdaki şekilde değiştirebilirsiniz:

  • Hareket izleme işlevini etkinleştirin veya devre dışı bırakın. Hareketle izleme, destekleyen tüm cihazlarda varsayılan olarak etkindir. Aşağıdaki örnek, hareket izlemeyi devre dışı bırakır, ancak hareket izleme denetimini görünür durumda tutar. (Kullanıcının kontrole dokunarak hareket izlemeyi açabileceğini unutmayın.)
    var panorama = new google.maps.StreetViewPanorama(
        document.getElementById('pano'), {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          motionTracking: false
        });
    
  • Hareket izleme kontrolünü gizleyin veya gösterin. Varsayılan olarak, kontrol özelliği hareket izlemeyi destekleyen cihazlarda gösterilir. Kullanıcı, hareket izlemeyi açmak veya kapatmak için denetime dokunabilir. Cihaz motionTrackingControl hareketten bağımsız olarak hareket izlemeyi desteklemiyorsa denetimin hiçbir zaman görünmeyeceğini unutmayın.

    Aşağıdaki örnekte hem hareket izleme hem de hareket izleme denetimi devre dışı bırakılmaktadır. Bu durumda, kullanıcı hareket izlemeyi etkinleştiremez:

    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
        });
    
  • Hareket izleme denetiminin varsayılan konumunu değiştirin. Varsayılan olarak, kontrol, panoramanın sağ alt tarafına yakın bir yerde görünür (konum RIGHT_BOTTOM). Aşağıdaki örnek, denetimin konumunu sol alta ayarlar:
    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
          }
        });
    

Hareket izlemeyi çalışırken görmek için aşağıdaki örneği bir mobil cihazda (veya cihaz yönü etkinliklerini destekleyen herhangi bir cihazda) görüntüleyin:


Örneği göster

Street View içindeki yer paylaşımları

Varsayılan StreetViewPanorama nesnesi, harita yer paylaşımlarının yerel gösterilmesini destekler. Yer paylaşımları genellikle "sokak" düzeyinde görünür ve LatLng konuma sabitlenir. (İşaretçiler, örneğin Street View panoraması içinde kuyrukları konumun yatay düzlemine sabitlenmiş olarak görünür.)

Şu anda, Street View panoramalarında desteklenen yer paylaşımı türleri Marker, InfoWindow ve özel OverlayView ile sınırlıdır. Bir haritada gösterdiğiniz bindirmeler, setMap() nesnesini çağırarak ve StreetViewPanorama öğesini harita yerine bağımsız değişken olarak ileterek panoramayı Map nesnesinin alternatifi olarak değerlendirerek bir Street View panoramasında görüntülenebilir. Benzer şekilde, bilgi pencereleri bir Street View panoraması içinde open() çağrılıp harita yerine StreetViewPanorama() geçirilerek açılabilir.

Ayrıca, varsayılan olarak StreetViewPanorama içeren bir harita oluşturulurken haritada oluşturulan tüm işaretçiler, panoramanın görünür olması koşuluyla otomatik olarak haritanın ilişkili Street View panoramasıyla paylaşılır. Varsayılan Street View panoramasını almak için Map nesnesinde getStreetView() komutunu çağırın. Haritanın streetView özelliğini açık bir şekilde kendi derlemenizin StreetViewPanorama değerine ayarlarsanız, varsayılan panoramayı geçersiz kılacağınızı unutmayın.

Aşağıdaki örnekte Astor Place, New York City'nin çeşitli yerlerini belirten işaretçiler gösterilmektedir. StreetViewPanorama içinde paylaşılan işaretçileri görüntülemek için ekranı Street View'a geçirin.

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;

CSS

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

<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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
Örneği göster

Örneği Dene

Street View Etkinlikleri

Street View arasında gezinirken veya yönünü değiştirdiğinizde StreetViewPanorama durumunda yapılan değişiklikleri gösteren çeşitli etkinlikleri izlemek isteyebilirsiniz:

  • pano_changed, bağımsız pano kimliği her değiştiğinde tetiklenir. Bu etkinlik, panorama içindeki ilişkili verilerin de (bağlantılar gibi) bu etkinliğin tetiklendiği zamana göre değiştiğini garanti etmez. Bu etkinlik yalnızca bir pano kimliğinin değiştiğini belirtir. Pano kimliğinin (bu panoramaya referans vermek için kullanılabilir) yalnızca mevcut tarayıcı oturumu sırasında kararlı olduğunu unutmayın.
  • Panoramanın temel (LatLng) konumu her değiştiğinde position_changed etkinleşir. Bir panoramanın döndürülmesi bu etkinliği tetiklemez. API en yakın panoramik kimliği otomatik olarak panoramanın konumuyla ilişkilendireceği için, panoramanın ilgili konumunu, ilgili pano kimliğini değiştirmeden değiştirebilirsiniz.
  • Street View'un StreetViewPov özelliği her değiştiğinde pov_changed etkinleşir. Konum ve pano kimliği sabit kalırken bu etkinliğin tetiklenebileceğini unutmayın.
  • Street View bağlantıları değiştiğinde links_changed etkinleşir. Bu etkinliğin, pano_changed ile belirtilen pano kimliği değişikliğinde eşzamansız olarak tetiklenebileceğini unutmayın.
  • Street View'un görünürlüğü her değiştiğinde visible_changed etkinleşir. Bu etkinliğin, pano_changed ile belirtilen pano kimliği değişikliğinde eşzamansız olarak tetiklenebileceğini unutmayın.

Aşağıdaki kod, bu etkinliklerin temelde StreetViewPanorama ile ilgili veri toplamak için nasıl işlenebileceğini gösterir:

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;

CSS

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

<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">&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 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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
Örneği göster

Örneği Dene

Street View Kontrolleri

StreetViewPanorama görüntülenirken varsayılan olarak panoramada çeşitli kontroller görünür. Bu denetimleri, StreetViewPanoramaOptions içindeki uygun alanlarını true veya false olarak ayarlayarak etkinleştirebilir veya devre dışı bırakabilirsiniz:

  • panControl, panoramayı döndürmek için bir yol sunar. Bu kontrol, varsayılan olarak standart bir entegre pusula ve kaydırma denetimi olarak görünür. panControlOptions alanında PanControlOptions sağlayarak kontrol konumunu değiştirebilirsiniz.
  • zoomControl, resmi yakınlaştırmanın bir yolunu sunar. Bu denetim, varsayılan olarak panoramanın sağ alt tarafına yakın bir yerde görünür. zoomControlOptions alanında ZoomControlOptions sağlayarak kontrolün görünümünü değiştirebilirsiniz.
  • addressControl, ilişkili konumun adresini belirten bir metin yer paylaşımı sağlar ve Google Haritalar'da konumu açmak için bir bağlantı sunar. addressControlOptions alanında StreetViewAddressControlOptions sağlayarak kontrolün görünümünü değiştirebilirsiniz.
  • fullscreenControl, Street View'u tam ekran modunda açma seçeneği sunar. fullscreenControlOptions alanında FullscreenControlOptions sağlayarak kontrolün görünümünü değiştirebilirsiniz.
  • motionTrackingControl, mobil cihazlarda hareket izlemeyi etkinleştirme veya devre dışı bırakma seçeneği sunar. Bu kontrol, yalnızca cihaz yönü etkinliklerini destekleyen cihazlarda görünür. Varsayılan olarak kontrol, panoramanın sağ alt tarafına yakın bir yerde görünür. Kontrol noktasının konumunu MotionTrackingControlOptions sağlayarak değiştirebilirsiniz. Daha fazla bilgi için hareket izleme bölümüne bakın.
  • Bir linksControl bitişik panoramik resimlere gitmek için resimde kılavuz oklar sağlar.
  • Kapanış denetimi, kullanıcının Street View görüntüleyicisini kapatmasına olanak tanır. Kapat kontrolünü enableCloseButton değerini true veya false olarak ayarlayarak etkinleştirebilir veya devre dışı bırakabilirsiniz.

Aşağıdaki örnek, ilişkili Street View'da görüntülenen kontrolleri değiştirir ve görünüm bağlantılarını kaldırır:

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;

CSS

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

<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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
Örneği göster

Örneği Dene

Street View Verilerine Doğrudan Erişme

Street View verilerinin kullanılabilirliğini programlı bir şekilde belirlemek veya bir harita/panoramanın doğrudan değiştirilmesine gerek kalmadan belirli panoramalar hakkında bilgi vermek isteyebilirsiniz. Bunu, Google'ın Street View hizmetinde depolanan verilere bir arayüz sağlayan StreetViewService nesnesini kullanarak yapabilirsiniz.

Street View Hizmet İstekleri

Google Maps API'nin harici bir sunucuya çağrı yapması gerektiğinden Street View hizmetine erişim eşzamansızdır. Bu nedenle, istek tamamlandığında yürütme işleminin yürütülmesi için geri çağırma yöntemi iletmeniz gerekir. Bu geri çağırma yöntemi, sonucu işler.

StreetViewPanoRequest veya StreetViewLocationRequest aracını kullanarak StreetViewService için istek başlatabilirsiniz.

StreetViewPanoRequest kullanılan bir istek, panoramayı benzersiz şekilde tanımlayan bir referans kimliği verilen panorama verileri döndürür. Bu referans kimliklerinin yalnızca söz konusu panoramanın görüntülerinin kullanım ömrü boyunca sabit olduğunu unutmayın.

StreetViewLocationRequest kullanılan bir istek, aşağıdaki parametreleri kullanarak belirtilen bir konumdaki panorama verilerini arar:

  • location, panoramanın aranacağı konumu (enlem ve boylam) belirtir.
  • preference, yarıçapın belirtilen yarıçapta bulunması gereken ile ilgili bir tercih belirler: belirtilen konuma en yakın olan veya bu yarıçap içindeki en iyi panorama.
  • radius, belirli bir enlem ve boylamı merkez alan bir panoramanın aranacağı, metre cinsinden belirtilen bir yarıçap belirler. Sağlanmadığında varsayılan olarak 50 kullanılır.
  • source, aranabilir panoramaların kaynağını belirtir. Geçerli değerler şunlardır:
    • default, Street View için varsayılan kaynakları kullanır. Aramalar belirli kaynaklarla sınırlı değildir.
    • outdoor, aramaları açık hava koleksiyonlarıyla sınırlar. Belirtilen konum için açık hava panoraması bulunmayabileceğini unutmayın.

Street View Hizmet Yanıtları

getPanorama() işlevinin, Street View hizmetinden bir sonuç alındığında yürütmesi için geri çağırma işlevine ihtiyacı vardır. Bu geri çağırma işlevi, bir StreetViewPanoramaData nesnesi içindeki bir grup panorama verisini ve isteğin durumunu belirten bir StreetViewStatus kodunu bu sırayla döndürür.

StreetViewPanoramaData nesne spesifikasyonu, aşağıdaki formun Street View panoraması hakkında meta veri içerir:

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

Bu veri nesnesinin kendisi bir StreetViewPanorama nesnesi olmadığını unutmayın. Bu verileri kullanarak bir Street View nesnesi oluşturmak için StreetViewPanorama oluşturup setPano() öğesini çağırmanız ve bu değeri döndürülen location.pano alanında belirtildiği şekilde iletmeniz gerekir.

status kodu, aşağıdaki değerlerden birini döndürebilir:

  • OK, hizmetin eşleşen bir panorama bulduğunu belirtir.
  • ZERO_RESULTS işareti, hizmetin istenen ölçütle eşleşen bir panorama bulamadığını belirtir.
  • UNKNOWN_ERROR, tam olarak bilinmese de bir Street View isteğinin işlenemediğini gösterir.

Aşağıdaki kod, tıklandığında harita üzerinde kullanıcı tıklamalarına yanıt veren bir StreetViewService oluşturur. İşaretçiler, tıklandığında ilgili konumun StreetViewPanorama bilgisini gösterir. Kod, hizmet tarafından döndürülen StreetViewPanoramaData içeriğini kullanır.

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;

CSS

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

<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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
Örneği göster

Örneği Dene

Özel Street View Panoramaları sağlama

Maps JavaScript API, StreetViewPanorama nesnesinin içindeki özel panoramaların görüntülenmesini destekler. Özel panoramalar kullanarak binaların içini, etkileyici manzaraları görüntüleyebilir veya hayalinizdeki her şeyi görüntüleyebilirsiniz. Hatta bu özel panoramaları Google'ın mevcut Street View panoramalarına bile bağlayabilirsiniz.

Bir özel panorama görüntüsü grubu oluşturmak için aşağıdaki adımları uygulayın:

  • Her özel panorama için bir temel panoramik resim oluşturun. Bu temel görüntü, yakınlaştırılan görüntülerde yayınlamak istediğiniz en yüksek çözünürlüklü resim olmalıdır.
  • (İsteğe bağlı ancak önerilir) Temel görüntüden farklı yakınlaştırma düzeylerinde bir grup panoramik karo oluşturun.
  • Özel panoramalarınız arasında bağlantılar oluşturun.
  • (İsteğe bağlı) Google'ın mevcut Street View görüntülerinde "Giriş" panoramaları belirleyin ve özel kümenin bağlantılarını standart kümeye özelleştirin.
  • StreetViewPanoramaData nesnesindeki her panoramik resim için meta verileri tanımlayın.
  • Özel panorama verilerini ve resimleri belirleyen bir yöntem uygulayın ve bu yöntemi StreetViewPanorama nesnesinde özel işleyiciniz olarak atayın.

Aşağıdaki bölümlerde bu işlem açıklanmaktadır.

Özel Panorama oluşturma

Her bir Street View panoraması, tek bir konumdan 360 derece görünüm sağlayan bir resim veya resim grubudur. StreetViewPanorama nesnesi, eş mesafeli (Plate Carrée) projeksiyonuna uygun resimler kullanır. Bu tür projeksiyonlarda 360 derece yatay görünüm (tamamen sarmalama) ve 180 derece dikey görünüm (düzten yukarı doğru düz yönde) bulunur. Bu görünüm alanları, en boy oranı 2:1 olan bir resim oluşturur. Tamamen sarma panoraması aşağıda gösterilmiştir.

Panorama görüntüleri genellikle bir konumdan birden fazla fotoğraf çekilip panorama yazılımı kullanılarak birbirine eklenir. (Wikipedia'ya bakın Wikipedia's Daha fazla bilgi için fotoğraf birleştirme uygulamalarının karşılaştırması). Bu tür resimler, panoramik resimlerin her birinin alındığı tek bir "makro" noktasını paylaşmalıdır. Döndürülen 360 derecelik panoramik görüntü, kürenin iki boyutlu yüzeyine sarmalanmış bir projeksiyonu tanımlayabilir.

Panoramayı, dikdörtgen koordinat sistemiyle bir kürenin projeksiyonu olarak işlemek, resmi dikdörtgen parçalara ayırmak ve resimleri hesaplanan karo koordinatlarına dayalı olarak sunmak avantajlıdır.

Özel Panorama Kutuları Oluşturma

Street View, yakınlaştırma ve uzaklaştırma varsayılan görüntüde yakınlaştırmanıza veya uzaklaştırmanıza olanak tanıyan bir yakınlaştırma kontrolü aracılığıyla farklı düzeylerde resim ayrıntılarını da destekler. Street View genel olarak, belirli bir panoramik resim için beş düzeyde yakınlaştırma çözünürlüğü sağlar. Tüm yakınlaştırma düzeylerini sunmak için tek bir panoramik görüntüye bel bağlıyor olsaydınız, bu resim büyük olasılıkla oldukça büyük olur ve uygulamanızı önemli ölçüde yavaşlatırdı veya daha yüksek yakınlaştırma düzeylerindeki kadar düşük çözünürlükle kötü pikselleştirilmiş bir resim yayınlardınız. Neyse ki, her yakınlaştırma düzeyinde panoramik resimler için uygun çözünürlük görüntüleri sağlamak amacıyla Google'ın harita parçalarını farklı yakınlaştırma düzeylerinde sunmak üzere kullanılan benzer bir tasarım kalıbı kullanabiliriz.

Bir StreetViewPanorama ilk kez yüklendiğinde, varsayılan olarak yakınlaştırma düzeyi 1'de panoramanın yatay genişliğinin %25'ini (90 derece yay) içeren bir resim görüntüler. Bu görünüm, kabaca normal bir insan bakış açısına karşılık gelir. Bu varsayılan görünümü yakınlaştırmak, temel olarak daha geniş bir yay sağlarken, yakınlaştırmak görünümün alanını daha küçük bir yay ile daraltır. StreetViewPanorama, seçilen yakınlaştırma düzeyi için uygun görüş alanını otomatik olarak hesaplar ve ardından yatay görünüm alanının boyutlarıyla kabaca eşleşen bir öğe grubu seçerek bu çözünürlük için en uygun görüntüleri seçer. Aşağıdaki görünüm alanları Street View yakınlaştırma düzeylerine eşlenir:

Street View yakınlaştırma düzeyi Görüş Alanı (derece)
0 180
1 (varsayılan) 90
2 45
3 22,5
4 11,25

Street View'da gösterilen resmin boyutunun tamamen Street View kapsayıcısının ekran boyutuna (genişliğine) bağlı olduğunu unutmayın. Daha geniş bir kapsayıcı sağlarsanız hizmet yine de belirli bir yakınlaştırma düzeyi için aynı görüş alanını sağlar ancak bunun yerine, bu çözünürlük için daha uygun olan kartlar seçebilir.

Her panorama eşdeğer bir dikdörtgen projeksiyondan oluştuğundan, panoramik karolar oluşturmak göreli olarak kolaydır. Projeksiyon en boy oranı 2:1 olan bir resim sağladığından, 2:1 en boy oranına sahip karolar daha kolay kullanılabilir, ancak kare bloklar kare haritalarda daha iyi performans sağlayabilir (görünüm alanı kare olacağı için).

2:1 karolar için, tüm panoramayı kapsayan tek bir resim, yakınlaştırma düzeyi 0 olarak tüm panorama "dünya"yı (temel resim) temsil eder. Her bir yakınlaştırma düzeyi 4ZoomLevel kutu sunar. (Ör.2. yakınlaştırma düzeyinde, tüm panorama 16 karodan oluşur.) Not: Street View döşemelerindeki yakınlaştırma seviyeleri, Street View kontrolü kullanılarak sağlanan yakınlaştırma seviyeleriyle doğrudan eşleşmez. Bunun yerine Street View kontrolü yakınlaştırma seviyeleri, uygun blokların seçildiği bir Görünüm Alanı (FoV) seçer.

Programatik olarak seçilebilmeleri için genellikle resim karolarınıza bir ad vermeniz gerekir. Bu tür bir adlandırma düzeni aşağıda Özel Panorama İsteklerini İşleme bölümünde ele alınmaktadır.

Özel Panorama isteklerini İşleme

Özel bir panorama kullanmak için özel panorama sağlayıcı yönteminizin adını belirterek StreetViewPanorama.registerPanoProvider() yöntemini çağırın. Panorama sağlayıcı yöntemi aşağıdaki gibi bir StreetViewPanoramaData nesnesi döndürmelidir:

Function(pano):StreetViewPanoramaData

StreetViewPanoramaData, aşağıdaki biçimdeki bir nesnedir:

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

Özel panoramayı aşağıdaki gibi görüntüleyin:

  • StreetViewPanoramaOptions.pano özelliğini özel bir değere ayarlayın.
  • Özel bir panorama sağlayıcı işlevi sağlamak için StreetViewPanorama.registerPanoProvider() yöntemini çağırın.
  • Belirtilen pano değerini işlemek için özel panorama sağlayıcı işlevinizi uygulayın.
  • Bir StreetViewPanoramaData nesnesi oluşturun.
  • StreetViewTileData.getTileUrl özelliğini, sağladığınız özel karo sağlayıcı işlevinin adına ayarlayın. Örneğin, getCustomPanoramaTileUrl.
  • Aşağıdaki örneklerde gösterildiği gibi özel karo sağlayıcı işlevinizi uygulayın.
  • StreetViewPanoramaData nesnesini döndürün.

Not: Özel panoramalar görüntülemek istediğinizde StreetViewPanorama üzerinde doğrudan position kuralı ayarlamayın. Bu konum, Street View hizmetinin ilgili konuma yakın olan varsayılan Street View görüntülerini istemesini sağlar. Bunun yerine, özel StreetViewPanoramaData nesne location.latLng alanındaki bu konumu ayarlayın.

Aşağıdaki örnekte, Google Sidney ofisinin özel bir panoraması görüntülenmektedir. Bu örneğin harita veya Street View görüntüsü kullanmadığını unutmayın:

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;

CSS

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

<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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
Örneği göster

Örneği Dene

Özel panorama sağlayıcı; iletilen panorama kimliği, yakınlaştırma düzeyi ve panoramik karo koordinatlarına göre uygun karoyu döndürür. Görüntü seçimi, bu aktarılan değerlere bağlı olduğundan, bu iletilen değerler (pano_zoom_tileX_tileY.png gibi) temel alınarak programatik olarak seçilebilecek resimleri adlandırmak faydalı olur.

Aşağıdaki örnek, Google Street Sidney'i işaret eden ve özel görüntülere bağlantı veren, varsayılan Street View gezinme oklarına ek olarak resme başka bir ok ekler:

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;

CSS

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

#street-view {
  height: 100%;
}

HTML

<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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
Örneği göster

Örneği Dene