บริการ Street View

ภาพรวม

เลือกแพลตฟอร์ม แอนดรอยด์ iOS JavaScript

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

ดูตัวอย่างภาพ Street View ได้ที่ด้านล่าง


Maps JavaScript API ให้บริการ Street View สำหรับการได้มาและการบิดเบือนภาพที่ใช้ใน Google Maps Street View บริการ 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 สวนสาธารณะ เลือกเพ็กแมนและลากไปยังตำแหน่งที่สนับสนุนบนแผนที่ จะเปลี่ยนภาพพาโนรามาของ Street View

TypeScript

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

  map.setStreetView(panorama);
}

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

JavaScript

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

  map.setStreetView(panorama);
}

window.initialize = initialize;
index.js

CSS

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

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

style.css

HTML

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

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

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initialize&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
ดูตัวอย่าง

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

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

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

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

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

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

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

    var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('pano'), {
      position: {lat: 37.869260, lng: -122.254811},
      pov: {heading: 165, pitch: 0},
      motionTracking: false,
      motionTrackingControl: false
    });
  • เปลี่ยนตำแหน่งเริ่มต้นของการควบคุมการติดตามการเคลื่อนไหว โดยค่าเริ่มต้น ตัวควบคุมจะปรากฏบริเวณด้านขวาล่างของภาพพาโนรามา (ตำแหน่ง RIGHT_BOTTOM) ตัวอย่างต่อไปนี้จะกำหนดตำแหน่งของฟิลด์ ควบคุมที่ด้านล่างซ้าย: 
    var panorama = new google.maps.StreetViewPanorama(
    document.getElementById('pano'), {
      position: {lat: 37.869260, lng: -122.254811},
      pov: {heading: 165, pitch: 0},
      motionTrackingControlOptions: {
        position: google.maps.ControlPosition.LEFT_BOTTOM
      }
    });

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


ดูตัวอย่าง

การวางซ้อนภายใน Street View

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

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

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

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

TypeScript

let panorama: google.maps.StreetViewPanorama;

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

  const cafeIcon = document.createElement("img");
  cafeIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/cafe_icon.svg";

  const dollarIcon = document.createElement("img");
  dollarIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/bank_icon.svg";

  const busIcon = document.createElement("img");
  busIcon.src = "https://developers.google.com/maps/documentation/javascript/examples/full/images/bus_icon.svg";


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

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

  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    title: "Bus Stop",
    icon: busIcon.src,
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = 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);

  const cafeIcon = document.createElement("img");

  cafeIcon.src =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/cafe_icon.svg";

  const dollarIcon = document.createElement("img");

  dollarIcon.src =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/bank_icon.svg";

  const busIcon = document.createElement("img");

  busIcon.src =
    "https://developers.google.com/maps/documentation/javascript/examples/full/images/bus_icon.svg";

  // Set up the markers on the map
  const cafeMarker = new google.maps.Marker({
    position: { lat: 40.730031, lng: -73.991428 },
    map,
    title: "Cafe",
    icon: cafeIcon.src,
  });
  const bankMarker = new google.maps.Marker({
    position: { lat: 40.729681, lng: -73.991138 },
    map,
    title: "Bank",
    icon: dollarIcon.src,
  });
  const busMarker = new google.maps.Marker({
    position: { lat: 40.729559, lng: -73.990741 },
    map,
    title: "Bus Stop",
    icon: busIcon.src,
  });

  // We get the map's default panorama and set up some defaults.
  // Note that we don't yet set it visible.
  panorama = 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>

    <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 script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
ดูตัวอย่าง

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

เหตุการณ์ Street View

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

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

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

TypeScript

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

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

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

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

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

    const links = panorama.getLinks();

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

      linksTable.appendChild(row);

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

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

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

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

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

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

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

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

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

JavaScript

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

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

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

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

    const links = panorama.getLinks();

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

      linksTable.appendChild(row);

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

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

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

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

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

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

window.initPano = initPano;
index.js

CSS

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

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

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

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

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

style.css

HTML

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

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

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
ดูตัวอย่าง

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

ตัวควบคุม Street View

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

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

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

TypeScript

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

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

JavaScript

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

window.initPano = initPano;
index.js

CSS

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

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

style.css

HTML

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

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

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
ดูตัวอย่าง

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

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

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

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

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

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

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

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

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

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

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

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

{
  "location": {
    "latLng": LatLng,
    "description": string,
    "pano": string
  },
  "copyright": string,
  "links": [{
      "heading": number,
      "description": string,
      "pano": string,
      "roadColor": string,
      "roadOpacity": number
    }],
  "tiles": {
    "worldSize": Size,
    "tileSize": Size,
    "centerHeading": number
  }
}

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

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

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

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

TypeScript

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

let map: google.maps.Map;

let panorama: google.maps.StreetViewPanorama;

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

  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("pano") as HTMLElement
  );

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

  // Set the initial Street View camera to the center of the map
  sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData);

  // Look for a nearby Street View panorama when the map is clicked.
  // getPanorama will return the nearest pano when the given
  // radius is 50 meters or less.
  map.addListener("click", (event) => {
    sv.getPanorama({ location: event.latLng, radius: 50 })
      .then(processSVData)
      .catch((e) =>
        console.error("Street View data not found for this location.")
      );
  });
}

function processSVData({ data }: google.maps.StreetViewResponse) {
  const location = data.location!;

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

  panorama.setPano(location.pano as string);
  panorama.setPov({
    heading: 270,
    pitch: 0,
  });
  panorama.setVisible(true);

  marker.addListener("click", () => {
    const markerPanoID = location.pano;

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

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

JavaScript

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

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

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

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

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

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

window.initMap = initMap;
index.js

CSS

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

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

style.css

HTML

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

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

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
ดูตัวอย่าง

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

ให้บริการภาพพาโนรามาของ Street View ตามสั่ง

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

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

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

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

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

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

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

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

ถนนแบบ 360 องศาที่มีวิวถนนแบบพาโนรามา

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

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

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

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

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

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

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

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

JavaScript

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

  panorama.registerPanoProvider(getCustomPanorama);
}

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

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

window.initPano = initPano;
index.js

CSS

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

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

style.css

HTML

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

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

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initPano&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
ดูตัวอย่าง

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

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

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

TypeScript

let panorama: google.maps.StreetViewPanorama;

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

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

function initPanorama() {
  panorama = new google.maps.StreetViewPanorama(
    document.getElementById("street-view") as HTMLElement,
    { pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano }
  );
  // Register a provider for the custom panorama.
  panorama.registerPanoProvider(
    (pano: string): google.maps.StreetViewPanoramaData => {
      if (pano === "reception") {
        return getReceptionPanoramaData();
      }
      // @ts-ignore TODO fix typings
      return null;
    }
  );

  // Add a link to our custom panorama from outside the Google Sydney office.
  panorama.addListener("links_changed", () => {
    if (
      panorama.getPano() ===
      (outsideGoogle.location as google.maps.StreetViewLocation).pano
    ) {
      panorama.getLinks().push({
        description: "Google Sydney",
        heading: 25,
        pano: "reception",
      });
    }
  });
}

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

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

JavaScript

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

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

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

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

window.initMap = initMap;
index.js

CSS

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

#street-view {
  height: 100%;
}

style.css

HTML

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

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

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html
ดูตัวอย่าง

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