Street View Hizmeti

Genel bakış

Platformu seçin: Android iOS JavaScript

Google Street View, kapsama alanı içindeki özel yollardan panoramik 360 derece görünüm 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ş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 sağlar. Bu Street View hizmeti, tarayıcı içinde yerel olarak desteklenir.

Street View Harita Kullanımı

Street View, bağımsız DOM öğesinde kullanılabilir ancak en yaygın olarak haritada bir konumu belirtirken kullanılır. Varsayılan olarak, Street View bir haritada etkinleştirilmiştir ve gezinme (yakınlaştırma ve kaydırma) kontrollerine entegre bir Street View Pegman denetimi görüntülenir. streetViewControl özelliğini false şeklinde ayarlayarak bu kontrolü haritanın MapOptions bölümünde gizleyebilirsiniz. Ayrıca, Map'nın streetViewControlOptions.position özelliğini yeni bir ControlPosition olarak ayarlayarak Street View kontrolünün varsayılan konumunu 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 basılı tuttuğunda harita, Street View'un etkin olduğu caddelerin etrafında mavi dış çizgiler 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 yerin Street View panoramasını görüntüleyecek şekilde güncellenir.

Street View Panoramaları

Street View görüntüleri, Street View "görüntüleyicisine" API arayüzü sağlayan StreetViewPanorama nesnesinin kullanılmasıyla desteklenir. Her harita, varsayılan getStreetView() yöntemini çağırarak alabileceğiniz varsayılan bir Street View panoraması içerir. streetViewControl seçeneğini true olarak ayarlayarak haritaya bir Street View denetimi eklediğinizde, Pegman kontrolünü bu varsayılan Street View panoramasına otomatik olarak bağlarsınız.

Kendi StreetViewPanorama nesnenizi de oluşturabilir ve haritanın streetView özelliğini açıkça oluşturulan nesne olarak ayarlayarak, haritayı varsayılan konum yerine bunu kullanacak şekilde ayarlayabilirsiniz. Harita ile panorama arasında yer paylaşımlarının 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ı bölümüne bakın.)

Street View Kapsayıcıları

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

Not: Street View işlevleri bir haritayla birlikte kullanılmak üzere tasarlanmış olsa da bu kullanım zorunlu değildir. Harita olmadan bağımsız bir Street View nesnesi kullanabilirsiniz.

Street View Konumları ve Görüş 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 resim için kamera odağının yerleşimini tanımlar ancak bu 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 konumunun çevresindeki döndürme açısını kuzey yönünden derece cinsinden tanımlar. Başlıklar saat yönünde (doğu 90 derece doğru doğu) ölçülür.
  • pitch (varsayılan 0), kameranın ilk varsayılan perdesinden gelen "yukarı" veya "aşağı" açı sapmasını tanımlar. Bu değer genellikle düz (ancak her zaman değil) düz yataydır. (Örneğin, bir tepede çekilen resim büyük olasılıkla yatay olmayan bir varsayılan perspektif gösterir.) Satış konuşması açıları pozitif değer (yukarıda 90 derece dik ve varsayılan ses perdesini aşmak için) ve aşağı bakan negatif değerler (-90 derece dik ve varsayılan dönüş açısına göre) olarak ö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ı (genellikle arabanın veya üç tekerlekli aracın baktığı yön) de belirleyebilirsiniz.

Aşağıdaki kodda, Fenway Park'ın ilk görünümünün bulunduğu Boston haritası gösterilmektedir. Pegman seçildiğinde ve harita üzerinde desteklenen bir konuma sürüklendiğinde Street View panoraması değiştirilir:

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

API, cihaz yönü etkinliklerini destekleyen cihazlarda kullanıcılara Street View bakış açısını cihazın hareketlerine göre değiştirme olanağı sunar. Kullanıcılar cihazlarını hareket ettirerek etrafa bakabilirler. Buna hareket izleme veya cihaz rotasyonu izleme adı verilir.

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 hareket izleme etkindir. Aşağıdaki örnek, hareket izlemeyi devre dışı bırakır ancak hareket izleme denetimini görünür durumda bırakır. (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, hareket izlemeyi destekleyen cihazlarda gösterilir. Kullanıcı, hareket izlemeyi açmak veya kapatmak için kontrole dokunabilir. Cihaz, motionTrackingControl değerinden bağımsız olarak hareket izlemeyi desteklemiyorsa kontrolün hiçbir zaman görünmeyeceğini unutmayın.

    Aşağıdaki örnek hem hareket izlemeyi hem de hareket izleme kontrolünü devre dışı bırakı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 (RIGHT_BOTTOM konumu) yakın bir yerde görünür. Aşağıdaki örnekte, denetimin konumu sol alt köşeye ayarlanmaktadır: 
    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 LatLng konumlarına sabitlenmiş "sokak düzeyinde" görünür. (Örneğin, işaretçiler Street View panoramasında, 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'lerle sınırlıdır. Bir haritada gösterdiğiniz bindirmeler, panoramayı Map nesnesinin alternatifi olarak değerlendirerek, setMap() öğesini çağırarak ve StreetViewPanorama öğesini harita yerine bir bağımsız değişken olarak ileterek bir Street View panoramasında görüntülenebilir. Benzer şekilde bilgi pencereleri, Street View panoramasında open() çağrılıp StreetViewPanorama() yerine harita açılarak açılabilir.

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

Aşağıdaki örnekte, Astor Place, New York City'deki çeşitli konumları belirten işaretçiler gösterilmektedir. StreetViewPanorama içinde paylaşılan işaretçilerin gösterilmesi 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 durumundaki değişiklikleri gösteren birkaç etkinliği izlemek isteyebilirsiniz:

  • Her bir pano kimliği 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 kimliğinin (bu panoramaya referans vermek için kullanabilirsiniz) yalnızca geçerli 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 panoramanın konumuyla otomatik olarak ilişkilendireceğinden, bir panoramanın temel konumunu ilişkili pano kimliğini değiştirmeden değiştirebilirsiniz.
  • 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'ın 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 ele alınabileceğ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 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 kontrolü olarak görünür. panControlOptions alanında PanControlOptions sağlayarak kontrolün konumunu değiştirebilirsiniz.
  • zoomControl, resmin içinde yakınlaştırma yapılmasını sağlar. Bu denetim, varsayılan olarak panoramanın sağ alt tarafına yakın 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 konumun Google Haritalar'da açılması 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 denetim 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. MotionTrackingControlOptions özelliğini sağlayarak denetimin konumunu değiştirebilirsiniz. Daha fazla bilgi için hareket izleme bölümünü inceleyin.
  • linksControl, bitişik panoramik resimlere seyahat etmek için resimde 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 olarak 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 haritanın/panoramanın doğrudan değiştirilmesine gerek olmadan belirli panoramalarla ilgili bilgileri döndürmek isteyebilirsiniz. Bunu, Google'ın Street View hizmetinde depolanan verilere bir arayüz sağlayan StreetViewService nesnesini kullanarak yapabilirsiniz.

Street View Hizmet İstekleri

Google Haritalar API'sinin harici bir sunucuya çağrı yapması gerektiğinden Street View hizmetine erişim eşzamansız. Bu nedenle, istek tamamlandıktan sonra yürütülmesi için bir geri çağırma yöntemi iletmeniz gerekir. Bu geri çağırma yöntemi sonucu işler.

StreetViewPanoRequest veya StreetViewLocationRequest kullanarak StreetViewService istekleri başlatabilirsiniz.

StreetViewPanoRequest kullanan 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 kullanan bir istek, aşağıdaki parametreleri kullanarak belirtilen bir konumdaki panom verileri arar:

  • location, panoramanın aranacağı konumu (enlem ve boylam) belirtir.
  • preference, yarıçap içinde hangi panoramanın bulunacağına dair bir tercih belirler: Belirtilen konuma en yakın olan veya yarıçapın içindeki en iyi konum.
  • radius, belirli bir enlem ve boylamı merkezleyen bir panoramayı aramak için metre cinsinden belirtilmiş bir yarıçap belirler. Bu değer sağlanmadığında, varsayılan değer 50'dir.
  • source aranacak kaynağı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ı bulunmayabilir.

Street View Hizmet Yanıtları

getPanorama() işlevi, Street View hizmetinden bir sonuç alındığında yürütme için bir geri çağırma işlevine ihtiyaç duyar. Bu geri çağırma işlevi, bir StreetViewPanoramaData nesnesi içindeki bir grup panorama ve isteğin durumunu belirten bir StreetViewStatus kodu döndürür.

StreetViewPanoramaData nesne spesifikasyonu, aşağıdaki biçimdeki 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 bir StreetViewPanorama nesnesi olmadığını unutmayın. Bu verileri kullanarak Street View nesnesi oluşturmak için bir StreetViewPanorama oluşturmanız ve setPano() öğesini çağırarak 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, hizmetin iletilen ölçütlerle eşleşen bir panorama bulamadığını gösterir.
  • UNKNOWN_ERROR, tam olarak neden bilinmediği halde 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 bu konumun StreetViewPanorama değerini gösterir. Kod, hizmetten 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, etkileyici konumlara ait görünümleri veya hayalinizdeki her şeyi görüntüleyebilirsiniz. Hatta bu özel panoramaları Google'ın mevcut Street View panoramalarına bağlayabilirsiniz.

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

  • Her özel panorama için bir temel panoramik resim oluşturun. Bu temel resim, yakınlaştırılan görüntülerle birlikte yayınlamak istediğiniz en yüksek çözünürlüklü resim olmalıdır.
  • (İsteğe bağlı, ancak önerilir) Temel resimden 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 kümenin bağlantılarını standart kümeye göre özelleştirin.
  • Bir StreetViewPanoramaData nesnesi içindeki her panoramik resim için meta verileri tanımlayın.
  • Özel panorama verilerini ve resimlerini 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) projeksiyona uygun resimler kullanır. Bu tür projeksiyonlarda 360 derece yatay görünüm (tam ekran) ve 180 derece dikey görünüm (düz yönden tam aşağı doğru) bulunur. Bu görünüm alanları, 2:1 en boy oranına sahip bir resim oluşturur. Tam sarmalama panoraması aşağıda gösterilmiştir.

Şehir sokağının panoramik görünümü

Panorama resimleri genellikle bir konumdan birden fazla fotoğraf çekilip panorama yazılımıyla birleştirilerek elde edilir. (Daha fazla bilgi için Wikipedia'nın Fotoğraf birleştirme uygulamalarının karşılaştırması sayfasına göz atın.) Bu tür görüntüler, panoramik resimlerden her birinin alındığı tek bir "kamera" yerini paylaşmalıdır. Oluşturulan 360 derecelik panoramik görüntü, kürenin iki boyutlu yüzeyine sarmalanmış bir küre üzerinde projeksiyon tanımlayabilir.

Bir sokağın yüzeyini panoramik olarak gösteren dünya

Panoramayı dikdörtgen koordinat sistemiyle bir kürenin projeksiyonu olarak ele almak, görüntüyü doğrusal karolara bölerek ve hesaplanan karo koordinatlarına dayalı olarak sunmak açısından avantajlıdır.

Özel Panorama Kutuları Oluşturma

Street View ayrıca, varsayılan görünümü yakınlaştırmanıza ve uzaklaştırmanıza olanak tanıyan yakınlaştırma denetimi kullanarak farklı resim ayrıntısı düzeylerini destekler. Genellikle, Street View belirli bir panoramik resim için beş 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 ihtiyacınız olsaydı, bu tür bir resim muhtemelen çok büyük olurdu ve uygulamanızı önemli ölçüde yavaşlatırdı ya da daha yüksek yakınlaştırma seviyelerinde düşük pikselli bir resim sunardınız. Neyse ki Google'ın harita parçalarını farklı yakınlaştırma düzeylerinde sunmak için kullanılan benzer bir tasarım şablonu kullanarak her yakınlaştırma düzeyinde panoramalar için uygun çözünürlük görüntüleri sunabiliriz.

Bir StreetViewPanorama ilk 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, kabaca normal bir insan bakış açısına karşılık gelir. Bu varsayılan görünümü "yakınlaştırmak", aslında daha geniş bir yay sağlarken, yakınlaştırmak 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üş alanını otomatik olarak hesaplar ve ardından yatay görüş alanının boyutlarıyla yaklaşık olarak eşleşen bir blok kümesi 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 seviyeleriyle 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, 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, belirli bir yakınlaştırma düzeyi için aynı görüş alanını sağlamaya devam eder ancak bunun yerine ilgili çözünürlük için daha uygun bloklar seçebilir.

Her panorama eşdeğer bir dikdörtgen projeksiyondan oluştuğundan panoramik karo oluşturmak oldukça kolaydır. Projeksiyon, en boy oranı 2:1 olan bir resim sağladığından, 2:1 oranlı karolar daha kolay kullanılır. Bununla birlikte, kare kartlar kare haritalarda daha iyi performans sağlayabilir (çünkü görüş alanı kare biçimindedir).

2:1 karolar için, panoramanın tamamını kapsayan tek bir resim, yakınlaştırma düzeyi 0 olan tüm panorama "world"ü (temel resim) temsil eder ve her yakınlaştırma düzeyi 4ZoomLevel kutucuğu sunar. (Ör. yakınlaştırma düzeyi 2'de, panoramanın tamamı 16 parçadan oluşur.) Not: Street View parçalarındaki 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 düzeyleri uygun karoların seçildiği bir görüntüleme alanı (FoV) seçer.

Karolara ayrılmış şehir sokağının panoramik görünümü

Genel olarak, resim karolarınızı programatik olarak seçilebilmesi için adlandırmak istersiniz. Bu şekilde bir adlandırma düzeni aşağıda Özel Panorama İsteklerini İşleme 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 aşağıdaki imzaya sahip olmalıdır:

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 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.
  • StreetViewPanoramaData nesnesi oluşturun.
  • StreetViewTileData.getTileUrl özelliğini, sağladığınız özel bir blok 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 doğrudan StreetViewPanorama üzerinde bir position ayarlamayın. Böyle bir konum, Street View hizmetine söz konusu konumun yakınındaki varsayılan Street View görüntülerini istemesini ister. Bunun yerine, bu konumu özel StreetViewPanoramaData nesnesinin location.latLng alanında 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ısı; 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, bu iletilen değerlere (ör. pano_zoom_tileX_tileY.png) göre programatik olarak seçilebilecek resimleri adlandırmak yararlı olur.

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

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