Street View Hizmeti

Genel Bakış

Platform seçin: Android iOS JavaScript

Google Street View, kapsama alanı boyunca belirlenmiş yollardan 360 derecelik panoramik görünümler sunar. Street View'un API kapsamı, Google Haritalar uygulamasının kapsamıyla aynıdır (https://maps.google.com/). Street View'un şu anda desteklediği ş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 bir 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 öğesinde kullanılabilse de en çok haritada bir konum belirtirken işe yarar. Varsayılan olarak, haritalarda Street View etkinleştirilir ve navigasyon (yakınlaştırma ve kaydırma) kontrollerine entegre edilmiş bir Street View Pegman kontrolü görünür. streetViewControl seçeneğini false olarak ayarlayarak bu kontrolü haritanın MapOptions bölümünde gizleyebilirsiniz. Map öğesinin 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 üzerinde görüntülemenizi sağlar. Kullanıcı Pegman'i tıklayıp basılı tuttuğunda harita, Street View'un etkin olduğu sokakların etrafında mavi ana hatlar gösterecek şekilde güncellenir. Bu sayede, Google Haritalar uygulamasına benzer bir kullanıcı deneyimi sunulur.

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

Street View Panoramaları

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

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

Street View Kapsayıcıları

Bunun yerine, genellikle bir <div> öğesi olan ayrı bir DOM öğesinde StreetViewPanorama görüntülemek isteyebilirsiniz. DOM öğesini StreetViewPanorama's oluşturucusuna iletmeniz yeterlidir. Resimlerin optimum şekilde gösterilmesi için minimum 200 piksel x 200 piksel boyutunda olması önerilir.

Not: Street View işlevi haritayla birlikte kullanılacak şekilde tasarlanmış olsa da bu kullanım zorunlu değildir. Bağımsız bir Street View nesnesini harita olmadan kullanabilirsiniz.

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

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

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

  • heading (varsayılan 0) kameranın bulunduğu yerin etrafındaki 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ğudur).
  • pitch (varsayılan 0), genellikle (ancak her zaman değil) düz yatay olan kameranın ilk varsayılan eğiminden "yukarı" veya "aşağı" açı varyansını tanımlar. (Örneğin, bir tepede çekilen bir resimde büyük olasılıkla yatay olmayan varsayılan bir eğim bulunur.) Eğim açıları, yukarı bakarken pozitif değerlerle (+90 derece dimdik yukarı ve varsayılan eğime dik) ve aşağı bakarken negatif değerlerle (-90 derece dimdik aşağı ve varsayılan eğime dik) ölçülür.

StreetViewPov nesnesi, Street View kamerasının bakış açısını belirlemek için en sık kullanılan nesnedir. Ayrıca StreetViewPanorama.getPhotographerPov() yöntemini kullanarak fotoğrafçının bakış açısını (genellikle arabanın veya üç tekerlekli bisikletin baktığı yön) da belirleyebilirsiniz.

Aşağıdaki kod, Boston'ın haritasını Fenway Park'ın ilk görünümüyle birlikte gösterir. Pegman'i seçip haritada desteklenen bir konuma sürüklediğinizde Street View panoraması değişir:

TypeScript

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

  map.setStreetView(panorama);
}

declare global {
  interface Window {
    initialize: () => void;
  }
}
window.initialize = initialize;
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 görüntüleyin

Örneği deneyin

Mobil cihazlarda hareket izleme

Cihaz yönü etkinliklerini destekleyen cihazlarda API, kullanıcılara cihazın hareketine göre Street View bakış açısını değiştirme olanağı sunar. Kullanıcılar cihazlarını hareket ettirerek etraflarına bakabilir. Buna hareket izleme veya cihaz döndürme izleme denir.

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

  • Hareket izleme işlevini etkinleştirin veya devre dışı bırakın. Hareket izleme, varsayılan olarak desteklenen tüm cihazlarda etkindir. Aşağıdaki örnekte hareket izleme devre dışı bırakılıyor ancak hareket izleme kontrolü görünür durumda kalıyor. (Kullanıcının, kontrol simgesine dokunarak hareket izlemeyi etkinleştirebileceğini unutmayın.) 
    var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('pano'), {
      position: {lat: 37.869260, lng: -122.254811},
      pov: {heading: 165, pitch: 0},
      motionTracking: false
    });

  • Hareket izleme kontrolünü gizleyin veya gösterin. Varsayılan olarak, kontrol hareket izlemeyi destekleyen cihazlarda gösterilir. Kullanıcı, hareket izlemeyi etkinleştirmek veya devre dışı bırakmak için kontrole dokunabilir. Kontrolün, cihaz hareket izlemeyi desteklemiyorsa motionTrackingControl değerinden bağımsız olarak 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ılıyor. 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ştirme. Kontrol, varsayılan olarak panoramik görüntünün sağ alt kısmına yakın bir yerde görünür (konum RIGHT_BOTTOM). Aşağıdaki örnekte kontrolün konumu sol alt olarak ayarlanmıştı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 iş başında görmek için aşağıdaki örneği bir mobil cihazda (veya cihaz yönlendirme etkinliklerini destekleyen herhangi bir cihazda) görüntüleyin:


Örneği görüntüleyin

Street View'daki katmanlar

Varsayılan StreetViewPanorama nesnesi, harita yer paylaşımlarının yerel olarak görüntülenmesini destekler. Yer paylaşımları genellikle LatLng konumlarına sabitlenmiş olarak "sokak düzeyinde" görünür. (Örneğin, işaretçiler, kuyrukları Street View panoramasındaki konumun yatay düzlemine sabitlenmiş şekilde görünür.)

Şu anda Street View panoramalarında desteklenen yer paylaşımları Marker, InfoWindow ve özel OverlayView ile sınırlıdır. Haritada gösterdiğiniz yer paylaşımları, panoramayı Map nesnesinin yerine kullanıp setMap() işlevini çağırarak ve StreetViewPanorama işlevini harita yerine bağımsız değişken olarak ileterek Street View panoramasında gösterilebilir. Bilgi pencereleri de benzer şekilde open() çağrılarak ve harita yerine StreetViewPanorama() geçirilerek bir Street View panoramasında açılabilir.

Ayrıca, varsayılan StreetViewPanorama ile bir harita oluştururken haritada oluşturulan tüm işaretçiler, panorama görünür olduğu sürece 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() işlevini çağırın. Haritanın streetView özelliğini açıkça kendi oluşturduğunuz bir StreetViewPanorama olarak ayarlarsanız varsayılan panoramayı geçersiz kılacağınızı unutmayın.

Aşağıdaki örnekte, New York City, Astor Place çevresindeki çeşitli konumları gösteren işaretçiler yer almaktadır. StreetViewPanorama içinde gösterilen paylaşılan işaretçileri göstermek için ekranı Street View'e geçirin.

TypeScript

let panorama: google.maps.StreetViewPanorama;
let innerMap: google.maps.Map;

async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;

    // Set the location of Astor Place.
    const astorPlace = { lat: 40.729884, lng: -73.990988 };

    const mapElement = document.querySelector(
        'gmp-map'
    ) as google.maps.MapElement;

    innerMap = mapElement.innerMap;

    document
        .getElementById('streetview-toggle-button')!
        .addEventListener('click', toggleStreetView);

    const cafeIcon = document.createElement('img');
    cafeIcon.src = new URL('./public/cafe_icon.svg', import.meta.url).href;

    const dollarIcon = document.createElement('img');
    dollarIcon.src = new URL('./public/bank_icon.svg', import.meta.url).href;

    const busIcon = document.createElement('img');
    busIcon.src = new URL('./public/bus_icon.svg', import.meta.url).href;

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

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

    const busMarker = new google.maps.Marker({
        position: { lat: 40.729559, lng: -73.990741 },
        map: innerMap,
        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 = innerMap.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);
    }
}

initMap();
index.ts

JavaScript

let panorama;
let innerMap;
async function initMap() {
    // Request needed libraries.
    const { Map } = (await google.maps.importLibrary('maps'));
    // Set the location of Astor Place.
    const astorPlace = { lat: 40.729884, lng: -73.990988 };
    const mapElement = document.querySelector('gmp-map');
    innerMap = mapElement.innerMap;
    document
        .getElementById('streetview-toggle-button')
        .addEventListener('click', toggleStreetView);
    const cafeIcon = document.createElement('img');
    cafeIcon.src = new URL('./public/cafe_icon.svg', import.meta.url).href;
    const dollarIcon = document.createElement('img');
    dollarIcon.src = new URL('./public/bank_icon.svg', import.meta.url).href;
    const busIcon = document.createElement('img');
    busIcon.src = new URL('./public/bus_icon.svg', import.meta.url).href;
    // Set up the markers on the map
    const cafeMarker = new google.maps.Marker({
        position: { lat: 40.730031, lng: -73.991428 },
        map: innerMap,
        title: 'Cafe',
        icon: cafeIcon.src,
    });
    const bankMarker = new google.maps.Marker({
        position: { lat: 40.729681, lng: -73.991138 },
        map: innerMap,
        title: 'Bank',
        icon: dollarIcon.src,
    });
    const busMarker = new google.maps.Marker({
        position: { lat: 40.729559, lng: -73.990741 },
        map: innerMap,
        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 = innerMap.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);
    }
}
initMap();
export {};
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;
}

#streetview-toggle-button {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 17px;
  border: none;
  background: white;
  cursor: pointer;
  border-radius: 2px;
  box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
  margin: 10px 0px 10px -2px;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: rgb(86, 86, 86);
}

#streetview-toggle-button:hover {
  background: #f4f4f4;
  color: #000;
}

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>
        <!-- prettier-ignore -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </head>
    <body>
        <gmp-map map-id="DEMO_MAP_ID" center="40.729884, -73.990988" zoom="18">
            <input type="button" value="Toggle Street View" id="streetview-toggle-button" slot="control-block-start-inline-start" />
        </gmp-map>
    </body>
</html>
index.html
Örneği görüntüleyin

Örneği deneyin

Street View Etkinlikleri

Sokak Görünümü'nde gezinirken veya yönünü değiştirirken StreetViewPanorama durumundaki değişiklikleri gösteren çeşitli etkinlikleri izlemek isteyebilirsiniz:

  • pano_changed, bireysel pano kimliği her değiştiğinde tetiklenir. Bu etkinlik, panoramadaki ilişkili verilerin (ör. bağlantılar) bu etkinlik tetiklendiğinde değiştiğini garanti etmez. Bu etkinlik yalnızca pano kimliğinin değiştiğini gösterir. Pano kimliğinin (bu panoramaya referans vermek için kullanabilirsiniz) yalnızca mevcut tarayıcı oturumunda sabit olduğunu unutmayın.
  • position_changed, panoramadaki temel (LatLng) konum her değiştiğinde tetiklenir. Bir panoramayı döndürmek bu etkinliği tetiklemez. API, en yakın pano kimliğini panoramaların konumuyla otomatik olarak ilişkilendireceğinden, ilişkili pano kimliğini değiştirmeden bir panonun temel konumunu değiştirebileceğinizi unutmayın.
  • pov_changed, Street View'un StreetViewPov her değiştiğinde tetiklenir. Bu etkinliğin, konum ve pano kimliği sabit kalırken tetiklenebileceğini unutmayın.
  • Street View bağlantıları her değiştiğinde links_changed tetiklenir. Bu etkinliğin, pano_changed ile belirtilen pano kimliğinde değişiklik yapıldıktan sonra eşzamansız olarak tetiklenebileceğini unutmayın.
  • Street View'un görünürlüğü her değiştiğinde visible_changed tetiklenir. Bu etkinliğin, pano_changed ile belirtilen pano kimliğinde değişiklik yapıldıktan sonra eşzamansız olarak tetiklenebileceğini unutmayın.

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

TypeScript

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

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

    panoCell.innerHTML = panorama.getPano();
  });

  panorama.addListener("links_changed", () => {
    const linksTable = document.getElementById("links_table") as HTMLElement;

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

    const links = panorama.getLinks();

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

      linksTable.appendChild(row);

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

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

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

      valueCell.innerHTML = links[i].description as string;
      linksTable.appendChild(labelCell);
      linksTable.appendChild(valueCell);
    }
  });

  panorama.addListener("position_changed", () => {
    const positionCell = document.getElementById(
      "position-cell"
    ) as HTMLElement;

    (positionCell.firstChild as HTMLElement).nodeValue =
      panorama.getPosition() + "";
  });

  panorama.addListener("pov_changed", () => {
    const headingCell = document.getElementById("heading-cell") as HTMLElement;
    const pitchCell = document.getElementById("pitch-cell") as HTMLElement;

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

declare global {
  interface Window {
    initPano: () => void;
  }
}
window.initPano = initPano;
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 görüntüleyin

Örneği deneyin

Street View Kontrolleri

StreetViewPanorama gösterilirken panoramada varsayılan olarak çeşitli kontroller görünür. StreetViewPanoramaOptions içindeki uygun alanları true veya false olarak ayarlayarak bu kontrolleri etkinleştirebilir ya da devre dışı bırakabilirsiniz:

  • panControl, panoramayı döndürme olanağı sağlar. Bu kontrol, varsayılan olarak standart bir entegre pusula ve kaydırma kontrolü şeklinde görünür. PanControlOptions alanına panControlOptions girerek kontrolün konumunu değiştirebilirsiniz.
  • zoomControl, resim içinde yakınlaştırma yapmanızı sağlar. Bu kontrol, panoramaların sağ alt kısmında varsayılan olarak görünür. zoomControlOptions alanında ZoomControlOptions sağlayarak kontrolün görünümünü değiştirebilirsiniz.
  • addressControl, ilişkili konumun adresini belirten bir metin yerleşimi sağlar ve konumu Google Haritalar'da açmak için bir bağlantı sunar. addressControlOptions alanında StreetViewAddressControlOptions sağlayarak kontrolün görünümünü değiştirebilirsiniz.
  • fullscreenControl simgesi, Street View'u tam ekran modunda açma seçeneği sunar. fullscreenControlOptions alanında FullscreenControlOptions sağlayarak kontrolün görünümünü değiştirebilirsiniz.
  • motionTrackingControl, mobil cihazlarda hareket izlemeyi etkinleştirme veya devre dışı bırakma seçeneği sunar. Bu kontrol yalnızca cihaz yönlendirme etkinliklerini destekleyen cihazlarda görünür. Kontrol, varsayılan olarak panoramanın sağ alt kısmına yakın bir yerde görünür. MotionTrackingControlOptions değerini sağlayarak kontrolün konumunu değiştirebilirsiniz. Daha fazla bilgi için hareket izleme bölümüne bakın.
  • linksControl simgesi, bitişik panorama resimlerine gitmek için resimde kılavuz oklar sağlar.
  • Kapatma kontrolü, kullanıcının Street View görüntüleyiciyi kapatmasına olanak tanır. Kapatma denetimini etkinleştirmek veya devre dışı bırakmak için enableCloseButton değerini true veya false olarak ayarlayabilirsiniz.

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

TypeScript

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

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

JavaScript

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

window.initPano = initPano;
index.js

CSS

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

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

style.css

HTML

<html>
  <head>
    <title>Street View Controls</title>

    <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 görüntüleyin

Örneği deneyin

Street View verilerine doğrudan erişme

Street View verilerinin kullanılabilirliğini programlı bir şekilde belirlemek veya belirli panoramalarla ilgili bilgileri, harita/panoramanın doğrudan değiştirilmesini gerektirmeden döndürmek isteyebilirsiniz. Bunu, Google'ın Street View hizmetinde depolanan verilere arayüz sağlayan StreetViewService nesnesini kullanarak yapabilirsiniz.

Street View Hizmet İstekleri

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

StreetViewService kullanarak StreetViewPanoRequest veya StreetViewLocationRequest ile istek başlatabilirsiniz.

StreetViewPanoRequest kullanılan bir istek, panoramayı benzersiz şekilde tanımlayan bir referans kimliği verildiğinde panorama verilerini döndürür. Bu referans kimliklerinin yalnızca söz konusu panoramanın görüntüleri süresince sabit olduğunu unutmayın.

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

  • location, panorama aranacak konumu (enlem ve boylam) belirtir.
  • preference, yarıçap içinde hangi panaromanın bulunması gerektiğiyle ilgili bir tercih belirler: sağlanan konuma en yakın olan veya yarıçap içindeki en iyi olan.
  • radius, belirli enlem ve boylam değerine odaklı olarak panorama aramasının yapılacağı, metre cinsinden belirtilen bir yarıçapı ayarlar. Sağlanmazsa varsayılan olarak 50'dir.
  • source, aranacak panoramaların kaynağını belirtir. Geçerli değerler:
    • default, Street View için varsayılan kaynakları kullanır; aramalar belirli kaynaklarla sınırlı değildir.
    • outdoor aramaları dış mekan koleksiyonlarıyla sınırlar. Belirtilen konum için dış mekan panoramalarının mevcut olmayabileceğini unutmayın.

Street View Hizmeti Yanıtları

İşlevin, Street View hizmetinden bir sonuç alındığında yürütülecek bir getPanorama() geri çağırma işlevine ihtiyacı vardır. Bu geri çağırma işlevi, StreetViewPanoramaData nesnesi içinde bir dizi panorama verisi ve isteğin durumunu belirten bir StreetViewStatus kodu döndürür.

Bir StreetViewPanoramaData nesne spesifikasyonu, aşağıdaki biçimde bir Street View panoramasıyla ilgili meta veriler 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 StreetViewPanorama oluşturmanız ve döndürülen location.pano alanında belirtildiği gibi kimliği ileterek setPano() işlevini çağırmanız gerekir.

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

  • OK, hizmetin eşleşen bir panorama bulduğunu gösterir.
  • ZERO_RESULTS, hizmetin, iletilen ölçütlerle eşleşen bir panorama bulamadığını gösterir.
  • UNKNOWN_ERROR, tam nedeni bilinmemekle birlikte bir Street View isteğinin işlenemediğini gösterir.

Aşağıdaki kod, haritadaki kullanıcı tıklamalarına yanıt veren bir StreetViewService oluşturur. Bu StreetViewService, tıklanıldığında ilgili konumun StreetViewPanorama bilgisini gösteren işaretçiler 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;
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 görüntüleyin

Örneği deneyin

Özel Street View Panoramaları Sağlama

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

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

  • Her özel panorama için temel bir panoramik görüntü oluşturun. Bu temel resim, yakınlaştırılmış görüntü yayınlamak istediğiniz en yüksek çözünürlüklü resim olmalıdır.
  • (İsteğe bağlıdır ancak önerilir) Temel resimden farklı yakınlaştırma düzeylerinde bir dizi panoramik döşeme 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üleri içinde"giriş" panoramaları belirleyin ve özel setten standart sete/standart setten özel sete giden bağlantıları özelleştirin.
  • Her panorama görüntüsünün meta verilerini bir StreetViewPanoramaData nesnesinde tanımlayın.
  • Özel panorama verilerini ve görüntülerini belirleyen bir yöntem uygulayın ve bu yöntemi StreetViewPanorama nesnesinde özel işleyici olarak atayın.

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

Özel panoramalar oluşturma

Her Street View panoraması, tek bir konumdan 360 derecelik tam görünüm sağlayan bir resim veya resim grubudur. StreetViewPanorama nesnesi, eşit dikdörtgen (Plate Carrée) projeksiyonuna uygun görüntüler kullanır. Bu tür bir projeksiyon, 360 derecelik yatay görünüm (tam sarma) ve 180 derecelik dikey görünüm (tam yukarıdan tam aşağıya) içerir. Bu görüş alanları, 2:1 en boy oranına sahip bir görüntüyle sonuçlanır. A full wrap-around panorama is shown below.

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

Panorama görüntüleri genellikle tek bir konumdan birden fazla fotoğraf çekilerek ve 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ı başlıklı makalesine bakın.) Bu tür resimler, panorama resimlerinin her birinin çekildiği tek bir "kamera" noktasına sahip olmalıdır. Elde edilen 360 derecelik panorama, görüntünün kürenin iki boyutlu yüzeyine sarılmasıyla küre üzerinde bir projeksiyon tanımlayabilir.

Yüzeyinde panoramik sokak görünümü olan küre

Panoramayı doğrusal koordinat sistemine sahip bir küre üzerindeki projeksiyon olarak ele almak, görüntüyü doğrusal döşemelere bölmek ve hesaplanan döşeme koordinatlarına göre görüntü sunmak açısından avantajlıdır.

Özel panorama döşemeleri oluşturma

Street View, yakınlaştırma kontrolü sayesinde farklı düzeylerde görüntü ayrıntılarını da destekler. Bu kontrol, varsayılan görünümde yakınlaştırma ve uzaklaştırma yapmanıza olanak tanır. Genellikle Street View, herhangi bir panorama görüntüsü için beş yakınlaştırma çözünürlüğü düzeyi sunar. Tüm yakınlaştırma düzeylerinde tek bir panorama görüntüsünü kullanırsanız bu görüntü ya çok büyük olur ve uygulamanızı önemli ölçüde yavaşlatır ya da daha yüksek yakınlaştırma düzeylerinde çok düşük çözünürlüklü olur ve pikselleri bozuk bir görüntü yayınlarsınız. Ancak, neyse ki Google'ın harita döşemelerini farklı yakınlaştırma düzeylerinde sunmak için kullanılan benzer bir tasarım kalıbını kullanarak her yakınlaştırma düzeyinde panoramalar için uygun çözünürlükte görüntüler sağlayabiliriz.

Bir StreetViewPanorama ilk yüklendiğinde varsayılan olarak, 1. yakınlaştırma düzeyinde panoramanın yatay genişliğinin %25'ini (90 derecelik yay) oluşturan bir resim gösterilir. Bu görünüm, normal bir insanın görüş alanına yaklaşık olarak karşılık gelir. Bu varsayılan görünümden "uzaklaştırma" yaptığınızda daha geniş bir yay elde edilirken yakınlaştırma yaptığınızda görünüm alanı daha küçük bir yaya daralı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 kabaca eşleşen bir karo seti seçerek bu çözünürlüğe en uygun görüntüleri belirler. Aşağıdaki görüş alanları, Street View yakınlaştırma düzeyleriyle eşlenir:

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

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

Her panorama, eşit dikdörtgen projeksiyondan oluştuğu için panorama döşemeleri oluşturmak nispeten kolaydır. Projeksiyon, 2:1 en-boy oranına sahip bir görüntü sağladığından 2:1 oranlı döşemelerin kullanımı daha kolaydır. Ancak kare döşemeler, kare haritalarda daha iyi performans sağlayabilir (görüş alanı kare olacağından).

2:1 döşemeler için, tüm panoramayı kapsayan tek bir resim, 0 yakınlaştırma düzeyinde tüm panorama "dünyasını" (temel resim) temsil eder. Yakınlaştırma düzeyi arttıkça 4zoomLevel döşeme sunulur. (Örneğin, 2. yakınlaştırma düzeyinde tüm panorama 16 kutudan oluşur.) Not: Street View döşemelerindeki yakınlaştırma düzeyleri, Street View kontrolü kullanılarak sağlanan yakınlaştırma düzeyleriyle doğrudan eşleşmez. Bunun yerine, Street View kontrolü yakınlaştırma düzeyleri, uygun döşemelerin seçildiği bir Görüş Alanı (FoV) belirler.

Bir şehir caddesinin döşemelere bölünmüş panorama görünümü

Genellikle, resim döşemelerinizi programatik olarak seçilebilecek şekilde adlandırmak istersiniz. Bu tür bir adlandırma şeması, Özel Panorama İsteklerini İşleme bölümünde ele alınmıştır.

Özel Panorama İsteklerini İşleme

Özel bir panoramayı kullanmak için StreetViewPanorama.registerPanoProvider() yöntemini çağırın ve özel panorama sağlayıcı yönteminizin adını belirtin. Panorama sağlayıcı yöntemi bir StreetViewPanoramaData nesnesi döndürmeli ve aşağıdaki imzaya sahip olmalıdır:

Function(pano):StreetViewPanoramaData

StreetViewPanoramaData, aşağıdaki biç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 panorama sağlayıcı işlevi sağlamak için Call StreetViewPanorama.registerPanoProvider() işlevini kullanı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 döşeme sağlayıcı işlevinin adıyla ayarlayın. Örneğin, getCustomPanoramaTileUrl.
  • Aşağıdaki örneklerde gösterildiği gibi özel karo sağlayıcı işlevinizi uygulayın.
  • StreetViewPanoramaData nesnesini döndürür.

Not: Özel panoramalar göstermek istediğinizde position değerini doğrudan StreetViewPanorama üzerinde ayarlamayın. Bu 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 örnekte harita veya varsayılan Street View görüntüleri 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;
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 görüntüleyin

Örneği deneyin

Özel panorama sağlayıcı, iletilen panorama kimliği, yakınlaştırma düzeyi ve panorama döşemesi koordinatları göz önüne alındığında uygun döşemeyi döndürür. Resim seçimi bu aktarılan değerlere bağlı olduğundan, bu aktarılan değerler göz önünde bulundurularak programatik olarak seçilebilen resimleri adlandırmak faydalıdır. Örneğin: pano_zoom_tileX_tileY.png.

Aşağıdaki örnekte, varsayılan Street View gezinme oklarına ek olarak, Google Sidney'e doğru yönelen ve özel görüntülere bağlanan başka bir ok eklenmektedir:

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 görüntüleyin

Örneği deneyin