บริการ Street View

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

ภาพรวม

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

Google Street View แสดงมุมมองแบบพาโนรามา 360 องศาจากถนนที่กําหนดไว้ครอบคลุมพื้นที่ครอบคลุม พื้นที่ที่มี Street View ของ 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 ได้โดยตั้งค่าพร็อพเพอร์ตี้ streetViewControlOptions.position ของ Map เป็น ControlPosition ใหม่

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

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

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

ระบบรองรับรูปภาพ Street View ผ่านออบเจ็กต์ StreetViewPanorama ที่ระบุอินเทอร์เฟซ API ให้แก่ Street View "viewer." แต่ละแผนที่มีพาโนรามา 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 แบบสแตนด์อโลนที่ไม่มีแผนที่ได้

ตําแหน่ง Street View และมุมมอง (POV)

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

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

  • heading (ค่าเริ่มต้น 0) กําหนดมุมหมุนรอบตําแหน่งกล้องเป็นองศาที่สัมพัทธ์จากทิศเหนือจริง ส่วนหัวจะวัดตามเข็มนาฬิกา (90 องศาคือทิศตะวันออกที่ถูกต้อง)
  • pitch (0 เริ่มต้น) กําหนดความแปรปรวนของมุม "up" หรือ "down" จากระดับเสียงเริ่มต้นเริ่มต้นของกล้อง ซึ่งมักจะเป็นแนวนอน (แต่ไม่เสมอไป) (เช่น รูปภาพที่ถ่ายบนเนินเขามักแสดงระดับความสูงต่ําเริ่มต้นซึ่งไม่อยู่ในแนวนอน) มุมของระดับความสูงต่ําจะวัดด้วยค่าบวกที่มองขึ้น (เพื่อขึ้น +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;

JavaScript

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

  map.setStreetView(panorama);
}

window.initialize = initialize;

CSS

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

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

HTML

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

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

    <!-- 
     The `defer` attribute causes the callback 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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initialize&v=weekly"
      defer
    ></script>
  </body>
</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 เริ่มต้นรองรับการแสดงโฆษณาเนทีฟของการวางซ้อนบนแผนที่ โดยทั่วไปแล้ว การวางซ้อนจะปรากฏในระดับ "Street Street" การตรึงไว้ที่ตําแหน่ง 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 ของโครงสร้างของคุณเอง จะลบล้างพาโนรามาเริ่มต้น

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

TypeScript

let panorama: google.maps.StreetViewPanorama;

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

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

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

  // Set up the markers on the map
  const cafeMarker = new google.maps.Marker({
    position: { lat: 40.730031, lng: -73.991428 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00",
    title: "Cafe",
  });

  const bankMarker = new google.maps.Marker({
    position: { lat: 40.729681, lng: -73.991138 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00",
    title: "Bank",
  });

  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00",
    title: "Bus Stop",
  });

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

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

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

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

JavaScript

let panorama;

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

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

  // Set up the markers on the map
  const cafeMarker = new google.maps.Marker({
    position: { lat: 40.730031, lng: -73.991428 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00",
    title: "Cafe",
  });
  const bankMarker = new google.maps.Marker({
    position: { lat: 40.729681, lng: -73.991138 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00",
    title: "Bank",
  });
  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00",
    title: "Bus Stop",
  });

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

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

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

window.initMap = initMap;

CSS

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

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

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

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

HTML

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

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

    <!-- 
     The `defer` attribute causes the callback 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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
ดูตัวอย่าง

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

เหตุการณ์ Street View

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

  • pano_changed จะเริ่มทํางานเมื่อใดก็ตามที่รหัสพาโนรามาแต่ละรายการมีการเปลี่ยนแปลง เหตุการณ์นี้ไม่ได้เป็นการรับประกันว่าข้อมูลที่เกี่ยวข้องภายในพาโนรามา (เช่น ลิงก์) มีการเปลี่ยนแปลงด้วยเมื่อเกิดเหตุการณ์นี้ขึ้น เหตุการณ์นี้แสดงว่ารหัสพาโนรามามีการเปลี่ยนแปลงเท่านั้น โปรดทราบว่ารหัสพาโนรามา (ซึ่งใช้อ้างอิงพาโนรามานี้) ได้คงที่ภายในเซสชันเบราว์เซอร์ปัจจุบันเท่านั้น
  • position_changed จะเริ่มทํางานเมื่อใดก็ตามที่ตําแหน่ง (LatLng) ของพาโนรามามีการเปลี่ยนแปลง การหมุน พาโนรามาจะไม่ทริกเกอร์เหตุการณ์นี้ โปรดทราบว่าคุณสามารถเปลี่ยน ตําแหน่งจริงของพาโนรามาได้โดยไม่ต้องเปลี่ยนรหัสพาโนรามาที่เกี่ยวข้อง เนื่องจาก API จะเชื่อมโยงรหัสพาโนรามาที่ใกล้ที่สุดโดยอัตโนมัติไปยังตําแหน่งของพาโนรามา
  • pov_changed จะเริ่มทํางานเมื่อใดก็ตามที่ StreetViewPov ของ Street View เปลี่ยนแปลง โปรดทราบว่าเหตุการณ์นี้อาจเริ่มทํางานขณะที่ตําแหน่งและรหัสพาโนรามายังคงนิ่งอยู่
  • 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;

JavaScript

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

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

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

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

    const links = panorama.getLinks();

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

      linksTable.appendChild(row);

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

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

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

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

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

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

window.initPano = initPano;

CSS

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

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

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

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

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

HTML

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

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

    <!-- 
     The `defer` attribute causes the callback 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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</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;

JavaScript

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

window.initPano = initPano;

CSS

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

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

HTML

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

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

    <!-- 
     The `defer` attribute causes the callback 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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
ดูตัวอย่าง

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

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

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

คําขอบริการ Street View

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

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

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

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

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

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

ฟังก์ชัน getPanorama() ต้องมีฟังก์ชันเรียกกลับเพื่อเรียกใช้เมื่อมีการดึงข้อมูลผลลัพธ์จากบริการ 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() จากนั้นส่ง ID ดังที่ระบุในช่อง 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;

JavaScript

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

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

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

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

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

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

window.initMap = initMap;

CSS

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

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

HTML

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

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

    <!-- 
     The `defer` attribute causes the callback 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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
ดูตัวอย่าง

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

การให้พาโนรามา Street View ที่กําหนดเอง

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

หากต้องการใช้พาโนรามาที่กําหนดเอง ให้โทรหา 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 ที่ใกล้กับตําแหน่งนั้น แต่ให้กําหนดตําแหน่งนี้ในช่อง StreetViewPanoramaData ที่กําหนดเองของ location.latLng แทน

ตัวอย่างต่อไปนี้แสดงพาโนรามาที่กําหนดเองของสํานักงาน 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;

JavaScript

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

  panorama.registerPanoProvider(getCustomPanorama);
}

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

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

window.initPano = initPano;

CSS

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

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

HTML

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

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

    <!-- 
     The `defer` attribute causes the callback 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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
ดูตัวอย่าง

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

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

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

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",
      description: "Google Sydney - Reception",
      latLng: new google.maps.LatLng(-33.86684, 151.19583),
    },
    links: [
      {
        heading: 195,
        description: "Exit",
        pano: outsideGoogle.location.pano,
      },
    ],
    copyright: "Imagery (c) 2010 Google",
    tiles: {
      tileSize: new google.maps.Size(1024, 512),
      worldSize: new google.maps.Size(2048, 1024),
      centerHeading: 105,
      getTileUrl: function (pano, zoom, tileX, tileY) {
        return (
          "https://developers.google.com/maps/documentation/javascript/examples/full/images/" +
          "panoReception1024-" +
          zoom +
          "-" +
          tileX +
          "-" +
          tileY +
          ".jpg"
        );
      },
    },
  };
}

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

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

window.initMap = initMap;

CSS

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

#street-view {
  height: 100%;
}

HTML

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

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

    <!-- 
     The `defer` attribute causes the callback 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
     with https://www.npmjs.com/package/@googlemaps/js-api-loader.
    -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
ดูตัวอย่าง

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