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, kapsama alanı boyunca belirlenmiş yolların 360 derecelik panoramik görüntülerini sağlar. Street View'un 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şılabilir.

Aşağıda örnek bir Street View resmi verilmiştir.


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

Street View Haritası Kullanımı

Street View, bağımsız DOM öğesinde kullanılabilir ancak bir konumu harita üzerinde belirtirken en yararlıdır. Varsayılan olarak, Street View bir haritada etkindir ve Street View Pegman kontrolü gezinme (yakınlaştırma ve kaydırma) kontrollerinde entegre olarak görünür. streetViewControl öğesini false olarak ayarlayarak bu kontrolü haritanın MapOptions içinde gizleyebilirsiniz. Ayrıca, Map streetViewControlOptions.position özelliğini yeni bir ControlPosition olarak ayarlayarak Street View kontrolünün varsayılan konumunu da değiştirebilirsiniz.

Street View Pegman kontrolü, Street View panoramalarını doğrudan harita içinde görüntülemenize olanak tanır. Kullanıcı Pegman'i tıklayıp tuttuğunda harita, Street View'un etkin olduğu caddelerin etrafında 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 sokağa 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üleyiciye" API arayüzü sağlayan StreetViewPanorama nesnesinin kullanılmasıyla desteklenir. Her harita, varsayılan getStreetView() yöntemini çağırarak alabileceğiniz bir Street View panoraması içerir. streetViewControl seçeneğini true olarak ayarlayarak haritaya Street View kontrolü eklediğinizde Pegman kontrolünü bu varsayılan Street View panoramasına otomatik olarak bağlarsınız.

Ayrıca, haritanızın streetView özelliğini açıkça oluşturulan nesneye ayarlayarak kendi StreetViewPanorama nesnenizi oluşturabilir ve haritayı varsayılan yerine bu nesneyi kullanacak şekilde ayarlayabilirsiniz. Yer paylaşımlarının harita ile panorama arasında otomatik olarak paylaşılması gibi varsayılan davranışı değiştirmek isterseniz varsayılan panoramayı geçersiz kılabilirsiniz. (Aşağıdaki Street View'daki yer paylaşımları konusuna bakın.)

Street View Kapsayıcıları

Bunun yerine genellikle <div> öğesi olan ayrı bir DOM öğesinde StreetViewPanorama görüntülemek isteyebilirsiniz. DOM öğesini StreetViewPanorama oluşturucusundan 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şlevi bir haritayla birlikte kullanılmak üzere tasarlanmış olsa da bu kullanım zorunlu değildir. Harita olmadan bağımsız bir Street View nesnesini kullanabilirsiniz.

Street View Konumları ve Seyir Noktası (POV)

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

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

  • heading (varsayılan 0), kamera ucu konumunun çevresindeki 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 (90 derece doğru doğudur).
  • pitch (varsayılan 0), kameranın başlangıçtaki varsayılan perdesinden "yukarı" veya "aşağı" açısı sapmasını tanımlar. Bu değer genellikle düz (ancak her zaman değil) yataydır. (Örneğin, bir tepede çekilen resim, yatay olmayan varsayılan bir perdeyi gösterebilir.) Öneri açıları, pozitif değerler (yukarıya doğru 90 derece yukarıya ve varsayılan ses perdesine göre dikey) ve aşağı doğru (-90 derece düz ve varsayılan ses perdesine dikey) göre negatif değerlerle ölçülür.

StreetViewPov nesnesi, genellikle Street View kamerasının bakış açısını belirlemek için kullanılır. StreetViewPanorama.getPhotographerPov() yöntemiyle, fotoğrafçının bakış açısını da (genellikle arabanın veya üç tekerleğin baktığı yön) de belirleyebilirsiniz.

Aşağıdaki kodda, Fenway Parkı'nın ilk görünümünün bulunduğu Boston haritası gösterilmektedir. Pegman'i seçmek ve bunu haritada desteklenen bir yere sürüklemek Street View panoramasını değiştirir:

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

CSS

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

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

style.css

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.
      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
Örneği göster

Örneği Deneyin

Mobil cihazlarda hareket izleme

Cihaz yönü etkinliklerini destekleyen cihazlarda API, kullanıcılara cihazın hareketliliğine dayalı olarak Street View bakış açısını değiştirme olanağı sunar. Kullanıcılar cihazlarını hareket ettirerek etrafa bakabilirler. Buna hareket izleme veya cihaz rotasyonu izleme denir.

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

  • Hareket izleme işlevini etkinleştirin veya devre dışı bırakın. Varsayılan olarak, hareket izlemeyi destekleyen tüm cihazlarda bu özellik etkindir. Aşağıdaki örnek, hareket izlemeyi devre dışı bırakır ancak hareket izleme denetimini görünür kılar. (Kullanıcının kontrole dokunarak hareket izlemeyi etkinleştirebileceğ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, hareket izlemeyi destekleyen cihazlarda gösterilir. Kullanıcı, hareket izlemeyi açmak veya kapatmak için denetime dokunabilir. Cihaz motionTrackingControl değerini ne olursa olsun 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 kontrolünün varsayılan konumunu değiştirin. Varsayılan olarak, denetim panoramanın sağ alt tarafına yakın bir konumda 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'daki yer paylaşımları

Varsayılan StreetViewPanorama nesnesi, harita yer paylaşımlarının yerel görünümünü destekler. Yer paylaşımları genellikle LatLng konumlarına sabitlenmiş "sokak düzeyinde" görünür. (Örneğin, işaretçiler Street View panoraması içinde kuyruklarını sayfanın 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, panoramayı Map nesnesinin yerine geçerek setMap() olarak adlandırıp StreetViewPanorama yerine harita olarak bir bağımsız değişken olarak kabul ederek Street View panoramasında görüntülenebilir. Benzer şekilde bilgi pencereleri, Street View panoraması içinde open() yerine StreetViewPanorama() haritası açılarak açılabilir.

Ayrıca, varsayılan olarak StreetViewPanorama içeren bir harita oluştururken, harita üzerinde oluşturulan tüm işaretçiler, panoramanın görünür olması koşuluyla, haritayla ilişkili Street View panoraması ile otomatik olarak paylaşılır. Varsayılan Street View panoramasını almak için Map nesnesinde getStreetView() işlevini çağırın. Haritanın streetView özelliğini açıkça kendi StreetViewPanorama özelliklerinize ayarlarsanız varsayılan panoramayı geçersiz kılabilirsiniz.

Aşağıdaki örnekte, Astor Place, New York çevresindeki çeşitli konumları belirten işaretçiler gösterilmektedir. StreetViewPanorama uygulamasında paylaşılan işaretçileri göstermek 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;
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);

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

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

style.css

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.
      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
Örneği göster

Örneği Deneyin

Street View Etkinlikleri

Street View arasında gezinirken veya yönünüzü değiştirirken StreetViewPanorama eyaletinin durumunda değişiklik olduğunu gösteren çeşitli etkinlikleri izlemek isteyebilirsiniz:

  • Bağımsız pano kimliği her değiştiğinde pano_changed tetiklenir. Bu etkinlik, panoramadaki ilişkili verilerin de (ör. bağlantılar) 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 panoramasının (bu panoramaya referans vermek için kullanabileceğiniz) yalnızca mevcut tarayıcı oturumunda 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 pano kimliğini otomatik olarak panoramanın konumuyla ilişkilendireceğinden, ilgili pano kimliğini değiştirmeden bir panoramanın temel konumunu değiştirebileceğinizi unutmayın.
  • Street View'un StreetViewPov metriği her değiştiğinde pov_changed tetiklenir. Konum ve pano kimliği sabit kalırken bu etkinliğin tetiklenebileceğini unutmayın.
  • Street View bağlantıları her değiştiğinde links_changed tetiklenir. Bu etkinliğin, pano_changed aracılığıyla belirtilen pano kimliğinde yapılan bir değişiklikten sonra 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 aracılığıyla belirtilen pano kimliğinde yapılan bir değişiklikten sonra eşzamansız olarak tetiklenebileceğini unutmayın.

Aşağıdaki kod, temel StreetViewPanorama hakkında veri toplamak için bu etkinliklerin nasıl yönetilebileceğini göstermektedir:

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

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

style.css

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.
      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
Örneği göster

Örneği Deneyin

Street View Denetimleri

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

  • panControl öğesi, panoramayı döndürmenin bir yolunu sunar. Bu denetim, varsayılan olarak standart bir entegre pusula ve kaydırma kontrolü olarak görünür. panControlOptions alanına PanControlOptions ekleyerek kontrolün konumunu değiştirebilirsiniz.
  • zoomControl, resim içinde yakınlaştırma yapmak için bir yol sağlar. Bu denetim varsayılan olarak panoramanın sağ alt tarafına yakın bir yerde görünür. zoomControlOptions alanına ZoomControlOptions sağlayarak kontrolün görünümünü değiştirebilirsiniz.
  • addressControl, ilişkili konumun adresini belirten metin biçiminde bir yer paylaşımı sağlar ve konumun Google Haritalar'da açılması için bir bağlantı sunar. addressControlOptions alanına 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ına 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 denetim yalnızca cihaz yönü etkinliklerini destekleyen cihazlarda görünür. Varsayılan olarak denetim, panoramanın sağ alt tarafına yakın bir yerde görünür. MotionTrackingControlOptions özelliğini sağlayarak denetimin konumunu değiştirebilirsiniz. Daha fazla bilgi için hareket izleme ile ilgili bölüme bakın.
  • linksControl, bitişik panoramik resimlere seyahat etmek için resmin üzerinde kılavuz oklar sağlar.
  • Kapat denetimi, kullanıcının Street View görüntüleyicisini kapatmasına olanak tanır. enableCloseButton özelliğini true veya false şeklinde ayarlayarak Kapat kontrolünü etkinleştirebilir veya devre dışı bırakabilirsiniz.

Aşağıdaki örnek, ilişkili Street View'da gösterilen kontrolleri değiştirir ve görünümün 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;
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

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

style.css

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.
      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
Örneği göster

Örneği Deneyin

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 olmadan belirli panoramalar hakkında bilgi döndürmek isteyebilirsiniz. Bu işlemi, Google'ın Street View hizmetinde depolanan verilerin arayüzü sağlayan StreetViewService nesnesini kullanarak yapabilirsiniz.

Street View Hizmet İstekleri

Google Haritalar API'sinin harici bir sunucuya çağrıda bulunması gerektiğinden Street View hizmetine erişim eşzamansız olarak sunulur. Bu nedenle, isteğin tamamlanması durumunda yürütme için bir geri çağırma yöntemi iletmeniz gerekir. Bu geri çağırma yöntemi sonucu işler.

StreetViewPanoRequest veya StreetViewLocationRequest özelliğini kullanarak StreetViewService için istek başlatabilirsiniz.

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

StreetViewLocationRequest ifadesini kullanan bir istek, aşağıdaki parametrelerle belirtilen bir konumdaki panorama verilerini arar:

  • location, panoramanın aranacağı konumu (enlem ve boylam) belirtir.
  • preference, belirli bir yarıçap içinde bulunacak panoramayı belirler. Bu yarıçap, belirtilen konuma en yakın olan veya yarıçapa göre en uygun olanı belirlenir.
  • radius, belirli bir enlem ve boylamı merkez alan bir panoramanın aranacağı yarıçapı belirtir. Sağlanmadığında varsayılan olarak 50 değerine ayarlanır.
  • source, aranacak panoramanı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ırlandırır. Belirtilen konum için açık hava panoraması bulunmayabileceğini unutmayın.

Street View Hizmeti Yanıtları

getPanorama() işlevinin, Street View hizmetinden bir sonuç alındığında yürütülmesi için bir geri çağırma işlevi gerekir. Bu geri çağırma işlevi, bir StreetViewPanoramaData nesnesi içinde panorama grubu verileri ve isteğin hangi sırayla olduğunu belirten bir StreetViewStatus kodu döndürür.

Bir StreetViewPanoramaData nesne spesifikasyonu, aşağıdaki biçimdeki bir Street View panoramasıyla ilgili meta verileri 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, StreetViewPanorama nesnesinin kendisi değil. Bu verileri kullanarak bir Street View nesnesi oluşturmak için StreetViewPanorama oluşturup setPano() öğesini çağırmanız ve bunu döndürülen location.pano alanında belirtilen kimliği 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 değeri, hizmetin aktarılan ölçütlerle eşleşen bir panorama bulamadığını gösterir.
  • UNKNOWN_ERROR, tam nedeni bilinmese de bir Street View isteğinin işlenemediğini gösterir.

Aşağıdaki kod, bir harita tıklandığında kullanıcı tıklamasına yanıt veren bir StreetViewService oluşturur. İşaretçiler, tıklandığında bu konumun StreetViewPanorama bilgisini görüntüler. 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;
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

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

style.css

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.
      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
Örneği göster

Örneği Deneyin

Özel Street View Panoramaları sağlama

Maps JavaScript API, StreetViewPanorama nesnesinin içinde özel panoramaların görüntülenmesini destekler. Özel panoramalar kullanarak binaların içini, manzaralı yerleri veya hayal gücünüzdeki her şeyi görüntüleyebilirsiniz. Hatta bu özel panoramaları Google'ın mevcut Street View panoramalarına bağlayabilirsiniz.

Bir özel panoramik görüntü kümesi oluşturmak için aşağıdaki adımlar uygulanır:

  • 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ükte 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ı oluşturun.
  • (İsteğe bağlı) Google'ın mevcut Street View görüntülerinde "giriş" panoramaları belirleyin ve özel grubun bağlantılarını standart sete göre özelleştirin.
  • Bir StreetViewPanoramaData nesnesi içinde her panorama resme ait meta verileri tanımlayın.
  • Özel panorama verilerini ve resimleri belirleyen bir yöntem uygulayın ve bu yöntemi StreetViewPanorama nesnesi içinde özel işleyiciniz olarak atayın.

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

Özel Panorama Oluşturma

Her Street View panoraması, tek bir konumdan tam 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 (tam tur Bu görüntüleme alanları, en boy oranı 2:1 olan bir resim oluşturur. Aşağıda, sarmalamanın tamamı görünür.

Şehir merkezinin panoramik görünümü

Panorama resimleri genellikle bir konumdan birden fazla fotoğraf çekilip panorama yazılımları kullanılarak birbirine eklenir. (Daha fazla bilgi için Wikipedia'nın Fotoğraf birleştirme uygulamalarının karşılaştırması bölümüne bakın.) Bu tür resimler, panoramik resimlerin her birinin çekildiği tek bir "kamera" konumunu paylaşmalıdır. Oluşturulan 360 derecelik panoramik görüntü, kürenin iki boyutlu yüzeyine sarılmış bir projeksiyonu tanımlayabilir.

Yüzeyinde bir sokağın panoramik görünümüyle küre

Panoramayı, dikdörtgen koordinat sistemi olan bir küre üzerinde projeksiyon olarak ele almak, görüntüyü dikdörtgen parçalara bölerek ve hesaplanan karo koordinatlarına dayalı olarak sunum yapmak açısından avantajlıdır.

Özel Panorama Kutuları Oluşturma

Street View, varsayılan görünümde yakınlaştırma ve uzaklaştırma yapmanıza olanak tanıyan bir yakınlaştırma denetimi kullanarak farklı resim ayrıntı düzeylerini de destekler. Street View genellikle herhangi 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 güvenmeniz durumunda, bu resim muhtemelen çok büyük olur ve uygulamanızı önemli ölçüde yavaşlatır ya da daha yüksek yakınlaştırma seviyelerinde kötü bir çözünürlükte, kötü pikselleştirilmiş bir görüntü yayınlarsınız. Bununla birlikte, her yakınlaştırma düzeyinde panoramik resimler için uygun çözünürlük resimleri sağlamak amacıyla farklı yakınlaştırma düzeylerinde Google'ın harita bloklarını 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'inden (90 derece yay) oluşan bir resim görüntüler. Bu görünüm, normal bir şekilde insanların normal görüş alanına karşılık gelir. Varsayılan olarak bu görünümün "yakınlaştırılması", daha geniş bir yay sağlar. Yakınlaştırma ise 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ünüm alanını otomatik olarak hesaplar ve ardından yatay görünüm alanının boyutlarıyla kabaca eşleşen bir karo grubu seçerek bu çözünürlük için en uygun görüntüleri seçer. Aşağıdaki görüntüleme alanları Street View yakınlaştırma düzeyiyle 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 ilgili çözünürlük için daha uygun bloklar seçebilir.

Her panorama, eş mesafeli bir projeksiyondan oluştuğundan, panoramik karolar oluşturmak nispeten daha kolaydır. Projeksiyon, en boy oranı 2:1 olan bir resim sunduğundan, 2:1 oranlarına sahip blokların kullanımı daha kolaydır. Ancak kare karolar, kare haritalarda daha iyi performans sağlayabilir (çünkü görüş alanı kare olacağı için).

2:1 karolarda, tüm panoramayı kapsayan tek bir resim, yakınlaştırma düzeyinde 0 olarak tüm "dünya"yı (temel resim) temsil eder ve her yakınlaştırma düzeyi 4zoomLevel kutusu sunar. (Örneğin, 2. yakınlaştırma düzeyinde, tüm panorama 16 bloktan oluşur.) Not: Street View döşemesindeki yakınlaştırma düzeyleri, Street View kontrolü kullanılarak sağlanan yakınlaştırma düzeyleriyle doğrudan eşleşmez. Bunun yerine Street View denetimi yakınlaştırma düzeyleri, uygun karoların seçildiği bir görüntüleme alanı (FoV) seçer.

Çinilere bölünmüş bir sokağın panoramik görünümü

Genellikle resim karolarınızı, programatik olarak seçilebilecekleri şekilde adlandırmanız gerekir. Bu adlandırma düzeni aşağıda Özel Panorama İsteklerini Kullanma bölümünde ele alınmıştır.

Özel Panorama İsteklerini İş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 bir StreetViewPanoramaData nesnesi döndürmeli ve şu imzaya sahip olmalıdır:

Function(pano):StreetViewPanoramaData

Bir StreetViewPanoramaData, aşağıdaki biçimde 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 bir 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.
  • Özel karo sağlayıcı işlevinizi aşağıdaki örneklerde gösterildiği gibi uygulayın.
  • StreetViewPanoramaData nesnesini döndürür.

Not: Özel panoramalar görüntülemek istediğinizde StreetViewPanorama üzerinde doğrudan position özelliği ayarlamayın. Böyle bir durumda Street View hizmeti, ilgili Street View görüntülerine yakın olan varsayılan Street View görüntülerini isteme talimatı verir. Bunun yerine, özel StreetViewPanoramaData nesnesinin location.latLng alanında bu konumu ayarlayın.

Aşağıdaki örnekte Google Sidney ofisinin özel bir panoraması gösterilmektedir. Bu örneğin harita veya varsayılan 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;
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

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

style.css

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.
      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
Örneği göster

Örneği Deneyin

Ö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 iletilen değerlere bağlı olduğundan, pano_zoom_tileX_tileY.png gibi iletilen değerlerle programatik olarak seçilebilecek resimleri adlandırmak yararlı olur.

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

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",
      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

CSS

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

#street-view {
  height: 100%;
}

style.css

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.
      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
Örneği göster

Örneği Deneyin