ภาพรวม
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;
JavaScript
function initialize() { const fenway = { lat: 42.345573, lng: -71.098326 }; const map = new google.maps.Map(document.getElementById("map"), { center: fenway, zoom: 14, }); const panorama = new google.maps.StreetViewPanorama( document.getElementById("pano"), { position: fenway, pov: { heading: 34, pitch: 10, }, }, ); map.setStreetView(panorama); } window.initialize = initialize;
CSS
html, body { height: 100%; margin: 0; padding: 0; } #map, #pano { float: left; height: 100%; width: 50%; }
HTML
<html> <head> <title>Street View split-map-panes</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <div id="pano"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. 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>
ลองใช้ตัวอย่าง
การติดตามการเคลื่อนไหวบนอุปกรณ์เคลื่อนที่
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;
JavaScript
let panorama; function initMap() { const astorPlace = { lat: 40.729884, lng: -73.990988 }; // Set up the map const map = new google.maps.Map(document.getElementById("map"), { center: astorPlace, zoom: 18, streetViewControl: false, }); document.getElementById("toggle").addEventListener("click", toggleStreetView); // Set up the markers on the map const cafeMarker = new google.maps.Marker({ position: { lat: 40.730031, lng: -73.991428 }, map, icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00", title: "Cafe", }); const bankMarker = new google.maps.Marker({ position: { lat: 40.729681, lng: -73.991138 }, map, icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00", title: "Bank", }); const busMarker = new google.maps.Marker({ position: { lat: 40.729559, lng: -73.990741 }, map, icon: "https://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00", title: "Bus Stop", }); // We get the map's default panorama and set up some defaults. // Note that we don't yet set it visible. panorama = map.getStreetView(); // TODO fix type panorama.setPosition(astorPlace); panorama.setPov( /** @type {google.maps.StreetViewPov} */ { heading: 265, pitch: 0, }, ); } function toggleStreetView() { const toggle = panorama.getVisible(); if (toggle == false) { panorama.setVisible(true); } else { panorama.setVisible(false); } } window.initMap = initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: "Roboto", "sans-serif"; line-height: 30px; padding-left: 10px; } #floating-panel { margin-left: -100px; }
HTML
<html> <head> <title>Overlays Within Street View</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="floating-panel"> <input type="button" value="Toggle Street View" id="toggle" /> </div> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. 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>
ลองใช้ตัวอย่าง
กิจกรรม 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;
JavaScript
function initPano() { const panorama = new google.maps.StreetViewPanorama( document.getElementById("pano"), { position: { lat: 37.869, lng: -122.255 }, pov: { heading: 270, pitch: 0, }, visible: true, }, ); panorama.addListener("pano_changed", () => { const panoCell = document.getElementById("pano-cell"); panoCell.innerHTML = panorama.getPano(); }); panorama.addListener("links_changed", () => { const linksTable = document.getElementById("links_table"); while (linksTable.hasChildNodes()) { linksTable.removeChild(linksTable.lastChild); } const links = panorama.getLinks(); for (const i in links) { const row = document.createElement("tr"); linksTable.appendChild(row); const labelCell = document.createElement("td"); labelCell.innerHTML = "<b>Link: " + i + "</b>"; const valueCell = document.createElement("td"); valueCell.innerHTML = links[i].description; linksTable.appendChild(labelCell); linksTable.appendChild(valueCell); } }); panorama.addListener("position_changed", () => { const positionCell = document.getElementById("position-cell"); positionCell.firstChild.nodeValue = panorama.getPosition() + ""; }); panorama.addListener("pov_changed", () => { const headingCell = document.getElementById("heading-cell"); const pitchCell = document.getElementById("pitch-cell"); headingCell.firstChild.nodeValue = panorama.getPov().heading + ""; pitchCell.firstChild.nodeValue = panorama.getPov().pitch + ""; }); } window.initPano = initPano;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } #floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: "Roboto", "sans-serif"; line-height: 30px; padding-left: 10px; } #pano { width: 50%; height: 100%; float: left; } #floating-panel { width: 45%; height: 100%; float: right; text-align: left; overflow: auto; position: static; border: 0px solid #999; }
HTML
<html> <head> <title>Street View Events</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="pano"></div> <div id="floating-panel"> <table> <tr> <td><b>Position</b></td> <td id="position-cell"> </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"> </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>
ลองใช้ตัวอย่าง
ตัวควบคุม Street View
เมื่อแสดง StreetViewPanorama
ตัวควบคุมต่างๆ จะปรากฏในภาพพาโนรามาโดยค่าเริ่มต้น คุณเปิดหรือปิดใช้การควบคุมเหล่านี้ได้โดยตั้งค่าช่องที่เหมาะสมภายใน StreetViewPanoramaOptions
เป็น true
หรือ false
panControl
เป็นวิธีการหมุน พาโนรามา การควบคุมนี้จะปรากฏขึ้นโดยค่าเริ่มต้นเป็นเข็มทิศมาตรฐานและการควบคุมการเลื่อน คุณเปลี่ยนตําแหน่งของตัวควบคุมได้โดยระบุPanControlOptions
ในช่องpanControlOptions
zoomControl
มอบวิธีซูมเข้าภายในรูปภาพ การควบคุมนี้จะปรากฏโดยค่าเริ่มต้น โดยจะอยู่ใกล้กับด้านขวาล่างของภาพพาโนรามา คุณแก้ไขลักษณะที่ปรากฏของการควบคุมได้โดยระบุZoomControlOptions
ในช่องzoomControlOptions
addressControl
วางข้อความวางซ้อนซึ่งระบุที่อยู่ของสถานที่ตั้งที่เกี่ยวข้อง และมีลิงก์เพื่อเปิดสถานที่ตั้งใน Google Maps คุณแก้ไขลักษณะที่ปรากฏของการควบคุมได้โดยระบุStreetViewAddressControlOptions
ในช่องaddressControlOptions
fullscreenControl
มีตัวเลือกให้เปิด Street View ในโหมดเต็มหน้าจอ คุณแก้ไขลักษณะที่ปรากฏของการควบคุมได้โดยระบุFullscreenControlOptions
ในช่องfullscreenControlOptions
motionTrackingControl
เสนอตัวเลือกในการเปิดหรือปิดใช้ การติดตามการเคลื่อนไหวในอุปกรณ์เคลื่อนที่ การควบคุมนี้จะปรากฏ ในอุปกรณ์ที่รองรับเหตุการณ์การวางแนวของอุปกรณ์เท่านั้น โดยค่าเริ่มต้น ตัวควบคุมจะปรากฏใกล้กับมุมขวาล่างของภาพพาโนรามา คุณเปลี่ยนตําแหน่งของตัวควบคุมได้โดยระบุMotionTrackingControlOptions
ดูข้อมูลเพิ่มเติมได้ที่ส่วนการติดตามการเคลื่อนไหวlinksControl
มีลูกศรแนะนําเกี่ยวกับรูปภาพสําหรับการเดินทางไปยังรูปภาพพาโนรามาที่อยู่ติดกัน- การควบคุมปิดจะช่วยให้ผู้ใช้ปิดโปรแกรมดู Street View ได้ คุณเปิดหรือปิดใช้ตัวควบคุม "ปิด" ได้โดยตั้งค่า
enableCloseButton
เป็นtrue
หรือfalse
ตัวอย่างต่อไปนี้จะเปลี่ยนการควบคุมที่แสดงใน Street View ที่เกี่ยวข้องและนําลิงก์ของข้อมูลพร็อพเพอร์ตี้ออก
TypeScript
function initPano() { // Note: constructed panorama objects have visible: true // set by default. const panorama = new google.maps.StreetViewPanorama( document.getElementById("map") as HTMLElement, { position: { lat: 42.345573, lng: -71.098326 }, addressControlOptions: { position: google.maps.ControlPosition.BOTTOM_CENTER, }, linksControl: false, panControl: false, enableCloseButton: false, } ); } declare global { interface Window { initPano: () => void; } } window.initPano = initPano;
JavaScript
function initPano() { // Note: constructed panorama objects have visible: true // set by default. const panorama = new google.maps.StreetViewPanorama( document.getElementById("map"), { position: { lat: 42.345573, lng: -71.098326 }, addressControlOptions: { position: google.maps.ControlPosition.BOTTOM_CENTER, }, linksControl: false, panControl: false, enableCloseButton: false, }, ); } window.initPano = initPano;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Street View Controls</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. 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>
ลองใช้ตัวอย่าง
การเข้าถึงข้อมูล 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;
JavaScript
/* * Click the map to set a new location for the Street View camera. */ let map; let panorama; function initMap() { const berkeley = { lat: 37.869085, lng: -122.254775 }; const sv = new google.maps.StreetViewService(); panorama = new google.maps.StreetViewPanorama( document.getElementById("pano"), ); // Set up the map. map = new google.maps.Map(document.getElementById("map"), { center: berkeley, zoom: 16, streetViewControl: false, }); // Set the initial Street View camera to the center of the map sv.getPanorama({ location: berkeley, radius: 50 }).then(processSVData); // Look for a nearby Street View panorama when the map is clicked. // getPanorama will return the nearest pano when the given // radius is 50 meters or less. map.addListener("click", (event) => { sv.getPanorama({ location: event.latLng, radius: 50 }) .then(processSVData) .catch((e) => console.error("Street View data not found for this location."), ); }); } function processSVData({ data }) { const location = data.location; const marker = new google.maps.Marker({ position: location.latLng, map, title: location.description, }); panorama.setPano(location.pano); panorama.setPov({ heading: 270, pitch: 0, }); panorama.setVisible(true); marker.addListener("click", () => { const markerPanoID = location.pano; // Set the Pano to use the passed panoID. panorama.setPano(markerPanoID); panorama.setPov({ heading: 270, pitch: 0, }); panorama.setVisible(true); }); } window.initMap = initMap;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Directly Accessing Street View Data</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map" style="width: 45%; height: 100%; float: left"></div> <div id="pano" style="width: 45%; height: 100%; float: left"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. 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>
ลองใช้ตัวอย่าง
การให้ภาพพาโนรามา 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 มิติ
การใช้ภาพพาโนรามาเป็นเหมือนการฉายภาพบนทรงกลมด้วยระบบพิกัดทรงสี่เหลี่ยมผืนผ้า มีประโยชน์ในการแยกภาพเป็น ชิ้นส่วนรูปสี่เหลี่ยมผืนผ้า และแสดงภาพที่ยึดตาม พิกัดแผนที่ย่อย
การสร้างภาพพาโนรามาที่กําหนดเอง
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;
JavaScript
function initPano() { // Set up Street View and initially set it visible. Register the // custom panorama provider function. Set the StreetView to display // the custom panorama 'reception' which we check for below. const panorama = new google.maps.StreetViewPanorama( document.getElementById("map"), { pano: "reception", visible: true }, ); panorama.registerPanoProvider(getCustomPanorama); } // Return a pano image given the panoID. function getCustomPanoramaTileUrl(pano, zoom, tileX, tileY) { return ( "https://developers.google.com/maps/documentation/javascript/examples/full/images/" + "panoReception1024-" + zoom + "-" + tileX + "-" + tileY + ".jpg" ); } // Construct the appropriate StreetViewPanoramaData given // the passed pano IDs. function getCustomPanorama(pano) { if (pano === "reception") { return { location: { pano: "reception", description: "Google Sydney - Reception", }, links: [], // The text for the copyright control. copyright: "Imagery (c) 2010 Google", // The definition of the tiles for this panorama. tiles: { tileSize: new google.maps.Size(1024, 512), worldSize: new google.maps.Size(2048, 1024), // The heading in degrees at the origin of the panorama // tile set. centerHeading: 105, getTileUrl: getCustomPanoramaTileUrl, }, }; } // @ts-ignore TODO fix typings return null; } window.initPano = initPano;
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Custom Street View Panoramas</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. 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>
ลองใช้ตัวอย่าง
ผู้ให้บริการภาพพาโนรามาที่กําหนดเองจะแสดงชิ้นส่วนภาพที่เหมาะสมกับรหัสภาพพาโนรามาที่ผ่านไปแล้ว ระดับการซูม และพิกัดย่อยของภาพพาโนรามา
เนื่องจากการเลือกอิมเมจขึ้นอยู่กับค่าที่ส่งเหล่านี้ การตั้งชื่อรูปภาพที่เลือกได้แบบเป็นโปรแกรมจึงมาจากค่าที่ส่ง เช่น pano_zoom_tileX_tileY.png
ตัวอย่างต่อไปนี้จะเพิ่มลูกศรอีกรูปหนึ่งลงในรูปภาพ นอกเหนือจากลูกศรการนําทาง Street View เริ่มต้นที่ชี้ไปยัง Google Sydney และลิงก์ไปยังภาพที่กําหนดเอง
TypeScript
let panorama: google.maps.StreetViewPanorama; // StreetViewPanoramaData of a panorama just outside the Google Sydney office. let outsideGoogle: google.maps.StreetViewPanoramaData; // StreetViewPanoramaData for a custom panorama: the Google Sydney reception. function getReceptionPanoramaData(): google.maps.StreetViewPanoramaData { return { location: { pano: "reception", // The ID for this custom panorama. description: "Google Sydney - Reception", latLng: new google.maps.LatLng(-33.86684, 151.19583), }, links: [ { heading: 195, description: "Exit", pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano, }, ], copyright: "Imagery (c) 2010 Google", tiles: { tileSize: new google.maps.Size(1024, 512), worldSize: new google.maps.Size(2048, 1024), centerHeading: 105, getTileUrl: function ( pano: string, zoom: number, tileX: number, tileY: number ): string { return ( "https://developers.google.com/maps/documentation/javascript/examples/full/images/" + "panoReception1024-" + zoom + "-" + tileX + "-" + tileY + ".jpg" ); }, }, }; } function initPanorama() { panorama = new google.maps.StreetViewPanorama( document.getElementById("street-view") as HTMLElement, { pano: (outsideGoogle.location as google.maps.StreetViewLocation).pano } ); // Register a provider for the custom panorama. panorama.registerPanoProvider( (pano: string): google.maps.StreetViewPanoramaData => { if (pano === "reception") { return getReceptionPanoramaData(); } // @ts-ignore TODO fix typings return null; } ); // Add a link to our custom panorama from outside the Google Sydney office. panorama.addListener("links_changed", () => { if ( panorama.getPano() === (outsideGoogle.location as google.maps.StreetViewLocation).pano ) { panorama.getLinks().push({ description: "Google Sydney", heading: 25, pano: "reception", }); } }); } function initMap(): void { // Use the Street View service to find a pano ID on Pirrama Rd, outside the // Google office. new google.maps.StreetViewService() .getPanorama({ location: { lat: -33.867386, lng: 151.195767 } }) .then(({ data }: google.maps.StreetViewResponse) => { outsideGoogle = data; initPanorama(); }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let panorama; // StreetViewPanoramaData of a panorama just outside the Google Sydney office. let outsideGoogle; // StreetViewPanoramaData for a custom panorama: the Google Sydney reception. function getReceptionPanoramaData() { return { location: { pano: "reception", description: "Google Sydney - Reception", latLng: new google.maps.LatLng(-33.86684, 151.19583), }, links: [ { heading: 195, description: "Exit", pano: outsideGoogle.location.pano, }, ], copyright: "Imagery (c) 2010 Google", tiles: { tileSize: new google.maps.Size(1024, 512), worldSize: new google.maps.Size(2048, 1024), centerHeading: 105, getTileUrl: function (pano, zoom, tileX, tileY) { return ( "https://developers.google.com/maps/documentation/javascript/examples/full/images/" + "panoReception1024-" + zoom + "-" + tileX + "-" + tileY + ".jpg" ); }, }, }; } function initPanorama() { panorama = new google.maps.StreetViewPanorama( document.getElementById("street-view"), { pano: outsideGoogle.location.pano }, ); // Register a provider for the custom panorama. panorama.registerPanoProvider((pano) => { if (pano === "reception") { return getReceptionPanoramaData(); } // @ts-ignore TODO fix typings return null; }); // Add a link to our custom panorama from outside the Google Sydney office. panorama.addListener("links_changed", () => { if (panorama.getPano() === outsideGoogle.location.pano) { panorama.getLinks().push({ description: "Google Sydney", heading: 25, pano: "reception", }); } }); } function initMap() { // Use the Street View service to find a pano ID on Pirrama Rd, outside the // Google office. new google.maps.StreetViewService() .getPanorama({ location: { lat: -33.867386, lng: 151.195767 } }) .then(({ data }) => { outsideGoogle = data; initPanorama(); }); } window.initMap = initMap;
CSS
html, body { height: 100%; margin: 0; padding: 0; } #street-view { height: 100%; }
HTML
<html> <head> <title>Custom Street View Panorama Tiles</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="street-view"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. 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>