Street View Hizmeti

Genel bakış

Platform seçin: Android iOS JavaScript

Google Street View, kapsama alanı genelinde belirlenen yollardan 360 derecelik panoramik manzaralar sunar. Street View'ın API kapsamı, Google Haritalar uygulamasının (https://maps.google.com/) API kapsamıyla aynıdır. Street View için şu anda desteklenen şehirlerin listesini Google Haritalar web sitesinde bulabilirsiniz.

Aşağıda örnek bir Street View görüntüsü gösterilmektedir.


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

Street View Harita Kullanımı

Street View, bağımsız bir DOM öğesi içinde kullanılabilse de en çok bir konumu haritada belirtirken kullanışlıdır. Varsayılan olarak, Street View haritada etkinleştirilir ve gezinme (yakınlaştırma ve kaydırma) denetimlerine entegre bir Street View Pegman kontrolü görünür. Haritanın MapOptions içinde bu denetimi gizlemek için streetViewControl öğesini false seçeneğine ayarlayabilirsiniz. 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 elinde tuttuğunda, harita güncellenerek Street View özellikli sokakların etrafında mavi ana hatlar 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 güncellenir ve belirtilen konumun Street View panoramasını görüntüler.

Street View Panoramaları

Street View görüntüleri, Street View "izleyicisine" API arayüzü sağlayan StreetViewPanorama nesnesinin kullanımıyla desteklenir. Her haritada, haritanın getStreetView() yöntemini çağırarak alabileceğiniz varsayılan bir Street View panoraması bulunur. Haritaya bir Street View denetimi eklemek için streetViewControl seçeneğini true olarak ayarlarsanız, Pegman kontrolünü bu varsayılan Street View panoramasına otomatik olarak bağlarsınız.

Ayrıca kendi StreetViewPanorama nesnenizi oluşturabilir ve haritanın streetView özelliğini oluşturulan bu nesneye açıkça ayarlayarak haritayı, varsayılan yerine bu nesneyi kullanacak şekilde ayarlayabilirsiniz. Harita ve panorama arasındaki bindirmelerin otomatik paylaşımı gibi varsayılan çalışma biçimini değiştirmek isterseniz varsayılan panoramayı geçersiz kılabilirsiniz. (Aşağıdaki Street View içindeki yer paylaşımları bölümüne bakın.)

Street View Kapsayıcıları

Bunun yerine, ayrı bir DOM öğesinde (genellikle <div>) bir StreetViewPanorama görüntülemek isteyebilirsiniz. DOM öğesini StreetViewPanorama oluşturucusu içinde iletmeniz yeterlidir. Resimlerin optimum şekilde gösterilmesi için en az 200 piksele 200 piksel boyutunda bir boyut belirlemeniz önerilir.

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

Street View Konumları ve Bakış 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, konumunu ve Bakış Açısı'nı değiştirmek için nesne üzerinde setPosition() ve setPov() numaralı telefonu arayabilirsiniz.

Street View konumu, bir resmin kamera odağının konumunu tanımlar ancak söz konusu 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 loksu çevresindeki dönüş açısını gerçek kuzeye göre derece cinsinden tanımlar. Başlıklar saat yönünde ölçülür (90 derece gerçek doğuyu ifade eder).
  • pitch (varsayılan 0), kameranın genellikle (ancak her zaman değil) yatay olan ilk varsayılan perdesinden "yukarı" veya "aşağı" açı varyansını tanımlar. (Örneğin, tepede çekilen bir görüntüde muhtemelen yatay olmayan bir varsayılan dönüş açısı sergilenecektir.) Ses perdesi açıları, yukarı bakan pozitif değerlerle (varsayılan perdeye dik olacak şekilde +90 derece dik ve aşağıya doğru) ve negatif değerlerle (-90 derece dik aşağıya ve varsayılan perdeye dik olacak şekilde) ölçülür.

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

Aşağıdaki kod, ilk olarak Fenway Park'ın görünümüyle birlikte Boston haritasını gösterir. Pegman'i seçip 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;

JavaScript

function initialize() {
  const fenway = { lat: 42.345573, lng: -71.098326 };
  const map = new google.maps.Map(document.getElementById("map"), {
    center: fenway,
    zoom: 14,
  });
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
    {
      position: fenway,
      pov: {
        heading: 34,
        pitch: 10,
      },
    },
  );

  map.setStreetView(panorama);
}

window.initialize = initialize;

CSS

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

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

HTML

<html>
  <head>
    <title>Street View split-map-panes</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>
    <div id="pano"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initialize&v=weekly"
      defer
    ></script>
  </body>
</html>
Örneği görüntüleyin

Örneği Deneyin

Mobil cihazlarda hareket izleme

API, cihaz yön etkinliklerini destekleyen cihazlarda kullanıcılara cihazın hareketine bağlı olarak Street View bakışını değiştirme olanağı sunar. Kullanıcılar cihazlarını hareket ettirerek etrafa bakabilir. Buna hareket izleme veya cihaz dönüşü 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 izleme, destekleyen tüm cihazlarda etkindir. Aşağıdaki örnek, hareket izlemeyi devre dışı bırakır ancak hareket izleme kontrolünü 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ı, kontrole dokunarak hareket izlemeyi açabilir veya kapatabilir. Cihaz, hareket izlemeyi desteklemiyorsa motionTrackingControl değeri ne olursa olsun kontrolün hiçbir zaman görünmeyeceğini unutmayın.

    Aşağıdaki örnekte hem hareket izleme hem de hareket izleme kontrolü 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 kontrol, panoramanın sağ alt kısmına yakın bir yerde görünür (RIGHT_BOTTOM konumu). Aşağıdaki örnekte, kontrolün konumu sol alt olarak ayarlanı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 bir mobil cihazda (veya cihaz yön etkinliklerini destekleyen herhangi bir cihazda) aşağıdaki örneği görüntüleyin:


Örneği görüntüleyin

Sokak Görünümü'ndeki yer paylaşımları

Varsayılan StreetViewPanorama nesnesi, harita yer paylaşımları için yerel görünümü destekler. Yer paylaşımları genellikle LatLng konumlarına sabitlenmiş, "sokak seviyesinde" görünür. (Örneğin, işaretçiler Street View panoramasında konumun yatay düzlemine sabitlenmiş kuyruklarıyla 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örüntülediğiniz bindirmeler, Street View panoramasında, panorama Map nesnesinin yerine değerlendirilerek, setMap() çağrısı yapılarak ve StreetViewPanorama öğesi harita yerine bağımsız değişken olarak geçirilerek görüntülenebilir. Benzer şekilde, Street View panoraması içinde bilgi pencereleri de open() çağrısı yapılarak ve harita yerine StreetViewPanorama() üzerinden açılarak açılabilir.

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

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

TypeScript

let panorama: google.maps.StreetViewPanorama;

function initMap(): void {
  const astorPlace = { lat: 40.729884, lng: -73.990988 };

  // Set up the map
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      center: astorPlace,
      zoom: 18,
      streetViewControl: false,
    }
  );

  document
    .getElementById("toggle")!
    .addEventListener("click", toggleStreetView);

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

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

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


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

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

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

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView()!; // TODO fix type
  panorama.setPosition(astorPlace);
  panorama.setPov(
    /** @type {google.maps.StreetViewPov} */ {
      heading: 265,
      pitch: 0,
    }
  );
}

function toggleStreetView(): void {
  const toggle = panorama.getVisible();

  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

let panorama;

function initMap() {
  const astorPlace = { lat: 40.729884, lng: -73.990988 };
  // Set up the map
  const map = new google.maps.Map(document.getElementById("map"), {
    center: astorPlace,
    zoom: 18,
    streetViewControl: false,
  });

  document.getElementById("toggle").addEventListener("click", toggleStreetView);

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

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

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

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

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

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

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

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = map.getStreetView(); // TODO fix type
  panorama.setPosition(astorPlace);
  panorama.setPov(
    /** @type {google.maps.StreetViewPov} */ {
      heading: 265,
      pitch: 0,
    },
  );
}

function toggleStreetView() {
  const toggle = panorama.getVisible();

  if (toggle == false) {
    panorama.setVisible(true);
  } else {
    panorama.setVisible(false);
  }
}

window.initMap = initMap;

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: "Roboto", "sans-serif";
  line-height: 30px;
  padding-left: 10px;
}

#floating-panel {
  margin-left: -100px;
}

HTML

<html>
  <head>
    <title>Overlays Within Street View</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="floating-panel">
      <input type="button" value="Toggle Street View" id="toggle" />
    </div>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=weekly"
      defer
    ></script>
  </body>
</html>
Örneği görüntüleyin

Örneği Deneyin

Street View Etkinlikleri

Street View arasında gezinirken veya yönünü değiştirirken StreetViewPanorama durumundaki değişiklikleri gösteren çeşitli etkinlikleri izlemek isteyebilirsiniz:

  • pano_changed bağımsız pano kimliği değiştiğinde etkinleşir. Bu etkinlik, tetiklendiğinde panorama içindeki ilişkili verilerin de (bağlantılar gibi) 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 sabit olduğunu unutmayın.
  • Panoramanın temel (LatLng) konumu değiştiğinde position_changed tetiklenir. 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ği için, bir panoramanın temel konumunu, ilişkili pano kimliğini değiştirmeden değiştirebilirsiniz.
  • Street View'ın StreetViewPov 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ğindeki bir değişiklikten sonra eşzamansız olarak tetiklenebileceğini unutmayın.
  • Street View görünürlüğü değiştiğinde visible_changed etkinleşir. Bu etkinliğin, pano_changed aracılığıyla belirtilen pano kimliğindeki 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 işlenebileceğ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;

JavaScript

function initPano() {
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
    {
      position: { lat: 37.869, lng: -122.255 },
      pov: {
        heading: 270,
        pitch: 0,
      },
      visible: true,
    },
  );

  panorama.addListener("pano_changed", () => {
    const panoCell = document.getElementById("pano-cell");

    panoCell.innerHTML = panorama.getPano();
  });
  panorama.addListener("links_changed", () => {
    const linksTable = document.getElementById("links_table");

    while (linksTable.hasChildNodes()) {
      linksTable.removeChild(linksTable.lastChild);
    }

    const links = panorama.getLinks();

    for (const i in links) {
      const row = document.createElement("tr");

      linksTable.appendChild(row);

      const labelCell = document.createElement("td");

      labelCell.innerHTML = "<b>Link: " + i + "</b>";

      const valueCell = document.createElement("td");

      valueCell.innerHTML = links[i].description;
      linksTable.appendChild(labelCell);
      linksTable.appendChild(valueCell);
    }
  });
  panorama.addListener("position_changed", () => {
    const positionCell = document.getElementById("position-cell");

    positionCell.firstChild.nodeValue = panorama.getPosition() + "";
  });
  panorama.addListener("pov_changed", () => {
    const headingCell = document.getElementById("heading-cell");
    const pitchCell = document.getElementById("pitch-cell");

    headingCell.firstChild.nodeValue = panorama.getPov().heading + "";
    pitchCell.firstChild.nodeValue = panorama.getPov().pitch + "";
  });
}

window.initPano = initPano;

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#floating-panel {
  position: absolute;
  top: 10px;
  left: 25%;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
  text-align: center;
  font-family: "Roboto", "sans-serif";
  line-height: 30px;
  padding-left: 10px;
}

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

#floating-panel {
  width: 45%;
  height: 100%;
  float: right;
  text-align: left;
  overflow: auto;
  position: static;
  border: 0px solid #999;
}

HTML

<html>
  <head>
    <title>Street View Events</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="pano"></div>
    <div id="floating-panel">
      <table>
        <tr>
          <td><b>Position</b></td>
          <td id="position-cell">&nbsp;</td>
        </tr>
        <tr>
          <td><b>POV Heading</b></td>
          <td id="heading-cell">270</td>
        </tr>
        <tr>
          <td><b>POV Pitch</b></td>
          <td id="pitch-cell">0.0</td>
        </tr>
        <tr>
          <td><b>Pano ID</b></td>
          <td id="pano-cell">&nbsp;</td>
        </tr>
        <table id="links_table"></table>
      </table>
    </div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
Örneği görüntüleyin

Örneği Deneyin

Street View Kontrolleri

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

  • panControl, panoramayı döndürmek için bir yol sağlar. Bu denetim, varsayılan olarak standart bir entegre pusula ve kaydırma kontrolü olarak görünür. panControlOptions alanı içinde PanControlOptions sağlarsanız kontrolün konumunu değiştirebilirsiniz.
  • zoomControl, resmi yakınlaştırmak için bir yöntem sunar. Bu denetim, varsayılan olarak panoramanın sağ alt kısmına yakın bir yerde görünür. zoomControlOptions alanı içinde ZoomControlOptions değerini sağlayarak kontrolün görünümünü değiştirebilirsiniz.
  • addressControl, ilişkilendirilen konumun adresini belirten bir metin yer paylaşımı ve konumu Google Haritalar'da açmak için bir bağlantı sunar. addressControlOptions alanı içinde StreetViewAddressControlOptions değerini sağlayarak kontrolün görünümünü değiştirebilirsiniz.
  • fullscreenControl, Street View'ı tam ekran modunda açma seçeneği sunar. fullscreenControlOptions alanı içinde FullscreenControlOptions değerini 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 kısmına yakın bir yerde görünür. MotionTrackingControlOptions sağlayarak kontrolün konumunu değiştirebilirsiniz. Daha fazla bilgi için hareket izleme konulu bölüme bakın.
  • linksControl işareti, bitişik panorama resimlere gitmek için resim üzerinde kılavuz oklar sağlar.
  • Kapat kontrolü, kullanıcının Street View görüntüleyicisini kapatmasına olanak tanır. enableCloseButton öğesini true veya false değerine ayarlayarak Kapat denetimini etkinleştirebilir veya devre dışı bırakabilirsiniz.

Aşağıdaki örnek, ilişkili Street View'da görüntülenen denetimleri 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;

JavaScript

function initPano() {
  // Note: constructed panorama objects have visible: true
  // set by default.
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map"),
    {
      position: { lat: 42.345573, lng: -71.098326 },
      addressControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_CENTER,
      },
      linksControl: false,
      panControl: false,
      enableCloseButton: false,
    },
  );
}

window.initPano = initPano;

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

HTML

<html>
  <head>
    <title>Street View Controls</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
Örneği görüntüleyin

Örneği Deneyin

Street View Verilerine Doğrudan Erişme

Street View verilerinin kullanılabilirliğini programlı olarak 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 verilere arayüz sağlayan StreetViewService nesnesini kullanarak yapabilirsiniz.

Street View Hizmet İstekleri

Google Maps API'nin harici bir sunucuya çağrı yapması gerektiğinden, Street View hizmetine erişim eşzamansız olarak gerçekleştirilmektedir. Bu nedenle, isteğin tamamlanmasının ardından yürütülecek bir callback yöntemi iletmeniz gerekir. Bu geri çağırma yöntemi sonucu işler.

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

StreetViewPanoRequest kullanan bir istek, panoramayı benzersiz şekilde tanımlayan bir referans kimliği verilen panorama verilerini döndürür. Bu referans kimliklerinin yalnızca ilgili panoramanın görüntülerinin ömrü boyunca kararlı olduğunu unutmayın.

StreetViewLocationRequest kullanan bir istek, aşağıdaki parametreleri kullanarak belirli bir konumda panorama verilerini arar:

  • location, panoramanın aranacağı konumu (enlem ve boylam) belirtir.
  • preference, yarıçap içinde bulunan panoramalardan hangisinin bulunduğuna ilişkin bir tercih belirler: belirtilen konuma en yakın olan veya yarıçap içindeki en iyi panorama.
  • radius, belirtilen enlem ve boylamın merkezinde yer alan, panorama araması yapmak için metre cinsinden belirtilen bir yarıçap belirler. Sağlanmadığında varsayılan olarak 50 değerine ayarlanır.
  • source, aranacak panoramaların kaynağını belirtir. Geçerli değerler aşağıda belirtilmiştir:
    • 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 panoramalarının bulunmayabileceğini unutmayın.

Street View Hizmet Yanıtları

getPanorama() işlevinin, Street View hizmetinden bir sonuç alındığında yürütülmesi için bir geri çağırma işlevine ihtiyacı vardır. Bu geri çağırma işlevi, bir StreetViewPanoramaData nesnesindeki panorama verilerini ve isteğin durumunu ilgili sırayla gösteren StreetViewStatus kodunu döndürür.

StreetViewPanoramaData nesne spesifikasyonu, şu 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 kendisinin bir StreetViewPanorama nesnesi olmadığını unutmayın. Bu verileri kullanarak bir Street View nesnesi oluşturmak için bir StreetViewPanorama oluşturmanız ve döndürülen location.pano alanında belirtilen kimliği ileterek setPano() yöntemini çağırmanız 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 geçirilen ölçütlerle eşleşen bir panorama bulamadığını belirtir.
  • UNKNOWN_ERROR, tam nedeni bilinmese de bir Street View isteğinin işleme alınamadığını belirtir.

Aşağıdaki kod, tıklandığında haritadaki ilgili konuma ait StreetViewPanorama gösteren işaretçiler oluşturarak kullanıcı tıklamalarına yanıt veren bir StreetViewService oluşturur. 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;

JavaScript

/*
 * Click the map to set a new location for the Street View camera.
 */
let map;
let panorama;

function initMap() {
  const berkeley = { lat: 37.869085, lng: -122.254775 };
  const sv = new google.maps.StreetViewService();

  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano"),
  );
  // Set up the map.
  map = new google.maps.Map(document.getElementById("map"), {
    center: berkeley,
    zoom: 16,
    streetViewControl: false,
  });
  // Set the initial Street View camera to the center of the map
  sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData);
  // Look for a nearby Street View panorama when the map is clicked.
  // getPanorama will return the nearest pano when the given
  // radius is 50 meters or less.
  map.addListener("click", (event) => {
    sv.getPanorama({ location: event.latLng, radius: 50 })
      .then(processSVData)
      .catch((e) =>
        console.error("Street View data not found for this location."),
      );
  });
}

function processSVData({ data }) {
  const location = data.location;
  const marker = new google.maps.Marker({
    position: location.latLng,
    map,
    title: location.description,
  });

  panorama.setPano(location.pano);
  panorama.setPov({
    heading: 270,
    pitch: 0,
  });
  panorama.setVisible(true);
  marker.addListener("click", () => {
    const markerPanoID = location.pano;

    // Set the Pano to use the passed panoID.
    panorama.setPano(markerPanoID);
    panorama.setPov({
      heading: 270,
      pitch: 0,
    });
    panorama.setVisible(true);
  });
}

window.initMap = initMap;

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

HTML

<html>
  <head>
    <title>Directly Accessing Street View Data</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map" style="width: 45%; height: 100%; float: left"></div>
    <div id="pano" style="width: 45%; height: 100%; float: left"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
Örneği görüntüleyin

Örneği Deneyin

Özel Street View Panoramaları sağlama

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

Özel panorama görüntüleri oluşturmak için aşağıdaki adımlar uygulanır:

  • Her özel panorama için temel bir panoramik resim oluşturun. Bu temel resim, yakınlaştırılmış görüntüleri sunmak 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 dizi panoramik karo oluşturun.
  • Özel panoramalarınız arasında bağlantılar oluşturun.
  • (İsteğe bağlı) Google'ın mevcut Street View görüntülerinde"giriş" panoramalarını belirtin ve özel küme ile standart küme arasındaki bağlantıları özelleştirin.
  • Bir StreetViewPanoramaData nesnesindeki her bir panorama resmi için meta verileri tanımlayın.
  • Özel panorama verilerini ve resimleri belirleyen bir yöntem uygulayın ve bu yöntemi StreetViewPanorama nesnesinde özel işleyiciniz olarak atayın.

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

Özel Panoramalar Oluşturma

Her bir Street View panoraması, tek bir konumdan tam 360 derecelik görünüm sağlayan bir resim veya resim kümesidir. StreetViewPanorama nesnesi, eş dikdörtgen (Plate Carrée) projeksiyonuna uygun resimler kullanır. Böyle bir projeksiyon, 360 derece yatay görünüm (tam ekran) ve 180 derece dikey görünüm (düzden aşağıya doğru) içerir. Bu görünüm alanları 2:1 en boy oranına sahip bir görselle sonuçlanır. Aşağıda tam olarak kaplanmış bir panorama gösterilmektedir.

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

Panorama görüntüleri genellikle bir konumdan birden fazla fotoğraf çekilip panorama yazılımı kullanılarak 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 bakın.) Bu tür resimler, panorama resimlerinin her birinin çekildiği tek bir "kamera" konumunu paylaşmalıdır. Ortaya çıkan 360 derecelik panorama, görüntünün kürenin iki boyutlu yüzeyine sarıldığı, küre üzerinde bir projeksiyon tanımlamaktır.

Yüzeyinde bir sokağın panorama görünümünün bulunduğu küre

Panoramayı, doğrusal koordinat sistemine sahip bir küre üzerindeki projeksiyon olarak ele almak, resmi doğrusal karolara bölerken ve hesaplanan karo koordinatlarına göre resim sunarken avantaj sağlar.

Özel Panorama Karoları Oluşturma

Street View, varsayılan görünümde yakınlaştırma ve uzaklaştırma yapmanıza olanak tanıyan yakınlaştırma denetimi aracılığıyla farklı düzeylerde görüntü ayrıntılarını da destekler. Street View, genel olarak herhangi bir panorama resmi için beş seviye yakınlaştırma çözünürlüğü sağlar. Tüm yakınlaştırma düzeylerini sunmak için tek bir panorama resmi kullanacak olsaydınız, bu tür bir resim çok büyük boyutlu ve uygulamanızı önemli ölçüde yavaşlatacaktı veya daha yüksek yakınlaştırma düzeylerinde o kadar kötü bir çözünürlükte olacaktı ki, kötü pikselleştirilmiş bir resim sunacaksınız. Neyse ki, her yakınlaştırma düzeyinde panoramalar için uygun çözünürlüklü görüntüler sağlamak amacıyla Google'ın harita desenlerini farklı yakınlaştırma düzeylerinde sunmak için kullanılan benzer bir tasarım kalıbı kullanabiliriz.

Bir StreetViewPanorama ilk kez yüklendiğinde, varsayılan olarak, 1. yakınlaştırma düzeyinde panoramanın yatay genişliğinin %25'ini (90 derece yay) oluşan bir resim görüntüler. Bu görünüm, genel olarak normal bir insan görüş alanına karşılık gelir. Bu varsayılan görünümü "uzaklaştırdığınızda" daha geniş bir yay elde edilir. Yakın yakınlaştırma ise görüş alanını daha küçük bir açıyla 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 hemen hemen eşleşen bir karo grubu seçerek bu çözünürlük için en uygun görüntüleri seçer. Street View yakınlaştırma düzeylerine ilişkin görünüm haritasında aşağıdaki alanlar:

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, herhangi bir yakınlaştırma düzeyi için aynı görüş alanını sağlamaya devam eder ancak bu çözünürlük için daha uygun olan karoları seçebilir.

Her panorama eş dikdörtgen projeksiyondan oluştuğundan, panorama karoları oluşturmak nispeten kolaydır. Projeksiyon en boy oranı 2:1 olan bir görüntü sağladığından, 2:1 en boy oranına sahip karoların kullanımı daha kolaydır, ancak kare karolar, (görüş alanı kare olduğu için) kare haritalarda daha iyi performans sağlayabilir.

2:1 karolar için, tüm panoramayı kapsayan tek bir resim, yakınlaştırma düzeyi 0'da tüm panorama "dünyasını" (temel resim) temsil eder ve her artan yakınlaştırma seviyesi 4 zoomLevel karosu sunar. (Ör. yakınlaştırma düzeyi 2 olduğunda tüm panorama 16 karodan oluşur.) Not: Street View parçalarındaki yakınlaştırma düzeyleri, Street View kontrolü kullanılarak sağlanan yakınlaştırma seviyeleriyle doğrudan eşleşmez. Bunun yerine Street View kontrolü yakınlaştırma seviyeleri, uygun karoların seçileceği bir Görüş Alanı (FoV) seçer.

Karolara bölünmüş şehir sokağının panorama görünümü

Genel olarak resim karolarınızı programatik olarak seçilebilecek şekilde adlandırmanız gerekir. Böyle bir adlandırma şeması, aşağıda Özel Panorama İsteklerini İşleme bölümünde açıklanmış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 StreetViewPanoramaData nesnesi döndürmelidir ve şu imzaya sahip olmalıdır:

Function(pano):StreetViewPanoramaData

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() numaralı telefonu arayı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 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ün.

Not: Özel panoramalar görüntülemek istediğinizde StreetViewPanorama üzerinde doğrudan 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 isteme talimatı verir. 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 bir haritanın veya varsayılan Street View görüntüsünün kullanılmadığını unutmayın:

TypeScript

function initPano() {
  // Set up Street View and initially set it visible. Register the
  // custom panorama provider function. Set the StreetView to display
  // the custom panorama 'reception' which we check for below.
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map") as HTMLElement,
    { pano: "reception", visible: true }
  );

  panorama.registerPanoProvider(getCustomPanorama);
}

// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(
  pano: string,
  zoom: number,
  tileX: number,
  tileY: number
): string {
  return (
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/" +
    "panoReception1024-" +
    zoom +
    "-" +
    tileX +
    "-" +
    tileY +
    ".jpg"
  );
}

// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano: string): google.maps.StreetViewPanoramaData {
  if (pano === "reception") {
    return {
      location: {
        pano: "reception",
        description: "Google Sydney - Reception",
      },
      links: [],
      // The text for the copyright control.
      copyright: "Imagery (c) 2010 Google",
      // The definition of the tiles for this panorama.
      tiles: {
        tileSize: new google.maps.Size(1024, 512),
        worldSize: new google.maps.Size(2048, 1024),
        // The heading in degrees at the origin of the panorama
        // tile set.
        centerHeading: 105,
        getTileUrl: getCustomPanoramaTileUrl,
      },
    };
  }
  // @ts-ignore TODO fix typings
  return null;
}

declare global {
  interface Window {
    initPano: () => void;
  }
}
window.initPano = initPano;

JavaScript

function initPano() {
  // Set up Street View and initially set it visible. Register the
  // custom panorama provider function. Set the StreetView to display
  // the custom panorama 'reception' which we check for below.
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map"),
    { pano: "reception", visible: true },
  );

  panorama.registerPanoProvider(getCustomPanorama);
}

// Return a pano image given the panoID.
function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) {
  return (
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/" +
    "panoReception1024-" +
    zoom +
    "-" +
    tileX +
    "-" +
    tileY +
    ".jpg"
  );
}

// Construct the appropriate StreetViewPanoramaData given
// the passed pano IDs.
function getCustomPanorama(pano) {
  if (pano === "reception") {
    return {
      location: {
        pano: "reception",
        description: "Google Sydney - Reception",
      },
      links: [],
      // The text for the copyright control.
      copyright: "Imagery (c) 2010 Google",
      // The definition of the tiles for this panorama.
      tiles: {
        tileSize: new google.maps.Size(1024, 512),
        worldSize: new google.maps.Size(2048, 1024),
        // The heading in degrees at the origin of the panorama
        // tile set.
        centerHeading: 105,
        getTileUrl: getCustomPanoramaTileUrl,
      },
    };
  }
  // @ts-ignore TODO fix typings
  return null;
}

window.initPano = initPano;

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

HTML

<html>
  <head>
    <title>Custom Street View Panoramas</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
Örneği görüntüleyin

Örneği Deneyin

Özel panorama sağlayıcısı, iletilen panorama kimliği, yakınlaştırma düzeyi ve panorama karosu koordinatlarına göre uygun karoyu döndürür. Görüntü seçimi, iletilen bu değerlere bağlı olduğundan pano_zoom_tileX_tileY.png gibi iletilen bu değerlere göre programatik olarak seçilebilen görüntüleri adlandırmak faydalıdır.

Aşağıdaki örnekte, varsayılan Street View gezinme oklarına ek olarak, resme 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;

JavaScript

let panorama;
// StreetViewPanoramaData of a panorama just outside the Google Sydney office.
let outsideGoogle;

// StreetViewPanoramaData for a custom panorama: the Google Sydney reception.
function getReceptionPanoramaData() {
  return {
    location: {
      pano: "reception", // The ID for this custom panorama.
      description: "Google Sydney - Reception",
      latLng: new google.maps.LatLng(-33.86684, 151.19583),
    },
    links: [
      {
        heading: 195,
        description: "Exit",
        pano: outsideGoogle.location.pano,
      },
    ],
    copyright: "Imagery (c) 2010 Google",
    tiles: {
      tileSize: new google.maps.Size(1024, 512),
      worldSize: new google.maps.Size(2048, 1024),
      centerHeading: 105,
      getTileUrl: function (pano, zoom, tileX, tileY) {
        return (
          "https://developers.google.com/maps/documentation/javascript/examples/full/images/" +
          "panoReception1024-" +
          zoom +
          "-" +
          tileX +
          "-" +
          tileY +
          ".jpg"
        );
      },
    },
  };
}

function initPanorama() {
  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("street-view"),
    { pano: outsideGoogle.location.pano },
  );
  // Register a provider for the custom panorama.
  panorama.registerPanoProvider((pano) => {
    if (pano === "reception") {
      return getReceptionPanoramaData();
    }
    // @ts-ignore TODO fix typings
    return null;
  });
  // Add a link to our custom panorama from outside the Google Sydney office.
  panorama.addListener("links_changed", () => {
    if (panorama.getPano() === outsideGoogle.location.pano) {
      panorama.getLinks().push({
        description: "Google Sydney",
        heading: 25,
        pano: "reception",
      });
    }
  });
}

function initMap() {
  // Use the Street View service to find a pano ID on Pirrama Rd, outside the
  // Google office.
  new google.maps.StreetViewService()
    .getPanorama({ location: { lat: -33.867386, lng: 151.195767 } })
    .then(({ data }) => {
      outsideGoogle = data;
      initPanorama();
    });
}

window.initMap = initMap;

CSS

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

#street-view {
  height: 100%;
}

HTML

<html>
  <head>
    <title>Custom Street View Panorama Tiles</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="street-view"></div>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
Örneği görüntüleyin

Örneği Deneyin