บริการ Street View

ภาพรวม

เลือกแพลตฟอร์ม: Android iOS JavaScript

Google Street View ให้มุมมองพาโนรามา 360 องศาจาก ถนนที่กำหนดทั่วพื้นที่ให้บริการ API ของ Street View มีพื้นที่ให้บริการเหมือนกับแอปพลิเคชัน Google Maps (https://maps.google.com/) รายชื่อเมืองที่รองรับ Street View ในปัจจุบันมีอยู่ที่เว็บไซต์ Google Maps

ตัวอย่างภาพ Street View แสดงอยู่ด้านล่าง


Maps JavaScript API มีบริการ Street View สำหรับการรับและจัดการภาพที่ใช้ใน Street View ของ Google Maps บริการ Street View นี้รองรับในเบราว์เซอร์โดยตรง

การใช้งานแผนที่ Street View

แม้ว่าจะใช้ Street View ภายในองค์ประกอบ DOM แบบสแตนด์อโลนได้ แต่จะ มีประโยชน์มากที่สุดเมื่อระบุตำแหน่งบนแผนที่ โดยค่าเริ่มต้น Street View จะ เปิดใช้ในแผนที่ และตัวควบคุมเพ็กแมนของ Street View จะปรากฏ ผสานรวมอยู่ภายในตัวควบคุมการนำทาง (ซูมและแพน) คุณซ่อนตัวควบคุมนี้ได้ภายในMapOptionsของแผนที่โดยตั้งค่าstreetViewControlเป็นfalse นอกจากนี้ คุณยังเปลี่ยน ตำแหน่งเริ่มต้นของตัวควบคุม Street View ได้โดย ตั้งค่าพร็อพเพอร์ตี้ Map ของ streetViewControlOptions.position เป็น ControlPosition ใหม่

ตัวควบคุมเพ็กแมนของ Street View ช่วยให้คุณดูภาพพาโนรามาของ Street View ได้โดยตรงภายในแผนที่ เมื่อผู้ใช้คลิกและกดเพ็กแมนค้างไว้ แผนที่จะอัปเดตเพื่อแสดงเส้นขอบสีน้ำเงินรอบถนนที่เปิดใช้ Street View ซึ่งมอบประสบการณ์การใช้งานที่คล้ายกับแอป Google Maps

เมื่อผู้ใช้วางเครื่องหมายเพ็กแมนลงบนถนน แผนที่จะอัปเดตเพื่อ แสดงภาพพาโนรามา Street View ของสถานที่ที่ระบุ

พาโนรามาใน Street View

ระบบรองรับรูปภาพ Street View ผ่านการใช้StreetViewPanorama object ซึ่งมีอินเทอร์เฟซ API สำหรับ "โปรแกรมดู" ของ Street View แผนที่แต่ละรายการจะมีพาโนรามา Street View เริ่มต้น ซึ่งคุณเรียกข้อมูลได้โดยเรียกใช้เมธอด getStreetView() ของแผนที่ เมื่อเพิ่มตัวควบคุม Street View ลงในแผนที่โดยตั้งค่าตัวเลือก streetViewControl เป็น true คุณจะเชื่อมต่อตัวควบคุมเพ็กแมน กับภาพพาโนรามา Street View เริ่มต้นนี้โดยอัตโนมัติ

นอกจากนี้ คุณยังสร้างออบเจ็กต์ StreetViewPanorama ของคุณเองและตั้งค่าแผนที่ให้ใช้ออบเจ็กต์นั้นแทนค่าเริ่มต้นได้โดย ตั้งค่าพร็อพเพอร์ตี้ streetView ของแผนที่อย่างชัดเจนเป็น ออบเจ็กต์ที่สร้างขึ้นนั้น คุณอาจต้องการลบล้างพาโนรามาเริ่มต้น หากต้องการแก้ไขลักษณะการทำงานเริ่มต้น เช่น การแชร์ภาพซ้อนระหว่างแผนที่กับพาโนรามาโดยอัตโนมัติ (ดูการวางซ้อนภายใน Street View ด้านล่าง)

คอนเทนเนอร์ Street View

คุณอาจต้องการแสดง StreetViewPanorama ภายในองค์ประกอบ DOM แยกต่างหาก ซึ่งมักจะเป็นองค์ประกอบ <div> เพียงส่งองค์ประกอบ DOM ภายในตัวสร้างของ StreetViewPanorama เราขอแนะนำให้ใช้รูปภาพที่มีขนาดอย่างน้อย 200 x 200 พิกเซลเพื่อให้แสดงผลได้ดีที่สุด

หมายเหตุ: แม้ว่าฟังก์ชันของ Street View จะออกแบบมาให้ใช้ร่วมกับแผนที่ แต่คุณไม่จำเป็นต้องใช้ ฟังก์ชันนี้ คุณอาจใช้วัตถุ Street View แบบสแตนด์อโลน โดยไม่ต้องมีแผนที่

สถานที่และมุมมอง (POV) ของ Street View

นอกจากนี้ ตัวสร้าง StreetViewPanorama ยังช่วยให้คุณ ตั้งค่าตำแหน่งและมุมมองของ Street View ได้โดยใช้พารามิเตอร์ StreetViewOptions คุณอาจเรียกใช้ setPosition() และ setPov() ในออบเจ็กต์หลังจาก การสร้างเพื่อเปลี่ยนตำแหน่งและมุมมอง

ตำแหน่ง Street View จะกำหนดตำแหน่งของโฟกัสกล้อง สำหรับรูปภาพ แต่ไม่ได้กำหนดการวางแนวของกล้อง สำหรับรูปภาพนั้น โดยออบเจ็กต์ StreetViewPov จะกำหนดพร็อพเพอร์ตี้ 2 รายการเพื่อจุดประสงค์ดังกล่าว

  • heading (ค่าเริ่มต้น 0) กําหนดมุมการหมุน รอบเส้นทางของกล้องเป็นองศาเทียบกับทิศเหนือจริง โดยส่วนหัวจะ วัดตามเข็มนาฬิกา (90 องศาคือทิศตะวันออกจริง)
  • pitch (ค่าเริ่มต้น 0) กำหนดความแปรปรวนของมุม "ขึ้น" หรือ "ลง" จากระดับเสียงเริ่มต้นของกล้อง ซึ่งมักจะเป็น (แต่ไม่เสมอไป) มุมแนวนอนแบบราบ (เช่น รูปภาพที่ถ่ายบนเนินเขา มักจะมีระดับเสียงเริ่มต้นที่ไม่ใช่แนวนอน) มุมระดับวัดโดยใช้ค่าบวกเมื่อมองขึ้น (ถึง +90 องศาในแนวตั้งและ ตั้งฉากกับระดับเริ่มต้น) และค่าลบเมื่อมองลง (ถึง -90 องศาในแนวตั้งและตั้งฉากกับระดับเริ่มต้น)

StreetViewPov มักใช้เพื่อกำหนด มุมมองของกล้อง Street View นอกจากนี้ คุณยังกำหนดมุมมองของช่างภาพได้ด้วย ซึ่งโดยปกติแล้วจะเป็นทิศทางที่รถยนต์ หรือรถสามล้อหันหน้าไปทางนั้น โดยใช้StreetViewPanorama.getPhotographerPov()วิธีการ

โค้ดต่อไปนี้จะแสดงแผนที่บอสตันพร้อมมุมมองเริ่มต้นของ Fenway Park การเลือกเพ็กแมนและลากไปยังสถานที่ที่รองรับบนแผนที่จะเปลี่ยนภาพพาโนรามาของ Street View ดังนี้

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
ดูตัวอย่าง

ลองใช้ตัวอย่าง

การติดตามการเคลื่อนไหวบนอุปกรณ์เคลื่อนที่

ในอุปกรณ์ที่รองรับเหตุการณ์การวางแนวอุปกรณ์ API จะช่วยให้ผู้ใช้เปลี่ยนมุมมองของ Street View ตามการเคลื่อนไหวของอุปกรณ์ได้ ผู้ใช้สามารถมองไปรอบๆ ได้โดยการเลื่อนอุปกรณ์ ซึ่งเรียกว่าการติดตามการเคลื่อนไหวหรือการติดตามการหมุนของอุปกรณ์

ในฐานะนักพัฒนาแอป คุณสามารถเปลี่ยนลักษณะการทำงานเริ่มต้นได้โดยทำดังนี้

  • เปิดหรือปิดใช้ฟังก์ชันการติดตามการเคลื่อนไหว โดยค่าเริ่มต้น ระบบจะเปิดใช้การติดตามการเคลื่อนไหว ในอุปกรณ์ที่รองรับ ตัวอย่างต่อไปนี้ จะปิดใช้การติดตามการเคลื่อนไหว แต่ยังคงให้การควบคุมการติดตามการเคลื่อนไหวแสดงอยู่ (โปรดทราบว่าผู้ใช้สามารถเปิดการติดตามการเคลื่อนไหวได้โดยแตะตัวควบคุม) 
    var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('pano'), {
      position: {lat: 37.869260, lng: -122.254811},
      pov: {heading: 165, pitch: 0},
      motionTracking: false
    });

  • ซ่อนหรือแสดงตัวควบคุมการติดตามการเคลื่อนไหว โดยค่าเริ่มต้น ตัวควบคุมจะ แสดงในอุปกรณ์ที่รองรับการติดตามการเคลื่อนไหว ผู้ใช้สามารถแตะตัวควบคุม เพื่อเปิดหรือปิดการติดตามการเคลื่อนไหว โปรดทราบว่าตัวควบคุมจะไม่ ปรากฏขึ้นหากอุปกรณ์ไม่รองรับการติดตามการเคลื่อนไหว ไม่ว่าค่าของ motionTrackingControl จะเป็นอะไรก็ตาม

    ตัวอย่างต่อไปนี้จะปิดใช้ทั้งการติดตามการเคลื่อนไหวและ การควบคุมการติดตามการเคลื่อนไหว ในกรณีนี้ ผู้ใช้จะเปิดการติดตามความเคลื่อนไหวไม่ได้

    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
    });
  • เปลี่ยนตำแหน่งเริ่มต้นของตัวควบคุมการติดตามการเคลื่อนไหว โดยค่าเริ่มต้น ตัวควบคุมจะปรากฏที่ด้านขวาล่างของภาพพาโนรามา (ตำแหน่ง RIGHT_BOTTOM) ตัวอย่างต่อไปนี้จะตั้งค่าตำแหน่งของ ตัวควบคุมเป็นด้านซ้ายล่าง 
    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
      }
    });

หากต้องการดูการติดตามการเคลื่อนไหวในการทำงาน ให้ดูตัวอย่างต่อไปนี้ในอุปกรณ์เคลื่อนที่ (หรืออุปกรณ์ใดก็ได้ที่รองรับเหตุการณ์การวางแนวอุปกรณ์)


ดูตัวอย่าง

ภาพซ้อนทับภายใน Street View

ออบเจ็กต์ StreetViewPanorama เริ่มต้นรองรับการแสดงผล การซ้อนทับของแผนที่ เนทีฟ โดยทั่วไปแล้ว ภาพซ้อนทับจะปรากฏที่ "ระดับถนน" โดยยึดตำแหน่ง LatLng (เครื่องหมายจะปรากฏโดยมีส่วนท้ายยึดกับระนาบแนวนอนของตำแหน่งภายในภาพพาโนรามาของ Street View เป็นต้น)

ปัจจุบัน ประเภทของการวางซ้อนที่รองรับในภาพพาโนรามาของ Street View จำกัดไว้ที่ Marker, InfoWindow และ OverlayView ที่กำหนดเอง การวางซ้อนที่คุณแสดงบนแผนที่อาจแสดงในภาพพาโนรามาของ Street View โดยถือว่าภาพพาโนรามาเป็นตัวแทนของออบเจ็กต์ Map เรียก setMap() และส่ง StreetViewPanorama เป็นอาร์กิวเมนต์แทนแผนที่ หน้าต่างข้อมูล ก็อาจเปิดได้ภายในภาพพาโนรามาของ Street View โดยการเรียก open() และส่ง StreetViewPanorama() แทน แผนที่

นอกจากนี้ เมื่อสร้างแผนที่ด้วยStreetViewPanoramaเริ่มต้น ระบบจะแชร์เครื่องหมายที่สร้างในแผนที่โดยอัตโนมัติกับภาพพาโนรามา Street View ที่เชื่อมโยงกับแผนที่นั้น โดยมีเงื่อนไขว่าภาพพาโนรามาต้องมองเห็นได้ หากต้องการดึงข้อมูลภาพพาโนรามา Street View เริ่มต้น ให้เรียกใช้ getStreetView() ในออบเจ็กต์ Map โปรดทราบว่าหากคุณตั้งค่าพร็อพเพอร์ตี้ streetView ของแผนที่อย่างชัดเจนเป็น StreetViewPanorama ที่คุณสร้างขึ้นเอง คุณจะลบล้างพาโนรามาเริ่มต้น

ตัวอย่างต่อไปนี้แสดงเครื่องหมายที่ระบุสถานที่ต่างๆ รอบ Astor Place ในนิวยอร์กซิตี้ สลับการแสดงผลเป็น Street View เพื่อแสดงเครื่องหมายที่แชร์ซึ่งแสดงภายใน StreetViewPanorama

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
ดูตัวอย่าง

ลองใช้ตัวอย่าง

กิจกรรม Street View

เมื่อไปยังส่วนต่างๆ ของ Street View หรือปรับเปลี่ยน การวางแนว คุณอาจต้องการตรวจสอบเหตุการณ์หลายอย่างที่บ่งบอกถึง การเปลี่ยนแปลงสถานะของ StreetViewPanorama ดังนี้

  • pano_changed จะทริกเกอร์เมื่อใดก็ตามที่รหัสพาโน แต่ละรายการเปลี่ยนแปลง เหตุการณ์นี้ไม่รับประกันว่าข้อมูลที่เชื่อมโยงภายใน พาโนรามา (เช่น ลิงก์) จะมีการเปลี่ยนแปลงด้วยเมื่อมีการทริกเกอร์เหตุการณ์นี้ เหตุการณ์นี้ระบุเพียงว่ารหัสพาโน มีการเปลี่ยนแปลง โปรดทราบว่ารหัสพาโนรามา (ซึ่งคุณใช้เพื่ออ้างอิง พาโนรามานี้ได้) จะคงที่ภายในเซสชันเบราว์เซอร์ปัจจุบันเท่านั้น
  • position_changed จะทริกเกอร์ทุกครั้งที่ตำแหน่งพื้นฐาน (LatLng) ของภาพพาโนรามาเปลี่ยนแปลง การหมุน ภาพพาโนรามาจะไม่ทริกเกอร์เหตุการณ์นี้ โปรดทราบว่าคุณสามารถเปลี่ยนตำแหน่งพื้นฐานของพาโนรามาได้โดยไม่ต้องเปลี่ยนรหัสพาโนที่เชื่อมโยง เนื่องจาก API จะเชื่อมโยงรหัสพาโนที่ใกล้ที่สุดกับตำแหน่งของพาโนรามาโดยอัตโนมัติ
  • pov_changed จะทำงานเมื่อใดก็ตามที่ StreetViewPov มีการเปลี่ยนแปลง โปรดทราบว่าเหตุการณ์นี้อาจทริกเกอร์ ในขณะที่ตำแหน่งและรหัสพาโนรามายังคงที่
  • links_changed จะทำงานทุกครั้งที่ลิงก์ของ Street View มีการเปลี่ยนแปลง โปรดทราบว่าเหตุการณ์นี้อาจทริกเกอร์แบบไม่พร้อมกันหลังจากมีการเปลี่ยนแปลงรหัสพาโนที่ระบุผ่าน pano_changed
  • visible_changed จะทำงานเมื่อใดก็ตามที่การแสดงของ Street View มีการเปลี่ยนแปลง โปรดทราบว่าเหตุการณ์นี้อาจทริกเกอร์แบบไม่พร้อมกันหลังจากมีการเปลี่ยนแปลงรหัสพาโนที่ระบุผ่าน pano_changed

โค้ดต่อไปนี้แสดงวิธีจัดการเหตุการณ์เหล่านี้ เพื่อรวบรวมข้อมูลเกี่ยวกับ StreetViewPanorama ที่เกี่ยวข้อง

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
ดูตัวอย่าง

ลองใช้ตัวอย่าง

ตัวควบคุม Street View

เมื่อแสดง StreetViewPanorama ระบบจะแสดงตัวควบคุมต่างๆ บนภาพพาโนรามาโดยค่าเริ่มต้น คุณเปิดหรือปิดใช้ การควบคุมเหล่านี้ได้โดยตั้งค่าฟิลด์ที่เหมาะสมภายใน StreetViewPanoramaOptions เป็น true หรือ false

  • panControl ช่วยให้หมุน พาโนรามาได้ โดยค่าเริ่มต้น ตัวควบคุมนี้จะปรากฏเป็นเข็มทิศแบบผสานรวมมาตรฐาน และการควบคุมการแพน คุณอาจเปลี่ยนตำแหน่งของตัวควบคุมได้โดยระบุ PanControlOptions ภายในฟิลด์ panControlOptions
  • zoomControl ช่วยให้ซูมภายในรูปภาพได้ โดย การควบคุมนี้จะปรากฏที่ด้านขวาล่างของภาพพาโนรามาโดยค่าเริ่มต้น คุณเปลี่ยนลักษณะที่ปรากฏของตัวควบคุมได้โดยระบุ ZoomControlOptions ภายในช่อง zoomControlOptions
  • addressControl จะแสดงข้อความซ้อนทับที่ระบุ ที่อยู่ของสถานที่ที่เชื่อมโยง และมีลิงก์สำหรับเปิด สถานที่ใน Google Maps คุณเปลี่ยนลักษณะที่ปรากฏของตัวควบคุมได้โดยระบุ StreetViewAddressControlOptions ภายในช่อง addressControlOptions
  • fullscreenControl มีตัวเลือกในการเปิด Street View ในโหมดเต็มหน้าจอ คุณเปลี่ยนลักษณะที่ปรากฏของตัวควบคุมได้โดยระบุ FullscreenControlOptions ภายในช่อง fullscreenControlOptions
  • motionTrackingControl มีตัวเลือกในการเปิดหรือปิดใช้การติดตามการเคลื่อนไหวในอุปกรณ์เคลื่อนที่ การควบคุมนี้จะปรากฏเฉพาะ ในอุปกรณ์ที่รองรับเหตุการณ์การวางแนวอุปกรณ์ โดยค่าเริ่มต้น ตัวควบคุม จะปรากฏใกล้กับด้านขวาล่างของภาพพาโนรามา คุณเปลี่ยนตำแหน่งของตัวควบคุมได้โดยระบุ MotionTrackingControlOptions ดูข้อมูลเพิ่มเติมได้ที่ส่วนการติดตาม การเคลื่อนไหว
  • linksControl จะแสดงลูกศรนำทางในรูปภาพเพื่อ ไปยังรูปภาพพาโนรามาที่อยู่ติดกัน
  • ส่วนควบคุมปิดช่วยให้ผู้ใช้ปิดโปรแกรมดู Street View ได้ คุณสามารถ เปิดหรือปิดใช้ตัวควบคุมปิดได้โดยตั้งค่า enableCloseButton เป็น true หรือ false

ตัวอย่างต่อไปนี้จะแก้ไขการควบคุมที่แสดงภายใน Street View ที่เชื่อมโยง และนำลิงก์ของมุมมองออก

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
ดูตัวอย่าง

ลองใช้ตัวอย่าง

การเข้าถึงข้อมูล Street View โดยตรง

คุณอาจต้องการกำหนดความพร้อมใช้งานของข้อมูล Street View หรือแสดงข้อมูลเกี่ยวกับภาพพาโนรามาที่เฉพาะเจาะจงโดยอัตโนมัติ โดยไม่ต้องจัดการแผนที่/ภาพพาโนรามาโดยตรง คุณทำได้โดยใช้ออบเจ็กต์ StreetViewService ซึ่งมีอินเทอร์เฟซสำหรับข้อมูลที่จัดเก็บไว้ในบริการ Street View ของ Google

คำขอรับบริการ Street View

การเข้าถึงบริการ Street View เป็นแบบไม่พร้อมกัน เนื่องจาก Google Maps API ต้องทำการเรียกไปยังเซิร์ฟเวอร์ภายนอก ด้วยเหตุนี้ คุณจึงต้องส่งเมธอด callback เพื่อดำเนินการเมื่อคำขอเสร็จสมบูรณ์ เมธอด Callback นี้จะประมวลผลผลลัพธ์

คุณเริ่มคำขอไปยัง StreetViewService ได้โดยใช้ StreetViewPanoRequest หรือ StreetViewLocationRequest

คำขอที่ใช้ StreetViewPanoRequest จะแสดงข้อมูลพาโนรามา เมื่อระบุรหัสอ้างอิงซึ่งระบุพาโนรามาที่ไม่ซ้ำกัน โปรดทราบว่า รหัสอ้างอิงเหล่านี้จะคงที่ตลอดอายุการใช้งานของภาพ พาโนรามานั้นๆ เท่านั้น

คำขอที่ใช้ StreetViewLocationRequest จะค้นหา ข้อมูลพาโนรามาในตำแหน่งที่ระบุโดยใช้พารามิเตอร์ต่อไปนี้

  • location ระบุตำแหน่ง (ละติจูดและลองจิจูด) ที่จะค้นหา ภาพพาโนรามา
  • preference กำหนดค่ากำหนดสำหรับภาพพาโนรามาที่ควรค้นหาภายใน รัศมี ซึ่งได้แก่ ภาพที่อยู่ใกล้กับตำแหน่งที่ระบุมากที่สุด หรือภาพที่ดีที่สุดภายในรัศมี
  • radius กำหนดรัศมี (หน่วยเป็นเมตร) ที่จะค้นหาภาพพาโนรามา โดยมีศูนย์กลางอยู่ที่ละติจูดและลองจิจูดที่ระบุ ค่าเริ่มต้นจะเป็น 50 หากไม่ได้ระบุไว้
  • source ระบุแหล่งที่มาของภาพพาโนรามาที่จะค้นหา ค่าที่ใช้ได้มีดังนี้
    • default ใช้แหล่งที่มาเริ่มต้นสำหรับ Street View การค้นหาไม่ได้จำกัดอยู่แค่แหล่งที่มาที่เฉพาะเจาะจง
    • outdoor จำกัดการค้นหาเฉพาะคอลเล็กชันกลางแจ้ง โปรดทราบว่าสถานที่ที่ระบุอาจไม่มีภาพพาโนรามากลางแจ้ง

การตอบกลับของบริการ Street View

ฟังก์ชัน getPanorama() ต้องมีฟังก์ชัน callback เพื่อดำเนินการเมื่อได้รับผลลัพธ์ จากบริการ Street View ฟังก์ชันเรียกกลับนี้จะแสดงผลชุดข้อมูลพาโนรามาภายในออบเจ็กต์ StreetViewPanoramaData และรหัส StreetViewStatus ที่ระบุสถานะของคำขอตามลำดับ

StreetViewPanoramaData ข้อกำหนดของออบเจ็กต์ประกอบด้วยข้อมูลเมตาเกี่ยวกับพาโนรามา Street View ในรูปแบบต่อไปนี้ 

{
  "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
  }
}

โปรดทราบว่าออบเจ็กต์ข้อมูลนี้ไม่ใช่StreetViewPanorama ออบเจ็กต์โดยตรง หากต้องการสร้างออบเจ็กต์ Street View โดยใช้ข้อมูลนี้ คุณจะต้อง สร้าง StreetViewPanorama และเรียกใช้ setPano() โดยส่งรหัสตามที่ระบุไว้ในฟิลด์ location.pano ที่ส่งคืน

โค้ด status อาจแสดงค่าใดค่าหนึ่งต่อไปนี้

  • OK แสดงว่าบริการพบพาโนรามาที่ตรงกัน
  • ZERO_RESULTS บ่งชี้ว่าบริการไม่พบภาพพาโนรามาที่ตรงกับเกณฑ์ที่ส่งมา
  • UNKNOWN_ERROR หมายความว่าเราดำเนินการตามคำขอของ Street View ไม่ได้ แม้ว่าเราจะไม่ทราบสาเหตุที่แน่ชัดก็ตาม

โค้ดต่อไปนี้สร้าง StreetViewService ที่ตอบสนองต่อการคลิกของผู้ใช้บนแผนที่โดยการสร้างเครื่องหมาย ซึ่งเมื่อ คลิกแล้วจะแสดง StreetViewPanorama ของตำแหน่งนั้น โค้ดใช้เนื้อหาของ StreetViewPanoramaData ที่บริการส่งคืน

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
ดูตัวอย่าง

ลองใช้ตัวอย่าง

การระบุพาโนรามา Street View ที่กำหนดเอง

Maps JavaScript API รองรับการแสดงภาพพาโนรามาที่กำหนดเอง ภายในออบเจ็กต์ StreetViewPanorama การใช้ภาพพาโนรามาที่กำหนดเองจะช่วยให้คุณแสดงภายในอาคาร วิวจากสถานที่ที่สวยงาม หรือสิ่งใดก็ตามที่มาจากจินตนาการของคุณได้ คุณยังลิงก์พาโนรามาที่กำหนดเองเหล่านี้กับพาโนรามา Street View ที่มีอยู่ของ Google ได้ด้วย

การตั้งค่าชุดภาพพาโนรามาที่กำหนดเองมีขั้นตอนดังนี้

  • สร้างภาพพาโนรามาพื้นฐานสำหรับพาโนรามาที่กำหนดเองแต่ละภาพ รูปภาพฐานนี้ควรเป็นรูปภาพที่มีความละเอียดสูงสุดที่คุณต้องการใช้แสดงภาพที่ซูมเข้า
  • (ไม่บังคับ แต่แนะนํา) สร้างชุดไทล์พาโนรามา ที่ระดับการซูมต่างๆ จากรูปภาพพื้นฐาน
  • สร้างลิงก์ระหว่างพาโนรามาที่กำหนดเอง
  • (ไม่บังคับ) กำหนดพาโนรามา "ทางเข้า" ภายใน ภาพ Street View ที่มีอยู่ของ Google และปรับแต่งลิงก์ จาก/ไปยังชุดที่กำหนดเองไปยังชุดมาตรฐาน
  • กำหนดข้อมูลเมตาสำหรับรูปภาพพาโนรามาแต่ละรูป ภายในออบเจ็กต์ StreetViewPanoramaData
  • ใช้เมธอดที่กำหนดข้อมูลและรูปภาพพาโนรามาที่กำหนดเอง และกำหนดเมธอดนั้นเป็นตัวแฮนเดิลที่กำหนดเอง ภายในออบเจ็กต์ StreetViewPanorama

ส่วนต่อไปนี้จะอธิบายกระบวนการนี้

การสร้างพาโนรามาที่กำหนดเอง

ภาพพาโนรามา Street View แต่ละภาพคือรูปภาพหรือชุดรูปภาพ ที่แสดงมุมมอง 360 องศาเต็มจากสถานที่เดียว ออบเจ็กต์ StreetViewPanorama ใช้รูปภาพที่เป็นไปตามการฉายภาพแบบสี่เหลี่ยมผืนผ้าเท่ากัน (Plate Carrée) การฉายภาพดังกล่าวมีมุมมองแนวนอน 360 องศา (แบบรอบด้าน) และมุมมองแนวตั้ง 180 องศา (จากด้านบนลงมาด้านล่าง) ฟิลด์ ของมุมมองเหล่านี้ส่งผลให้ได้รูปภาพที่มีสัดส่วนภาพ 2:1 ภาพพาโนรามาแบบ 360 องศาจะแสดงอยู่ด้านล่าง

มุมมองพาโนรามาของถนนในเมือง

โดยทั่วไปแล้ว คุณจะได้ภาพพาโนรามาจากการถ่ายรูปภาพหลายรูปจากตำแหน่งเดียว แล้วนำมาต่อกันโดยใช้ซอฟต์แวร์พาโนรามา (ดูข้อมูลเพิ่มเติมได้ที่ การเปรียบเทียบแอปพลิเคชันการต่อภาพของ Wikipedia) รูปภาพดังกล่าวควรแชร์ "กล้อง" เดียวกัน ซึ่งเป็นจุดที่ถ่ายรูปภาพพาโนรามาแต่ละรูป จากนั้นภาพพาโนรามา 360 องศาที่ได้จะกำหนดการฉายภาพบน ทรงกลมโดยมีรูปภาพห่อหุ้มพื้นผิวแบบ 2 มิติ ของทรงกลม

ทรงกลมที่มีมุมมองพาโนรามาของถนนบนพื้นผิว

การถือว่าพาโนรามาเป็นการฉายภาพบนทรงกลมที่มีระบบพิกัดเส้นตรงมีประโยชน์เมื่อแบ่งรูปภาพออกเป็นไทล์เส้นตรง และแสดงรูปภาพตามพิกัดไทล์ที่คำนวณแล้ว

การสร้างไทล์พาโนรามาที่กำหนดเอง

นอกจากนี้ Street View ยังรองรับรายละเอียดของรูปภาพในระดับต่างๆ ผ่าน การใช้ตัวควบคุมการซูม ซึ่งช่วยให้คุณซูมเข้าและออกได้จาก มุมมองเริ่มต้น โดยทั่วไปแล้ว Street View จะมีความละเอียดในการซูม 5 ระดับสำหรับภาพพาโนรามาที่กำหนด หากคุณ ใช้รูปภาพพาโนรามาเพียงรูปเดียวเพื่อแสดงที่ระดับการซูมทั้งหมด รูปภาพดังกล่าว จะต้องมีขนาดค่อนข้างใหญ่และทำให้แอปพลิเคชันของคุณช้าลงอย่างมาก หรือมีความละเอียดต่ำมากที่ระดับการซูมสูงขึ้น จนคุณต้องแสดงรูปภาพที่แตกเป็นพิกเซล โชคดีที่เราสามารถใช้รูปแบบการออกแบบที่คล้ายกันซึ่งใช้ในการแสดง ไทล์แผนที่ของ Google ที่ระดับการซูมต่างๆ เพื่อให้ได้ภาพความละเอียดที่เหมาะสมสำหรับภาพพาโนรามาในแต่ละระดับการซูม

เมื่อStreetViewPanoramaโหลดเป็นครั้งแรก ระบบจะแสดงรูปภาพที่ประกอบด้วย 25% (90 องศาของส่วนโค้ง) ของความกว้างแนวนอนของพาโนรามาที่ระดับการซูม 1 โดยค่าเริ่มต้น มุมมองนี้ สอดคล้องกับขอบเขตการมองเห็นของมนุษย์โดยประมาณ การซูม "ออก" จากมุมมองเริ่มต้นนี้จะทำให้เห็นเส้นโค้งที่กว้างขึ้น ส่วนการซูมเข้าจะทำให้ขอบเขตของมุมมองแคบลงเป็นเส้นโค้งที่เล็กลง StreetViewPanorama จะคำนวณ มุมมองที่เหมาะสมสำหรับระดับการซูมที่เลือกโดยอัตโนมัติ จากนั้น จะเลือกภาพที่เหมาะสมที่สุดสำหรับความละเอียดนั้นโดยการเลือก ชุดไทล์ที่ตรงกับขนาดของ มุมมองแนวนอนโดยประมาณ ฟิลด์มุมมองต่อไปนี้จะแมประดับการซูมของ Street View

ระดับการซูมของ Street View ขอบเขตการมองเห็น (องศา)
0 180
1 (ค่าเริ่มต้น) 90
2 45
3 22.5
4 11.25

โปรดทราบว่าขนาดของรูปภาพที่แสดงภายใน Street View จะขึ้นอยู่กับขนาดหน้าจอ (ความกว้าง) ของคอนเทนเนอร์ Street View ทั้งหมด หากคุณระบุคอนเทนเนอร์ที่กว้างขึ้น บริการ จะยังคงให้มุมมองเดียวกันสำหรับระดับ การซูมที่กำหนด แม้ว่าอาจเลือกไทล์ที่เหมาะสมกว่า สำหรับความละเอียดนั้นแทน

เนื่องจากพาโนรามาแต่ละภาพประกอบด้วยการฉายภาพแบบ Equirectangular การสร้างไทล์พาโนรามาจึงค่อนข้างง่าย เนื่องจากการฉายภาพ ให้ภาพที่มีสัดส่วนภาพ 2:1 ไทล์ที่มีสัดส่วน 2:1 จึงใช้งานได้ง่ายกว่า แม้ว่าไทล์สี่เหลี่ยมจัตุรัสอาจให้ประสิทธิภาพที่ดีกว่า ในแผนที่สี่เหลี่ยมจัตุรัส (เนื่องจากฟิลด์ของมุมมองจะเป็นสี่เหลี่ยมจัตุรัส)

สำหรับไทล์ 2:1 รูปภาพเดียวที่ครอบคลุมพาโนรามาทั้งหมด แสดงถึง "โลก" พาโนรามาทั้งหมด (รูปภาพฐาน) ที่ระดับการซูม 0 โดยแต่ละระดับการซูมที่เพิ่มขึ้นจะมีไทล์ 4zoomLevel (เช่น ที่ระดับการซูม 2 พาโนรามาทั้งหมดประกอบด้วยไทล์ 16 รายการ) หมายเหตุ: ระดับการซูมในไทล์ของ Street View จะไม่ตรงกับระดับการซูมที่ระบุโดยใช้ ตัวควบคุม Street View โดยตรง แต่ระดับการซูมของตัวควบคุม Street View จะเลือกมุมมอง (FoV) ซึ่งจะเลือกไทล์ที่เหมาะสม จากมุมมองนั้น

มุมมองพาโนรามาของถนนในเมืองที่แบ่งออกเป็นไทล์

โดยทั่วไป คุณควรตั้งชื่อไทล์รูปภาพเพื่อให้เลือกได้โดยอัตโนมัติ รูปแบบการตั้งชื่อดังกล่าว จะกล่าวถึงด้านล่างในส่วนการจัดการคำขอ Panorama ที่กำหนดเอง

การจัดการคำขอพาโนรามาที่กำหนดเอง

หากต้องการใช้พาโนรามาที่กำหนดเอง ให้เรียกใช้ StreetViewPanorama.registerPanoProvider() โดยระบุชื่อ ของเมธอดผู้ให้บริการพาโนรามาที่กำหนดเอง เมธอดผู้ให้บริการพาโนรามา ต้องแสดงผลออบเจ็กต์ StreetViewPanoramaData และมีลายเซ็นต่อไปนี้ 

Function(pano):StreetViewPanoramaData

StreetViewPanoramaData คือออบเจ็กต์ที่มีรูปแบบดังนี้ 

{
  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
  ]
}

แสดงภาพพาโนรามาที่กำหนดเองดังนี้

  • ตั้งค่าพร็อพเพอร์ตี้ StreetViewPanoramaOptions.pano เป็นค่าที่กำหนดเอง
  • เรียกใช้ StreetViewPanorama.registerPanoProvider() เพื่อระบุฟังก์ชันผู้ให้บริการพาโนรามาที่กำหนดเอง
  • ใช้ฟังก์ชันผู้ให้บริการพาโนรามาที่กำหนดเองเพื่อจัดการค่า pano ที่ระบุ
  • สร้างออบเจ็กต์ StreetViewPanoramaData
  • ตั้งค่าพร็อพเพอร์ตี้ StreetViewTileData.getTileUrl เป็นชื่อของฟังก์ชันผู้ให้บริการไทล์ที่กำหนดเองที่คุณระบุ เช่น getCustomPanoramaTileUrl
  • ใช้ฟังก์ชันผู้ให้บริการไทล์ที่กำหนดเอง ดังที่แสดงในตัวอย่าง ด้านล่าง
  • ส่งคืนออบเจ็กต์ StreetViewPanoramaData

หมายเหตุ: อย่าวาง position โดยตรงใน StreetViewPanorama เมื่อต้องการแสดง พาโนรามาที่กำหนดเอง เนื่องจากตำแหน่งดังกล่าวจะสั่งให้บริการ Street View ขอภาพ Street View เริ่มต้นที่อยู่ใกล้กับ ตำแหน่งนั้น แต่ให้ตั้งค่าตำแหน่งนี้ภายในฟิลด์ location.latLng ของออบเจ็กต์ StreetViewPanoramaData ที่กำหนดเองแทน

ตัวอย่างต่อไปนี้แสดงภาพพาโนรามาที่กำหนดเองของสำนักงาน Google ในซิดนีย์ โปรดทราบว่าตัวอย่างนี้ไม่ได้ใช้แผนที่หรือภาพ Street View เริ่มต้น

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
ดูตัวอย่าง

ลองใช้ตัวอย่าง

ผู้ให้บริการพาโนรามาที่กำหนดเองจะแสดงผลไทล์ที่เหมาะสมเมื่อได้รับรหัสพาโนรามา ระดับการซูม และพิกัดไทล์พาโนรามาที่ส่งมา เนื่องจากการเลือกรูปภาพขึ้นอยู่กับค่าที่ส่งมาเหล่านี้ จึงควรตั้งชื่อรูปภาพที่เลือกได้โดยอัตโนมัติตามค่าที่ส่งมา เช่น pano_zoom_tileX_tileY.png

ตัวอย่างต่อไปนี้จะเพิ่มลูกศรอีกอันไปยังรูปภาพ นอกเหนือจาก ลูกศรนำทาง Street View เริ่มต้น ซึ่งชี้ไปยัง Google ซิดนีย์และลิงก์ ไปยังภาพที่กำหนดเอง

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
ดูตัวอย่าง

ลองใช้ตัวอย่าง