บริการ 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 ได้โดยตั้งค่าพร็อพเพอร์ตี้ streetViewControlOptions.position ของ Map เป็น ControlPosition ใหม่

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

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

ภาพพาโนรามาของ Street View

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

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

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

ตําแหน่ง 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>
    <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.
      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 ของการก่อสร้างเองอย่างชัดเจน คุณจะลบล้างภาพพาโนรามาเริ่มต้น

ตัวอย่างต่อไปนี้แสดงเครื่องหมายที่แสดงถึงสถานที่หลายแห่งรอบเมืองสยาม กรุงเทพฯ สลับการแสดงผลไปยัง 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;
index.ts

JavaScript

let panorama;

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

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

  // 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;
index.js

CSS

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

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

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

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

style.css

HTML

<html>
  <head>
    <title>Overlays Within Street View</title>
    <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.
      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

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

  • 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;
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>
    <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.
      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>
    <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.
      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 เพื่อดําเนินการตามคําขอให้เสร็จสมบูรณ์ เมธอดเรียกกลับนี้ประมวลผลผลลัพธ์

คุณเริ่มคําขอไปยัง 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>
    <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.
      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 ภาพพาโนรามาที่ล้อมรอบเต็มรูปแบบแสดงอยู่ด้านล่าง

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

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

รูปทรง 360 องศาพร้อมวิวถนนบนพื้นถนน

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

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

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 โดยสิ้นเชิง หากคุณให้บริการคอนเทนเนอร์ที่กว้างขึ้น บริการจะยังคงมีช่องมุมมองเดียวกันสําหรับระดับการซูมที่กําหนด แม้ว่าอาจเลือกการ์ดที่เหมาะสมสําหรับความละเอียดดังกล่าวมากกว่าก็ตาม

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

สําหรับชิ้นส่วนภาพ 2:1 ภาพเดียวที่ครอบคลุมภาพพาโนรามาทั้งหมดจะแสดงภาพพาโนรามา "โลก" (ภาพฐาน) ทั้งภาพในระดับการซูม 0 โดยแต่ละระดับการซูมที่เพิ่มขึ้นจะมีชิ้นส่วน 4zoomLevel ภาพ (เช่น ที่การซูมระดับ 2 ภาพพาโนรามาทั้งหมดจะมี 16 ชิ้นส่วน) หมายเหตุ: ระดับการซูมในมุมมองแบบเรียงต่อกันของ Street View จะไม่ตรงกับระดับการซูมโดยตรงตามที่ให้ไว้โดยใช้ตัวควบคุม 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 ที่เป็นค่าเริ่มต้นใกล้กับตําแหน่งนั้น ให้ตั้งค่าตําแหน่งในช่อง 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>
    <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.
      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 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;
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",
      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>
    <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.
      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
ดูตัวอย่าง

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