Street View Hizmeti

Genel Bakış

Platform seçin: Android iOS JavaScript

Google Street View, hakkında haber yapılan bölge boyunca belirlenen yollardan panoramik 360 derece görünümler sunar. Street View'un API kapsamı, Google Haritalar uygulaması (https://maps.google.com/) ile aynıdır. Street View için şu anda desteklenen şehirlerin listesini Google Haritalar web sitesinde bulabilirsiniz.

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


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

Street View Harita Kullanımı

Street View, bağımsız bir DOM öğesi içinde kullanılabilse de en çok harita üzerinde bir konum belirtirken faydalı olur. Varsayılan olarak Street View, haritada etkindir ve navigasyon (yakınlaştırma ve kaydırma) kontrollerine entegre edilmiş bir Street View Pegman kontrolü görünür. streetViewControl değerini false olarak ayarlayarak bu kontrolü haritanın MapOptions içinde gizleyebilirsiniz. Ayrıca, Map öğesinin streetViewControlOptions.position özelliğini yeni bir ControlPosition değerine ayarlayarak Street View kontrolünün varsayılan konumunu değiştirebilirsiniz.

Street View Pegman kontrolü, Street View panoramalarını doğrudan harita içinde görüntülemenize olanak tanır. Kullanıcı Pegman'ı 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 ve Google Haritalar uygulamasına benzer bir kullanıcı deneyimi sunar.

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

Street View Panoramaları

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

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

Street View Kapsayıcıları

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

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

Street View Konumları ve Bakış Açısı (POV)

StreetViewPanorama oluşturucu, StreetViewOptions parametresini kullanarak Street View konumunu ve görüş açısını ayarlamanıza da olanak tanır. Oluşturma işleminden sonra nesnenin konumunu ve bakış açısını değiştirmek için nesne üzerinde setPosition() ve setPov() yöntemlerini çağırabilirsiniz.

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

  • heading (varsayılan 0), kamera odağı etrafındaki dönüş açısını gerçek kuzeye göre derece cinsinden tanımlar. Yönler saat yönünde ölçülür (90 derece tam doğudur).
  • pitch (varsayılan 0), kameranın ilk varsayılan eğiminden "yukarı" veya "aşağı" açı varyansını tanımlar. Bu, genellikle (ancak her zaman değil) düz yataydır. (Örneğin, bir tepede çekilen bir resim muhtemelen yatay olmayan varsayılan bir eğime sahip olacaktır.) Eğim açıları, yukarı bakan pozitif değerlerle (+90 dereceye kadar, düz yukarı ve varsayılan eğime dik) ve aşağı bakan negatif değerlerle (-90 dereceye kadar, düz aşağı ve varsayılan eğime dik) ölçülür.

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

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

TypeScript

async function init(): Promise<void> {
    // Request needed libraries.
    const [{ StreetViewPanorama }] = await Promise.all([
        google.maps.importLibrary('streetView'),
        google.maps.importLibrary('maps'),
    ]);

    // Get the gmp-map element and its innerMap.
    const mapElement = document.querySelector('gmp-map')!;
    const innerMap = mapElement.innerMap;

    // Get the center of the map.
    const position = mapElement.center as google.maps.LatLng;

    // Create a new StreetViewPanorama, set its position, and attach it to the map.
    const panorama = new StreetViewPanorama(document.getElementById('pano')!, {
        position,
        pov: {
            heading: 34,
            pitch: 10,
        },
    });

    /**
     * Set the StreetViewPanorama so it displays in the pano element
     * rather than taking over the map.
     * This creates a link between the map and the panorama so that
     * the map is updated when the StreetViewPanorama position changes,
     * and the StreetViewPanorama is updated when the map changes.
     */
    innerMap.setStreetView(panorama);
}

void init();

JavaScript

async function init() {
    // Request needed libraries.
    const [{ StreetViewPanorama }] = await Promise.all([
        google.maps.importLibrary('streetView'),
        google.maps.importLibrary('maps'),
    ]);

    // Get the gmp-map element and its innerMap.
    const mapElement = document.querySelector('gmp-map');
    const innerMap = mapElement.innerMap;

    // Get the center of the map.
    const position = mapElement.center;

    // Create a new StreetViewPanorama, set its position, and attach it to the map.
    const panorama = new StreetViewPanorama(document.getElementById('pano'), {
        position,
        pov: {
            heading: 34,
            pitch: 10,
        },
    });

    /**
     * Set the StreetViewPanorama so it displays in the pano element
     * rather than taking over the map.
     * This creates a link between the map and the panorama so that
     * the map is updated when the StreetViewPanorama position changes,
     * and the StreetViewPanorama is updated when the map changes.
     */
    innerMap.setStreetView(panorama);
}

void init();

CSS

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

body {
    display: flex;
}

gmp-map,
#pano {
    flex: 1;
    height: 100%;
}

HTML

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

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.ts"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY",
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="42.345573,-71.098326"
            zoom="14"
            map-id="DEMO_MAP_ID"></gmp-map>
        <div id="pano"></div>
    </body>
</html>
Örneği görüntüleyin

Örneği deneyin

Mobil cihazlarda hareket izleme

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

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

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

  • Hareket izleme kontrolünü gizleyin veya gösterin. Varsayılan olarak, kontrol, hareket izlemeyi destekleyen cihazlarda gösterilir. Kullanıcı, hareket izlemeyi açmak veya kapatmak için denetime dokunabilir. motionTrackingControl değerinden bağımsız olarak, cihaz hareket izlemeyi desteklemiyorsa denetimin hiçbir zaman görünmeyeceğini unutmayın.

    Aşağıdaki örnekte hem hareket izleme hem de hareket izleme kontrolü devre dışı bırakılmaktadır. Bu durumda kullanıcı, hareket izlemeyi etkinleştiremez:

    var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('pano'), {
      position: {lat: 37.869260, lng: -122.254811},
      pov: {heading: 165, pitch: 0},
      motionTracking: false,
      motionTrackingControl: false
    });
  • Hareket izleme kontrolünün varsayılan konumunu değiştirme Varsayılan olarak, kontrol panoramanı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 izleme özelliğini çalışırken görmek için aşağıdaki örneği bir mobil cihazda (veya cihaz yönü etkinliklerini destekleyen herhangi bir cihazda) görüntüleyin:


Örneği görüntüleyin

Street View'daki yer paylaşımları

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ş "sokak düzeyinde" görünür. (Örneğin, işaretçiler Street View panoraması içinde konumun yatay düzlemine sabitlenmiş kuyruklarıyla görünür.)

Şu anda Street View panoramalarında desteklenen yer paylaşımları yalnızca Marker, InfoWindow ve özel OverlayView ile sınırlıdır. Haritada gösterdiğiniz yer paylaşımları, panoramayı Map nesnesinin yerine koyarak, setMap() yöntemini çağırarak ve harita yerine StreetViewPanorama nesnesini bağımsız değişken olarak ileterek Street View panoraması üzerinde gösterilebilir. Bilgi pencereleri, open() çağrılarak ve harita yerine StreetViewPanorama() iletilerek Street View panoraması içinde de açılabilir.

Ayrıca, varsayılan StreetViewPanorama ile bir harita oluştururken, haritada oluşturulan tüm işaretçiler, görünür olması koşuluyla haritayla ilişkili Street View panoramasıyla otomatik olarak paylaşılır. Varsayılan Street View panoramasını almak için Map nesnesinde getStreetView() yöntemini ç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ılarsınız.

Aşağıdaki örnekte, New York City'deki Astor Place çevresindeki çeşitli konumları gösteren işaretçiler gösterilmektedir. StreetViewPanorama içinde gösterilen paylaşılan işaretçileri görmek için görünümü Street View'a geçirin.

TypeScript

const ASSET_BASE_URL = new URL('https://maps-docs-team.web.app/samples/streetview-overlays/dist/');

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

async function init() {
    // Request needed libraries.
    const [{ Marker }] = await Promise.all([
        google.maps.importLibrary('marker'),
        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('./cafe_icon.svg', ASSET_BASE_URL).href;

    const dollarIcon = document.createElement('img');
    dollarIcon.src = new URL('./bank_icon.svg', ASSET_BASE_URL).href;

    const busIcon = document.createElement('img');
    busIcon.src = new URL('./bus_icon.svg', ASSET_BASE_URL).href;

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

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

    new 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({
        heading: 265,
        pitch: 0,
    });
}

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

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

void init();

JavaScript

const ASSET_BASE_URL = new URL('https://maps-docs-team.web.app/samples/streetview-overlays/dist/');

let panorama;
let innerMap;

async function init() {
    // Request needed libraries.
    const [{ Marker }] = await Promise.all([
        google.maps.importLibrary('marker'),
        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('./cafe_icon.svg', ASSET_BASE_URL).href;

    const dollarIcon = document.createElement('img');
    dollarIcon.src = new URL('./bank_icon.svg', ASSET_BASE_URL).href;

    const busIcon = document.createElement('img');
    busIcon.src = new URL('./bus_icon.svg', ASSET_BASE_URL).href;

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

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

    new 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({
        heading: 265,
        pitch: 0,
    });
}

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

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

void init();
export {};

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

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>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </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>
Örneği görüntüleyin

Örneği deneyin

Street View Etkinlikleri

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

  • pano_changed, her bir pano kimliği değiştiğinde tetiklenir. Bu etkinlik, tetiklendiğinde panoramadaki ilişkili verilerin (bağlantılar gibi) de değiştiğini garanti etmez. Bu etkinlik yalnızca bir panorama kimliğinin değiştiğini gösterir. Bu panoramaya referans vermek için kullanabileceğiniz pano kimliğinin yalnızca mevcut tarayıcı oturumunda kararlı olduğunu unutmayın.
  • position_changed, panoramanın temel (LatLng) konumu her değiştiğinde tetiklenir. Panoramayı döndürmek bu etkinliği tetiklemez. API, en yakın panorama kimliğini panoramanın konumuyla otomatik olarak ilişkilendireceğinden, ilişkili panorama kimliğini değiştirmeden panoramanın temel konumunu değiştirebilirsiniz.
  • pov_changed, Street View'un StreetViewPov her değiştiğinde tetiklenir. Konum ve pano kimliği sabit kalırken bu etkinliğin tetiklenebileceğini unutmayın.
  • links_changed, Street View'un bağlantıları her değiştiğinde tetiklenir. Bu etkinliğin, pano_changed aracılığıyla belirtilen pano kimliğinde bir değişiklik yapıldıktan sonra eşzamansız olarak tetiklenebileceğini unutmayın.
  • visible_changed, Street View'un görünürlüğü her değiştiğinde tetiklenir. Bu etkinliğin, pano_changed aracılığıyla belirtilen pano kimliğinde bir değişiklik yapıldıktan sonra eşzamansız olarak tetiklenebileceğini unutmayın.

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

TypeScript

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

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

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

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

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

    const links = panorama.getLinks();

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

      linksTable.appendChild(row);

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

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

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

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

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

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

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

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

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

JavaScript

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

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

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

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

    const links = panorama.getLinks();

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

      linksTable.appendChild(row);

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

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

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

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

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

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

window.initPano = initPano;

CSS

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

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

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

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

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

HTML

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

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

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

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ürmenin bir yolunu sunar. Bu kontrol, varsayılan olarak standart entegre pusula ve kaydırma kontrolü olarak görünür. panControlOptions alanında PanControlOptions değerini sağlayarak kontrolün konumunu değiştirebilirsiniz.
  • zoomControl, resimde yakınlaştırma yapmanızı sağlar. Bu kontrol, varsayılan olarak panoramik görüntünün sağ alt kısmında görünür. zoomControlOptions alanına ZoomControlOptions ekleyerek kontrolün görünümünü değiştirebilirsiniz.
  • addressControl, ilişkili konumun adresini gösteren bir metin yer paylaşımı sağlar ve konumu Google Haritalar'da açmak için bir bağlantı sunar. addressControlOptions alanına StreetViewAddressControlOptions ekleyerek kontrolün görünümünü değiştirebilirsiniz.
  • fullscreenControl, Street View'u tam ekran modunda açma seçeneği sunar. fullscreenControlOptions alanına FullscreenControlOptions ekleyerek 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önü etkinliklerini destekleyen cihazlarda görünür. Varsayılan olarak, kontrol paneli panoramik görüntünün sağ alt kısmında görünür. MotionTrackingControlOptions değerini sağlayarak kontrolün konumunu değiştirebilirsiniz. Daha fazla bilgi için hareket izleme ile ilgili bölüme bakın.
  • linksControl, bitişik panorama resimlerine gitmek için resim üzerinde kılavuz oklar sağlar.
  • Kapatma kontrolü, kullanıcının Street View görüntüleyiciyi kapatmasına olanak tanır. enableCloseButton değerini true veya false olarak ayarlayarak kapatma kontrolünü etkinleştirebilir ya da devre dışı bırakabilirsiniz.

Aşağıdaki örnekte, ilişkili Street View'da görüntülenen kontroller değiştirilmekte ve görünümün bağlantıları kaldırılmaktadır:

TypeScript

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

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

JavaScript

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

window.initPano = initPano;

CSS

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

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

HTML

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

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

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

Street View verilerine doğrudan erişme

Haritayı/panoramayı doğrudan değiştirmeye gerek kalmadan Street View verilerinin kullanılabilirliğini programatik olarak belirlemek veya belirli panoramalar hakkında bilgi döndürmek isteyebilirsiniz. Bunu, Google'ın Street View hizmetinde depolanan veriler için bir arayüz sağlayan StreetViewService nesnesini kullanarak yapabilirsiniz.

Street View Hizmet İstekleri

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

StreetViewService isteklerini StreetViewPanoRequest veya StreetViewLocationRequest kullanarak başlatabilirsiniz.

StreetViewPanoRequest kullanan bir istek, panoramayı benzersiz şekilde tanımlayan bir referans kimliği verildiğinde panorama verilerini döndürür. Bu referans kimliklerinin yalnızca ilgili panoramadaki görüntülerin kullanım ömrü boyunca geçerli olduğunu unutmayın.

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

  • location, panoraması aranacak konumu (enlem ve boylam) belirtir.
  • preference, yarıçap içinde hangi panoramanın bulunması gerektiğiyle ilgili bir tercih belirler: Belirtilen konuma en yakın olan veya yarıçap içindeki en iyi panorama.
  • radius, verilen enlem ve boylamı merkez alan bir panorama aramak için metre cinsinden belirtilen bir yarıçap ayarlar. Belirtilmezse varsayılan değer 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ırlandırır. Belirtilen konum için dış mekan panoramaları bulunmayabilir.

Street View Hizmeti Yanıtları

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

StreetViewPanoramaData nesne spesifikasyonu, aşağıdaki biçimde bir Street View panoraması hakkında 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 belirtilen kimliği ileterek setPano() yöntemini çağırmanız gerekir.

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

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

Aşağıdaki kod, haritada kullanıcı tıklamalarına yanıt veren bir StreetViewService oluşturur. Bu, tıklandığında ilgili konumun StreetViewPanorama değerini 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;

JavaScript

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

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

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

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

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

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

window.initMap = initMap;

CSS

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

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

HTML

<html>
  <head>
    <title>Directly Accessing Street View Data</title>

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

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

Özel Street View panoramaları sağlama

Maps JavaScript API, StreetViewPanorama nesnesi içinde özel panoramaların görüntülenmesini destekler. Özel panoramaları kullanarak binaların içini, manzaralı yerlerden görünümleri veya hayal gücünüzden herhangi bir ş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ı uygulamanız gerekir:

  • Her özel panorama için bir temel panoramik görüntü oluşturun. Bu temel resim, yakınlaştırılmış görüntüleri sunmak istediğiniz en yüksek çözünürlüklü resim olmalıdır.
  • (İsteğe bağlı ancak önerilir) Temel görüntüden farklı yakınlaştırma seviyelerinde bir dizi panoramik karo oluşturun.
  • Özel panoramalarınız arasında bağlantılar oluşturun.
  • (İsteğe bağlı) Google'ın mevcut Street View görüntüleri içinde"giriş" panoramaları belirleyin ve özel setten standart sete giden/gelen bağlantıları özelleştirin.
  • StreetViewPanoramaData nesnesi içindeki her panorama resmi için meta verileri tanımlayın.
  • Özel panorama verilerini ve görüntülerini belirleyen bir yöntem uygulayın ve bu yöntemi StreetViewPanorama nesnesi içinde özel işleyiciniz olarak belirleyin.

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

Özel panoramalar oluşturma

Her Street View panoraması, tek bir konumdan tam 360 derecelik bir görünüm sağlayan bir resim veya resim grubudur. StreetViewPanorama nesnesi, eş dikdörtgen (Plate Carrée) projeksiyonuna uygun resimler kullanır. Bu tür bir projeksiyon, 360 derecelik yatay görünüm (tam bir dönüş) 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ü oluşturur. Aşağıda, tam panoramik bir görüntü gösterilmektedir.

Bir şehir sokağının panoramik görünümü

Panoramik resimler genellikle tek bir konumdan birden fazla fotoğraf çekilerek ve bunlar 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, her bir panorama resminin çekildiği tek bir "kamera" odağını paylaşmalıdır. Elde edilen 360 derecelik panorama, görüntünün kürenin iki boyutlu yüzeyine sarıldığı bir küre üzerinde bir projeksiyon tanımlayabilir.

Yüzeyinde bir sokağın panoramik 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 parçalara bölme ve hesaplanan parça koordinatlarına göre görüntü sunma açısından avantajlıdır.

Özel Panorama Karoları Oluşturma

Street View, varsayılan görünümü yakınlaştırıp uzaklaştırmanıza olanak tanıyan bir yakınlaştırma kontrolü kullanarak farklı düzeylerde resim ayrıntılarını da destekler. Genellikle Street View, belirli bir panorama resmi için beş yakınlaştırma çözünürlüğü düzeyi sağlar. Tüm yakınlaştırma seviyelerinde tek bir panoramik resim kullanırsanız bu resim ya çok büyük olur ve uygulamanızı önemli ölçüde yavaşlatır ya da yüksek yakınlaştırma seviyelerinde çözünürlüğü çok düşük olur ve pikselleri belirgin bir resim sunarsınız. Neyse ki her yakınlaştırma seviyesinde panoramalar için uygun çözünürlükte görüntüler sağlamak amacıyla, Google'ın harita parçalarını farklı yakınlaştırma seviyelerinde sunmak için kullanılan benzer bir tasarım deseninden yararlanabiliriz.

StreetViewPanorama ilk yüklendiğinde varsayılan olarak, yakınlaştırma seviyesi 1'de panoramanın yatay genişliğinin %25'inden (90 derecelik yay) oluşan bir resim gösterir. 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" yapıldığında daha geniş bir yay elde edilirken yakınlaştırma yapıldığında görünüm alanı daha küçük bir yaya daraltılır. StreetViewPanorama, seçilen yakınlaştırma seviyesi 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 grubu seçerek bu çözünürlük için en uygun görüntüleri seçer. Aşağıdaki görüş alanları, Street View yakınlaştırma seviyeleriyle eşlenir:

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 boyutunun tamamen Street View kapsayıcısının ekran boyutuna (genişlik) bağlı olduğunu unutmayın. Daha geniş bir kapsayıcı sağlarsanız hizmet, belirli bir yakınlaştırma seviyesi için aynı görüş alanını sağlamaya devam eder ancak bunun yerine söz konusu çözünürlüğe daha uygun parçalar seçebilir.

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

2:1 karolar için, tüm panoramayı kapsayan tek bir resim, 0 yakınlaştırma seviyesinde tüm panorama "dünyasını" (temel resim) temsil eder. Her artan yakınlaştırma seviyesi 4zoomLevel karo sunar. (Örneğin, 2. yakınlaştırma seviyesinde tüm panorama 16 karodan oluşur.) Not: Street View Parçası karolarındaki yakınlaştırma seviyeleri, Street View kontrolü kullanılarak sağlanan yakınlaştırma seviyeleriyle doğrudan eşleşmez. Bunun yerine, Street View kontrolü yakınlaştırma seviyeleri, uygun karoların seçildiği bir görüş alanı (FoV) seçer.

Şehir sokağının karolara bölünmüş panoramik görünümü

Genellikle, resim karolarınızı programatik olarak seçilebilecek şekilde adlandırmanız gerekir. Böyle bir adlandırma şeması, aşağıda Özel Panorama İsteklerini İşleme bölümünde ele alınmıştır.

Özel Panorama İsteklerini İşleme

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

Function(pano):StreetViewPanoramaData

StreetViewPanoramaData, aşağıdaki biçimde bir nesnedir:

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

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

  • StreetViewPanoramaOptions.pano özelliğini özel bir değere ayarlayın.
  • Özel bir panorama sağlayıcı işlevi sağlamak için StreetViewPanorama.registerPanoProvider() yöntemini çağırın.
  • Belirtilen pano değerini işlemek için özel panorama sağlayıcı işlevinizi uygulayın.
  • StreetViewPanoramaData nesnesi oluşturun.
  • StreetViewTileData.getTileUrl özelliğini, sağladığınız özel bir karo sağlayıcı işlevinin adına 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örüntülemek istediğinizde StreetViewPanorama üzerinde doğrudan bir position ayarlamayın. Böyle bir konum, Street View hizmetine söz konusu konuma yakın 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;

JavaScript

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

  panorama.registerPanoProvider(getCustomPanorama);
}

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

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

window.initPano = initPano;

CSS

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

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

HTML

<html>
  <head>
    <title>Custom Street View Panoramas</title>

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

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

Özel panorama sağlayıcı, iletilen panorama kimliği, yakınlaştırma seviyesi ve panorama parça koordinatları için uygun parçayı döndürür. Resim seçimi bu iletilen değerlere bağlı olduğundan, bu iletilen değerler göz önünde bulundurularak programatik olarak seçilebilecek resimleri adlandırmak faydalı olur (ör. pano_zoom_tileX_tileY.png).

Aşağıdaki örnekte, varsayılan Street View gezinme oklarına ek olarak, Google Sydney'i gösteren ve özel görüntülere bağlantı veren 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;

JavaScript

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

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

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

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

window.initMap = initMap;

CSS

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

#street-view {
  height: 100%;
}

HTML

<html>
  <head>
    <title>Custom Street View Panorama Tiles</title>

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

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