Street View Hizmeti

Genel Bakış

Platform seçin: Android iOS JavaScript

Google Street View, dünyanın dört bir yanından panoramik 360 derecelik görüntüler kapsama alanı boyunca belirlenmiş yollara sahip olmalıdır. Street View API'si Google Haritalar uygulamasının kapsamı, (https://maps.google.com/). Şu anki mevcut Street View için desteklenen şehirler şurada mevcuttur: Google Haritalar web sitesi.

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


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

Street View Harita Kullanımı

Street View, yalnızca belirli bir mesafe içinde bağımsız DOM öğesine sahip olması yararlı olabilir. Varsayılan olarak, Street View haritada etkin olduğunda ve Street View Pegman kontrolü görünürse (yakınlaştırma ve kaydırma) kontrolleriyle entegre edilmiştir. Bunu gizleyebilirsiniz haritayı MapOptions içinde kontrol edin streetViewControl - false. Şunları da değiştirebilirsiniz: Street View kontrolünün varsayılan konumunu Map streetViewControlOptions.position ayarlanıyor mülkündeki her şeyi yeni bir ControlPosition olarak ayarlayın.

Street View Pegman denetimi, Street View'ı görüntülemenize olanak tanır. bir görüntü oluşturabilirsiniz. Kullanıcı Pegman'i tıklayıp basılı tuttuğunda Street View uyumlu sokaklar için mavi dış çizgileri gösterecek şekilde güncellenir, Google Haritalar uygulamasına benzer bir kullanıcı deneyimi sunuyor.

Kullanıcı Pegman işaretçisini sokağa bıraktığında harita belirtilen konumun Street View panoramasını görüntüleyin.

Street View Panoramaları

Street View görüntüleri API sağlayan StreetViewPanorama nesnesi bir Street View "görüntüleyicisi" olarak tanıyacağız. Her haritada bir varsayılan Street View panoramasını görüntülemek için haritanın getStreetView() yöntemi. Bir Street View eklediğinizde streetViewControl ayarlayarak haritayı kontrol edin true seçeneği sunulursa Pegman'i otomatik olarak bu varsayılan Street View panoramasını kontrol edebilirsiniz.

Kendi StreetViewPanorama öğenizi de oluşturabilirsiniz kullanarak haritayı varsayılan nesne yerine bunu kullanacak şekilde haritanın streetView özelliğini açıkça en iyi uygulamadır. Varsayılan panoramayı geçersiz kılmak isteyebilirsiniz. otomatik oynatma gibi varsayılan davranışı değiştirmek isterseniz fotoğraf ve panorama arasında paylaştırılır. (Bkz. Aşağıdaki Street View'daki yer paylaşımları bölümüne gidin.)

Street View Kapsayıcıları

Bunun yerine bir StreetViewPanorama görüntülemesi de isteyebilirsiniz genellikle <div> öğesi olur. StreetViewPanorama içindeki DOM öğesini kurucusu. Resimlerin optimum şekilde görüntülenmesi için 200 piksel x 200 piksel.

Not: Street View görüntülerine rağmen bir haritayla birlikte kullanılmak üzere tasarlanır. herhangi bir işlem yapmanız gerekmez. Bağımsız bir Street View nesnesi kullanabilirsiniz. bunu yapabilirsiniz.

Street View konumları ve bakış açısı (bakış açısı)

StreetViewPanorama oluşturucusu, aşağıdakileri yapmanıza da olanak tanır. Street View konumunu ve bakış açısını ayarlamak için StreetViewOptions parametresinden yararlanın. Nesnede setPosition() ve setPov() öğelerini şu süreden sonra çağırabilirsiniz: ve bakış açısını değiştirmek üzere inşaat işleri.

Street View konumu, kamera odağının yerini belirler ancak kameranın yönünü tanımlamaz. seçmeniz gerekir. Bu amaçla, StreetViewPov nesnesi iki özellik tanımlar:

  • heading (varsayılan 0), dönme açısını tanımlar dereceler halinde kamera lokmasının çevresine doğru dönüştürüyor. Başlıklar: saat yönünde ölçülür (90 derece doğru doğuyu ifade eder).
  • pitch (varsayılan 0), açı varyansını tanımlar "yukarı" veya "down" kameranın ilk varsayılan perdesindedir; bu, sıklıkla (ancak her zaman değil) düz yatay. (Örneğin, bir tepede çekilen bir resim genellikle yatay olmayan bir varsayılan ses tonu gösterir.) Ses perdesi açıları yukarı doğru bakan pozitif değerlerle ölçülür (en fazla +90 derece varsayılan perdeye dikey) ve aşağı bakan negatif değerler (-90'a) dereceden aşağı doğru olacak şekilde ve varsayılan perdeye göre dikey olarak ayarlanır).

StreetViewPov nesnesi genellikle bir bakış açısı sağlar. Ayrıca, kullanıcıların bakış açısına, yani genellikle fotoğrafçının araba üç tekerleğinde StreetViewPanorama.getPhotographerPov() yöntemi.

Aşağıdaki kodda Boston haritası, Fenway'in ilk görünümüyle birlikte görüntülenmektedir Parkur. Pegman'i seçip haritada desteklenen bir konuma sürükleme Street View panoramasını değiştirir:

TypeScript

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

  map.setStreetView(panorama);
}

declare global {
  interface Window {
    initialize: () => void;
  }
}
window.initialize = initialize;
index.ts

JavaScript

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

  map.setStreetView(panorama);
}

window.initialize = initialize;
index.js

CSS

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

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

style.css

HTML

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

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

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

Örneği Deneyin

Mobil cihazlarda hareket izleme

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

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

  • Hareket izleme işlevini etkinleştirin veya devre dışı bırakın. Varsayılan olarak hareket destekleyen tüm cihazlarda izlemenin etkinleştirilmesi gerekir. Aşağıdaki örnek hareket izlemeyi devre dışı bırakır ancak hareket izleme kontrolünü görünür 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 denetim, hareket izlemeyi destekleyen cihazlarda gösterilir. Kullanıcı hareket izlemeyi açmak veya kapatmak için kontrol düğmesine basın. Kontrolün cihaz hareket izlemeyi desteklemiyorsa hiçbir zaman motionTrackingControl değerine ayarlanır.

    Aşağıdaki örnek hem hareket izlemeyi hem de hareket izleme kontrolü. Bu durumda, kullanıcı hareketi takip ediliyor:

    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 düğmesi, panoramanın sağ alt tarafına yakın görünür (konumun RIGHT_BOTTOM) bilgileri gösterilir. Aşağıdaki örnek, kontrolü sol alta taşıyabilirsiniz: 
    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 uygulamalı olarak görmek için aşağıdaki örneği bir mobil cihazda görüntüleyin cihaz (veya cihaz yönü etkinliklerini destekleyen herhangi bir cihaz):


Örneği inceleyin

Street View içindeki bindirmeler

Varsayılan StreetViewPanorama nesnesi, yereli destekler haritanın görüntülenmesi yer paylaşımları. Bindirmeler genellikle "sokak düzeyinde" görünür LatLng üzerinde sabitlendi gösterir. (İşaretçiler kuyrukları konumun bir yatay düzlemde yer alıyor.)

Şu anda Street View'da desteklenen yer paylaşımı türleri panoramalar Marker, InfoWindow ve özel OverlayView'ler. Harita üzerinde görüntülediğiniz bindirmeler, panoramanın yerine geçerek Street View panoramasında gösterilir Map nesnesi için setMap() çağrısı yapıyor ve geçiliyor StreetViewPanorama öğesini harita yerine bağımsız değişken olarak kullanabilirsiniz. Bilgi benzer şekilde pencereler, telefon araması yapılarak bir Street View panoraması içinde açılabilir open(), yerine StreetViewPanorama() iletiliyor bir haritadır.

Ayrıca, varsayılan değeri olan bir harita oluştururken StreetViewPanorama, haritada oluşturulan tüm işaretçiler paylaşılacak Haritanın ilişkili Street View panoraması ile otomatik olarak emin olun. Varsayılan Street View panoramasını almak için şu numarayı arayın: Map nesnesinde getStreetView(). haritanın streetView özelliğini açıkça Kendi yapınızın StreetViewPanorama tanesi, geçersiz kılınacak varsayılan panoramayı oluşturabilirsiniz.

Aşağıdaki örnekte, otelin çevresindeki çeşitli konumları belirten işaretçiler gösterilmektedir Astor Place, New York'ta. Göstermek için ekranı Street View'a geçirin: StreetViewPanorama içinde görüntülenen paylaşılan işaretçiler.

TypeScript

let panorama: google.maps.StreetViewPanorama;

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

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

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

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

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

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


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

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

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

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

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

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

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

JavaScript

let panorama;

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

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

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

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

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

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

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

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

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

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

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

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

window.initMap = initMap;
index.js

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>

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

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

Örneği Deneyin

Street View Etkinlikleri

Street View arasında gezinirken veya Street View üzerinde değişiklik yaparken bu yönüyle ilgili başka bilgi sahibi olan StreetViewPanorama öğesinin durumunda yapılan değişiklikler:

  • pano_changed, ayrı bir panoda her etkinleştiğinde tetiklenir Kimlik değişiklikleri. Bu etkinlik, bu etkinliğin gerçekleştiği zamana kadar panorama (bağlantılar gibi) de değişmiştir tetiklendiğinde; bu etkinlik yalnızca bir panonun Kimlik değişti. Panonun kimliğinin (bunları, yeni bir kaynak oluşturmak için yalnızca geçerli tarayıcı oturumunda kararlı çalışır.
  • position_changed, arka plandaki Panoramanın konumu (LatLng) değişir. Döner Başlıklı bu etkinliği bir panorama tetiklemez. Bu e-postada, bir panoramanın temel konumunu (ilişkilendirilmiş) değiştirmeden, otomatik olarak en yakın kaynakla ilişkilendireceği için, panoramanın konumunu gösteren pano kimliğini de içerir.
  • Street View her etkinleştiğinde pov_changed tetiklenir StreetViewPov değişiklik. Bu etkinliğin tetiklenebileceğini unutmayın Bununla birlikte, konum ve pano kimliği sabit kalır.
  • Street View her etkinleştiğinde links_changed tetiklenir bağlantılar değişir. Bu etkinliğin aşağıdaki komuttan sonra eşzamansız olarak tetiklenebileceğini unutmayın: pano_changed tarihine kadar belirtilen pano kimliğinde değişiklik.
  • Street View her etkinleştiğinde visible_changed tetiklenir görünürlük değişiklikleridir. Bu etkinliğin aşağıdaki komuttan sonra eşzamansız olarak tetiklenebileceğini unutmayın: pano_changed tarihine kadar belirtilen pano kimliğinde değişiklik.

Aşağıdaki kod, bu etkinliklerin nasıl işlenebileceğini gösterir. (StreetViewPanorama) hakkında veri toplamak için:

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>

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

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

Örneği Deneyin

Street View Denetimleri

StreetViewPanorama görüntülenirken denetimler varsayılan olarak panoramada görünür. Bu seçeneği etkinleştirebilir veya devre dışı bırakabilirsiniz içindeki uygun alanları ayarlayarak StreetViewPanoramaOptions true veya false adlı gruba:

  • panControl, döndürmek için bir yöntem sağlar bir plan yapın. Bu denetim, varsayılan olarak standart entegre pusula olarak görünür ve kaydırma kontrolü. Kontrolün konumunu değiştirmek için PanControlOptions içinde panControlOptions alanı.
  • zoomControl, resmi yakınlaştırmak için bir yol sağlar. Bu denetiminiz panoramanın sağ alt tarafına yakın bir yerde varsayılan olarak görünür. Kontrol panelinin görünümünü değiştirmek için ZoomControlOptions içinde zoomControlOptions alanı.
  • addressControl, yer paylaşımlı olarak kullanılan ve ilgili konumun adresini içerir ve konumu Google Haritalar'da bulabilirsiniz. Kontrol panelinin görünümünü değiştirmek için StreetViewAddressControlOptions içinde addressControlOptions alanı.
  • fullscreenControl, Street View'ı açma seçeneği sunar. tam ekran modunda. Kontrol panelinin görünümünü değiştirmek için FullscreenControlOptions içinde fullscreenControlOptions alanı.
  • motionTrackingControl, bir öğeyi mobil cihazlarda hareket izlemeyi devre dışı bırakma. Bu denetim yalnızca görünür cihaz yönü etkinliklerini destekleyen cihazlarda kullanın. Varsayılan olarak, panoramanın sağ alt tarafına yakın bir yerde görünür. Kontrollerin MotionTrackingControlOptions sağlayarak daha iyi bir konum elde edebilirsiniz. Daha fazla bilgi için Hareket moduyla ilgili bölüme izleme.
  • linksControl, resimde şunun için kılavuz okları sağlar: resimlere seyahat eder.
  • Kapat denetimi, kullanıcının Street View görüntüleyicisini kapatmasına olanak tanır. Şunları yapabilirsiniz: öğesini ayarlayarak Kapat kontrolünü etkinleştirin veya devre dışı bırakın enableCloseButton - true veya false.

Aşağıdaki örnekte, ilişkili Street View'a girer 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>

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

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

Örneği Deneyin

Street View Verilerine Doğrudan Erişme

Bir projenin mevcut olup olmadığını belirli panoramalar hakkında bilgi döndürecek veya Bir haritanın/panoramanın doğrudan değiştirilmesine gerek kalmadan. Bu durumda şunları yapabilirsiniz: Bu işlem, StreetViewService nesnesini kullanarak Google'ın Street View hizmetinde depolanan verilerin arayüzü.

Street View Hizmet İstekleri

Google Maps API'si ile Street View hizmetine erişim eş zamansızdır harici bir sunucuya çağrı yapması gerekiyor. Bu nedenle istek tamamlandıktan sonra yürütülecek bir callback yöntemi. Bu geri çağırma yöntemi sonucu işler.

StreetViewService aracına istek göndermek için şu komutu kullanın: StreetViewPanoRequest veya StreetViewLocationRequest.

StreetViewPanoRequest kullanan bir istek panorama döndürüyor Panoramayı benzersiz şekilde tanımlayan bir referans kimliği içeren veriler. Lütfen bu referans kimlikleri yalnızca, söz konusu referansa ait görüntülerin ömrü boyunca sabittir: bir plan yapın.

StreetViewLocationRequest kullanan bir istek şunun için arama yapıyor: belirli bir konumdaki panorama verilerini kullanarak şu parametreleri kullanabilirsiniz:

  • location, aranacak konumu (enlem ve boylam) belirtir görebilirsiniz.
  • preference, yarıçap: sağlanan konuma en yakın olan veya yarıçap içindeki en iyi konum.
  • radius, panorama aramak için metre cinsinden belirtilen bir yarıçap belirler. alınan enlem ve boylama odaklanır. Sağlanmazsa varsayılan olarak 50 değerine ayarlanır.
  • source, aranacak panoramaların kaynağını belirtir. Geçerli değerler şunlardır:
    • default, Street View için varsayılan kaynakları kullanır; aramalar belirli kaynaklarla sınırlı değildir.
    • outdoor, aramaları açık hava koleksiyonlarıyla sınırlandırır. Belirtilen konum için dış mekan panoramalarının mevcut olmayabileceğini unutmayın.

Street View Hizmet Yanıtları

getPanorama() fonksiyonu Bir sonuç alındığında yürütülmesi için bir callback işlevine ihtiyaç duyar Street View hizmetinden faydalanabilirsiniz. Bu geri çağırma işlevi, StreetViewPanoramaData nesnesi ve İsteğin durumunu belirten StreetViewStatus kodu, gerekir.

StreetViewPanoramaData nesne spesifikasyonu Street View panoraması hakkındaki meta verileri aşağıda bulabilirsiniz:

{
  "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 bir StreetViewPanorama olmadığını unutmayın oluşturmanız gerekir. Bu verileri kullanarak bir Street View nesnesi oluşturmak için bir StreetViewPanorama oluşturmalı ve setPano(), döndürülen dosyadaki kimliği ileterek location.pano alanı için geçerlidir.

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

  • OK, hizmetin eşleşen bir plan yapın.
  • ZERO_RESULTS, hizmetin eşleşen panoramayı geçirilen ölçütlerle eşleşiyor.
  • UNKNOWN_ERROR, bir Street View isteğinin olduğunu gösterir Kesin nedeni bilinmese de işlenemedi.

Aşağıdaki kod bir StreetViewService oluşturur haritadaki kullanıcı tıklamalarına yanıt veren ve otomatik olarak tıklandığında bunun bir StreetViewPanorama göster konum. Kod, StreetViewPanoramaData içeriğini kullanır geri dönüyor.

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>

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

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

Örneği Deneyin

Özel Street View Panoramaları Sağlama

Maps JavaScript API özel panoramaların görüntülenmesini destekler StreetViewPanorama nesnesinin içinde olur. Özel kullanılıyor binaların iç kısımlarını, dış mekan görünümleri ya da hayalinizdeki herhangi bir şeyi içerebilir. İsterseniz bu özel panoramaları Google'ın mevcut Street View görüntülerine bağlayın panoramalar.

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

  • Her özel panorama için bir temel panoramik resim oluşturun. Bu ana resim, kullanılacak en yüksek çözünürlüklü yakınlaştırılmış görüntüler sunmak istediğinizi varsayalım.
  • (İsteğe bağlı, ancak önerilir) Bir dizi panoramik karo oluşturun temel görüntüden farklı yakınlaştırma seviyelerinde gösterilir.
  • Özel panoramalarınız arasında bağlantılar oluşturun.
  • (İsteğe bağlı) "Giriş"i belirtin içindeki panoramalar Google'ın mevcut Street View görüntüleri ve bağlantıları özelleştirme ile özel kümeden standart kümeye.
  • Her panorama resmi için meta verileri tanımlayın StreetViewPanoramaData nesnesinin içinde olur.
  • Özel panoramayı belirleyen yöntemi uygulama ve bu yöntemi özel işleyiciniz olarak belirleyin StreetViewPanorama nesnesinin içinde olur.

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

Özel Panoramalar Oluşturma

Her Street View panoraması bir resim veya resim kümesidir tek bir konumdan tam 360 derece görünüm sağlar. StreetViewPanorama nesnesi eşdikdörtgene (Plamento) uyan resimler kullanır Carrée) projeksiyonu. Böyle bir projeksiyon 360 derece içerir yatay görünüm (tam çerçeve) ve 180 derecelik dikey görünüm (düz görünümden dümdüz aşağıya doğru). Bu alanlar resmin en boy oranı 2:1 olur. CEVAP tam çerçeveleme panorama aşağıda gösterilmiştir.

Şehirdeki bir sokağın panorama görünümü

Panorama görüntüleri genellikle birden fazla bir konumdan fotoğrafları birleştirerek bunları bir yazılımdır. (bkz. Vikipedi'nin Daha fazla bilgi için fotoğraf birleştirme uygulamalarının karşılaştırması başlıklı makaleye göz atın.) Bu tür resimler tek bir "kamera"yı paylaşmalıdır locus olarak tanımlar. İlgili içeriği oluşturmak için kullanılan bu şekilde, mevcut 360 derecelik panoramanın üzerinde bir projeksiyon resmin iki boyutlu yüzeye sarıldığı bir küre oluşturuyoruz.

yüzeyinde bir sokağın panorama görünümünün yer aldığı küre

Panoramayı doğrusal bir küre üzerinde projeksiyon olarak ele alma koordinat sistemi avantajlı bir resimdir, doğrusal karolara ve hesaplanan karoya göre görüntü sunma koordinatlar.

Özel Panorama Karoları Oluşturma

Street View ayrıca ve görünümü yakınlaştırmanızı ve uzaklaştırmanızı sağlayan Varsayılan görünüme sahiptir. Street View genellikle beş herhangi bir panorama görseli için yakınlaştırma ve uzaklaştırma çözünürlüğü seviyesi. Şu durumda: tüm yakınlaştırma düzeylerini sunmak için tek bir panorama resmi kullanmak (ör. bir resim) çok büyük olabilir ve önemli ölçüde yavaşlayabilir. veya daha yüksek yakınlaştırma seviyelerinde düşük çözünürlükte olmaları gerekir. kötü pikselleştirilmiş bir resim sunabilirsiniz. Neyse ki veya benzerlerini içeren farklı zum düzeylerinde Google'ın harita desenleri panoramalar için her yakınlaştırma düzeyinde uygun çözünürlükte görüntüler.

Varsayılan olarak bir StreetViewPanorama ilk yüklendiğinde çerçevenin %25'ini (90 derece yay) oluşan bir resim gösterir yakınlaştırma düzeyi 1'de panoramanın yatay genişliği. Bu görünüm normal insan görüş alanına karşılık gelir. Yakınlaştırılıyor "out" (dışarıda) temel olarak daha geniş bir açı sağlar. yakınlaştırma yapmak, görünümün alanını daha küçük bir açıyla daraltır. İlgili içeriği oluşturmak için kullanılan StreetViewPanorama otomatik olarak uygun görünüm alanını seçin ve ardından Söz konusu çözünürlüğe en uygun görüntüleri seçmek için yatay olarak kabaca boyutlarıyla eşleşen bir karo grubu bir alandır. Aşağıdaki görünüm alanları Street View ile eşleşir yakınlaştırma seviyeleri:

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

Street View'da gösterilen resmin boyutuna dikkat edin tamamen Street View'ın ekran boyutuna (genişliği) bağlıdır anlamına gelir. Daha geniş bir container sağlarsanız hizmet aynı görüş alanını sağlar. ancak yakınlaştırma seviyesi daha uygun karoları seçebilir bu çözüm için ekleyebilirsiniz.

Her panorama eş dikdörtgen bir projeksiyondan oluştuğu için panorama karoları oluşturmak nispeten daha kolaydır. Projeksiyon olarak En boy oranı 2:1 olan bir resim sağlıyor; bu oran 2:1 oranında karolar şeklinde sağlanıyor kullanımı daha kolaydır, ancak kare bloklar daha iyi performans sağlayabilir (görüş alanı kare olacağı için).

2:1 karolarda panoramanın tamamını kapsayan tek bir resim "dünya" panoramasının tamamını temsil eder yakınlaştırıldığında (ana resim) (her artan yakınlaştırma seviyesi teklifiyle) 4 zoomLevel karo. (ör. tüm panorama 16 karodan oluşur.) Not: Street View'daki yakınlaştırma düzeyleri karolar, Street View kontrolü; Bunun yerine, odağınızı Street View'da seviyeler bir Görünüm Alanı (FoV) seçer. karo seçildi.

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

Genel olarak, resim karolarınızı otomatik olarak seçilir. Böyle bir adlandırma şeması aşağıdaki Özel İşleme Panorama İstekleri.

Özel Panorama İsteklerini İşleme

Özel bir panorama kullanmak için şu numarayı arayın: StreetViewPanorama.registerPanoProvider() (ad belirtiliyor) özel panorama sağlayıcı yönteminizin Panorama sağlayıcı yöntemi, StreetViewPanoramaData nesnesi döndürmelidir ve şu imza:

Function(pano):StreetViewPanoramaData

StreetViewPanoramaData aşağıdakilerin bir nesnesidir form:

{
  copyright: string,
  location: {
    description: string,
    latLng: google.maps.LatLng,
    pano: string
  },
  tiles: {
    tileSize: google.maps.Size,
    worldSize: google.maps.Size,
    heading: number,
    getTileUrl: Function
  },
  links: [
    description: string,
    heading: number,
    pano: string,
    roadColor: string,
    roadOpacity: number
  ]
}

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

  • Ayarlayın: StreetViewPanoramaOptions.pano özelliğini özel bir değere dönüştürebilirsiniz.
  • Telefonla arama StreetViewPanorama.registerPanoProvider() özel bir panorama sağlayıcı işlevi sağlar.
  • Şunu işlemek için özel panorama sağlayıcı işlevinizi uygulayın: pano değeri belirtildi.
  • Bir StreetViewPanoramaData nesnesini tanımlayın.
  • Ayarlayın: StreetViewTileData.getTileUrl özelliğini sağladığınız özel karo sağlayıcı işlevinin adına ekleyin. Örneğin, örnek, getCustomPanoramaTileUrl.
  • Örneklerde gösterildiği gibi özel karo sağlayıcı işlevinizi uygulayın bölümüne göz atın.
  • StreetViewPanoramaData nesnesini döndürün.

Not: Doğrudan position ayarlamayın görüntülemek istediğiniz zaman StreetViewPanorama üzerinde özel panoramalar oluşturabilirsiniz. Böyle bir pozisyon, Street View'a Varsayılan Street View görüntülerini kapatma isteğinde bulunma hizmeti söz konusu konuma götürebilir. Bunun yerine, bu konumu özel StreetViewPanoramaData nesnesi location.latLng alanı.

Aşağıdaki örnekte Google Sidney'in özel bir panoraması gösterilmektedir ofis. Bu örnekte bir harita veya varsayılan Street View kullanılmadığına dikkat edin görüntüler:

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>

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

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

Örneği Deneyin

Özel panorama sağlayıcısı, verilen uygun karoyu döndürür. iletilen panorama kimliği, yakınlaştırma düzeyi ve panorama bölümünün koordinatları. Resim seçimi bu aktarılan değerlere bağlı olduğundan programatik olarak seçilebilecek görüntüleri adlandırmak için gibi aktarılan değerler pano_zoom_tileX_tileY.png

Aşağıdaki örnekte, Google Sidney'i işaret eden varsayılan Street View gezinme okları ve bağlantıları ekleme:

TypeScript

let panorama: google.maps.StreetViewPanorama;

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

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

function initPanorama() {
  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("street-view") as HTMLElement,
    { pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano }
  );
  // Register a provider for the custom panorama.
  panorama.registerPanoProvider(
    (pano: string): google.maps.StreetViewPanoramaData => {
      if (pano === "reception") {
        return getReceptionPanoramaData();
      }
      // @ts-ignore TODO fix typings
      return null;
    }
  );

  // Add a link to our custom panorama from outside the Google Sydney office.
  panorama.addListener("links_changed", () => {
    if (
      panorama.getPano() ===
      (outsideGoogle.location as google.maps.StreetViewLocation).pano
    ) {
      panorama.getLinks().push({
        description: "Google Sydney",
        heading: 25,
        pano: "reception",
      });
    }
  });
}

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

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

JavaScript

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

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

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

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

window.initMap = initMap;
index.js

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>

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

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

Örneği Deneyin