Dịch vụ Chế độ xem đường phố

Tổng quan

Chọn nền tảng: Android iOS JavaScript

Ngoài ra, hãy xem Tài liệu tham khảo API JavaScript của Maps: Hiển thị, Dịch vụ)

Chế độ xem đường phố của Google cung cấp chế độ xem toàn cảnh 360 độ từ đường được chỉ định trong toàn bộ khu vực phủ sóng của nó. API Chế độ xem phố Phạm vi bao phủ cũng giống như phạm vi phủ sóng của ứng dụng Google Maps (https://maps.google.com/). Danh sách hiện tại các thành phố được hỗ trợ Chế độ xem phố có sẵn tại Google Trang web của Maps.

Lưu ý: Hình ảnh trong Chế độ xem đường phố xuất hiện từ hai nguồn: Google (hình ảnh không công khai do nhà phát triển kiểm soát) và công cộng (Nội dung do người dùng tạo hoặc nội dung công khai do người dùng tạo). Lưu ý rằng không có cách nào để sử dụng chỉ một nguồn Đường phố Xem hình ảnh chồng lên nhau. Tìm hiểu thêm về Chính sách quyền riêng tư đối với hình ảnh trong Chế độ xem đường phố.

Dưới đây là một hình ảnh minh hoạ trong Chế độ xem đường phố.

API JavaScript của Maps cung cấp dịch vụ Chế độ xem phố để thu thập và chỉnh sửa hình ảnh dùng trong Google Maps Chế độ xem đường phố. Dịch vụ Chế độ xem phố này được hỗ trợ sẵn trong trình duyệt.

Sử dụng bản đồ trong Chế độ xem phố

Mặc dù Chế độ xem đường phố có thể được sử dụng trong phần tử DOM độc lập, đó là hữu ích khi chỉ rõ một vị trí trên bản đồ. Theo mặc định, Chế độ xem đường phố là bật trên bản đồ và chế độ điều khiển Người hình mắc áo trong Chế độ xem đường phố xuất hiện được tích hợp trong điều khiển điều hướng (thu phóng và xoay). Bạn có thể ẩn nội dung này kiểm soát trong MapOptions của bản đồ bằng cách đặt streetViewControl đến false. Bạn cũng có thể thay đổi vị trí mặc định của chế độ kiểm soát Chế độ xem đường phố bằng cách đặt streetViewControlOptions.position của Map sang một ControlPosition mới.

Kiểm soát Người hình mắc áo trong Chế độ xem đường phố cho phép bạn xem Chế độ xem đường phố ảnh toàn cảnh trực tiếp trong bản đồ. Khi người dùng nhấp và giữ Người hình mắc áo, bản đồ cập nhật để hiển thị đường viền màu xanh dương xung quanh các con phố có hỗ trợ Chế độ xem đường phố, cung cấp trải nghiệm người dùng tương tự như ứng dụng Google Maps.

Khi người dùng thả Điểm đánh dấu Người hình mắc áo xuống đường phố, bản đồ sẽ cập nhật thành hiển thị ảnh toàn cảnh trong Chế độ xem đường phố của vị trí được chỉ định.

Ảnh toàn cảnh trong Chế độ xem phố

Lưu ý: Hệ thống chỉ lập hóa đơn cho các ảnh toàn cảnh trong Chế độ xem đường phố được tạo bằng đối tượng StreetViewPanorama. Trải nghiệm Chế độ xem đường phố được tích hợp sẵn dựa trên điều khiển Người hình mắc áo trong Chế độ xem đường phố và StreetViewService, không bị tính phí. Để biết thêm thông tin, hãy xem Định giá.

Hình ảnh trong Chế độ xem đường phố được hỗ trợ thông qua việc sử dụng Đối tượng StreetViewPanorama cung cấp một API giao diện "người xem" Chế độ xem phố. Mỗi bản đồ chứa một Ảnh toàn cảnh trong Chế độ xem phố để bạn có thể truy xuất bằng cách gọi phương thức getStreetView() của ánh xạ. Khi bạn thêm một Chế độ xem đường phố điều khiển cho bản đồ bằng cách đặt streetViewControl của nó tuỳ chọn với true, bạn sẽ tự động kết nối Người hình mắc áo kiểm soát ảnh toàn cảnh mặc định này trong Chế độ xem phố.

Bạn cũng có thể tạo StreetViewPanorama của riêng mình và đặt đối tượng ánh xạ để sử dụng đối tượng đó thay vì đối tượng mặc định, bằng cách đặt thuộc tính streetView của bản đồ một cách rõ ràng thành đối tượng đó. Bạn có thể muốn ghi đè ảnh toàn cảnh mặc định nếu bạn muốn sửa đổi hành vi mặc định, chẳng hạn như chế độ tự động chia sẻ lớp phủ giữa bản đồ và ảnh toàn cảnh. (Xem Lớp phủ trong Chế độ xem phố bên dưới.)

Vùng chứa Chế độ xem phố

Thay vào đó, bạn nên hiển thị StreetViewPanorama trong một phần tử DOM riêng, thường là phần tử <div>. Chỉ cần truyền phần tử DOM trong phần tử của StreetViewPanorama hàm khởi tạo. Để hình ảnh hiển thị tối ưu, bạn nên sử dụng kích thước tối thiểu là 200 pixel x 200 pixel.

Lưu ý: Mặc dù Chế độ xem đường phố được thiết kế để sử dụng cùng với bản đồ, không bắt buộc phải sử dụng. Bạn có thể sử dụng một đối tượng độc lập trong Chế độ xem đường phố mà không có bản đồ.

Vị trí và góc xem (POV) trong Chế độ xem đường phố

Hàm khởi tạo StreetViewPanorama cũng cho phép bạn đặt vị trí và điểm xem trong Chế độ xem phố bằng cách sử dụng Tham số StreetViewOptions. Bạn có thể gọi setPosition() và setPov() trên đối tượng sau để thay đổi vị trí và góc nhìn của nhân vật.

Vị trí trong Chế độ xem đường phố xác định vị trí của tiêu điểm máy ảnh cho hình ảnh, nhưng không xác định hướng của máy ảnh cho hình ảnh đó. Với mục đích đó, đối tượng StreetViewPov xác định hai thuộc tính:

• heading (0 mặc định) xác định góc xoay xung quanh quỹ tích camera theo độ tương đối so với hướng bắc thực. Tiêu đề là đo theo chiều kim đồng hồ (90 độ là theo hướng Đông).
• pitch (0 mặc định) xác định phương sai góc "lên" hoặc "giảm" từ cao độ mặc định ban đầu của máy ảnh, thường là (nhưng không phải lúc nào cũng vậy) theo chiều ngang phẳng. (Ví dụ: hình ảnh được chụp trên một ngọn đồi sẽ có thể thể hiện cao độ mặc định không phải là chiều ngang.) Các góc ném là được đo bằng các giá trị dương nhìn lên (tới +90 độ thẳng đứng và trực giao với cao độ mặc định) và các giá trị âm nhìn xuống (tới -90) thẳng xuống và trực giao với cao độ mặc định).

Đối tượng StreetViewPov thường được dùng nhất để xác định góc nhìn của máy ảnh Chế độ xem phố. Bạn cũng có thể xác định điểm nhìn của nhiếp ảnh gia — thường là hướng ô tô hoặc xe đạp ba bánh đang đối diện với nhau StreetViewPanorama.getPhotographerPov().

Mã sau đây hiển thị bản đồ Boston với chế độ xem ban đầu của Fenway Công viên. Chọn Người hình mắc áo và kéo Người hình mắc áo đến vị trí được hỗ trợ trên bản đồ sẽ thay đổi ảnh toàn cảnh của Chế độ xem phố:

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

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

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

Lưu ý: JavaScript được biên dịch từ đoạn mã TypeScript.

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

Xem ví dụ

Dùng thử mẫu

JSFiddle.net Google Cloud Shell

Theo dõi chuyển động trên thiết bị di động

Trên các thiết bị hỗ trợ các sự kiện liên quan đến hướng thiết bị, API sẽ cung cấp cho người dùng thay đổi góc nhìn của Chế độ xem phố dựa trên chuyển động của thiết bị. Người dùng có thể xem xung quanh bằng cách di chuyển thiết bị. Đây gọi là chuyển động hoặc theo dõi xoay thiết bị.

Là nhà phát triển ứng dụng, bạn có thể thay đổi hành vi mặc định như sau:

• Bật hoặc tắt chức năng theo dõi chuyển động. Theo mặc định, chuyển động tính năng theo dõi sẽ được bật trên mọi thiết bị hỗ trợ. Mẫu sau đây sẽ tắt tính năng theo dõi chuyển động nhưng vẫn hiển thị chế độ kiểm soát theo dõi chuyển động. (Lưu ý rằng người dùng có thể bật tính năng theo dõi chuyển động bằng cách nhấn vào nút điều khiển.)

  var panorama = new google.maps.StreetViewPanorama(
      document.getElementById('pano'), {
        position: {lat: 37.869260, lng: -122.254811},
        pov: {heading: 165, pitch: 0},
        motionTracking: false
      });

• Ẩn hoặc hiện nút điều khiển theo dõi chuyển động. Theo mặc định, chế độ kiểm soát là hiển thị trên các thiết bị hỗ trợ tính năng theo dõi chuyển động. Người dùng có thể nhấn vào để bật hoặc tắt chế độ theo dõi chuyển động. Xin lưu ý rằng chế độ kiểm soát này sẽ không bao giờ xuất hiện nếu thiết bị không hỗ trợ tính năng theo dõi chuyển động, bất kể giá trị của motionTrackingControl.

  Mẫu sau đây vô hiệu hoá cả tính năng theo dõi chuyển động và điều khiển theo dõi chuyển động. Trong trường hợp này, người dùng không thể chuyển động theo dõi trên:

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

• Thay đổi vị trí mặc định của nút điều khiển theo dõi chuyển động. Theo mặc định, nút điều khiển xuất hiện gần phía dưới cùng bên phải của ảnh toàn cảnh (vị trí RIGHT_BOTTOM). Mẫu sau đây đặt vị trí của xuống dưới cùng bên trái:

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

Để xem tính năng theo dõi chuyển động trong thực tế, hãy xem mẫu sau trên thiết bị di động thiết bị nào (hoặc bất kỳ thiết bị nào hỗ trợ sự kiện liên quan đến hướng thiết bị):

Xem ví dụ

Lớp phủ trong Chế độ xem phố

Đối tượng StreetViewPanorama mặc định hỗ trợ mã gốc hiển thị bản đồ lớp phủ. Lớp phủ thường xuất hiện ở "cấp đường phố" đã neo tại LatLng vị trí. (Điểm đánh dấu sẽ xuất hiện với đuôi được neo vào ngang trong ảnh toàn cảnh của Chế độ xem phố).

Hiện tại, các loại lớp phủ được hỗ trợ trên Chế độ xem đường phố ảnh toàn cảnh được giới hạn ở Marker, InfoWindow và các OverlayView tuỳ chỉnh. Các lớp phủ mà bạn hiển thị trên bản đồ có thể được hiển thị trên ảnh toàn cảnh của Chế độ xem phố bằng cách coi ảnh toàn cảnh là ảnh thay thế cho đối tượng Map, gọi setMap() và truyền StreetViewPanorama làm đối số thay vì bản đồ. Thông tin tương tự, bạn có thể mở cửa sổ trong ảnh toàn cảnh của Chế độ xem phố bằng cách gọi điện open(), truyền StreetViewPanorama() thay vì bản đồ.

Ngoài ra, khi tạo bản đồ với thuộc tính mặc định StreetViewPanorama, mọi điểm đánh dấu được tạo trên bản đồ đều sẽ được chia sẻ tự động với ảnh toàn cảnh trong Chế độ xem đường phố được liên kết của bản đồ, miễn là ảnh toàn cảnh. Để truy xuất ảnh toàn cảnh mặc định trong Chế độ xem phố, hãy gọi getStreetView() trên đối tượng Map. Lưu ý rằng nếu bạn đặt rõ thuộc tính streetView của bản đồ thành một StreetViewPanorama công trình của riêng bạn, bạn sẽ ghi đè ảnh toàn cảnh mặc định.

Ví dụ sau đây cho thấy các điểm đánh dấu biểu thị các vị trí khác nhau xung quanh Astor Place, Thành phố New York. Chuyển màn hình sang Chế độ xem phố để hiển thị điểm đánh dấu dùng chung đang hiển thị trong 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

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

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

Lưu ý: JavaScript được biên dịch từ đoạn mã TypeScript.

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

Xem ví dụ

Thử dùng mẫu

JSFiddle.net Google Cloud Shell

Sự kiện Chế độ xem phố

Khi điều hướng giữa Chế độ xem phố hoặc thao tác trên bạn nên theo dõi một số sự kiện cho biết các thay đổi đối với trạng thái của StreetViewPanorama:

• pano_changed kích hoạt bất cứ khi nào ảnh toàn cảnh riêng lẻ Thay đổi mã nhận dạng. Sự kiện này không đảm bảo rằng mọi dữ liệu được liên kết trong ảnh toàn cảnh (chẳng hạn như các đường liên kết) cũng đã thay đổi vào thời điểm sự kiện này diễn ra được kích hoạt; sự kiện này chỉ cho biết rằng ảnh toàn cảnh Mã nhận dạng đã thay đổi. Xin lưu ý rằng mã ảnh toàn cảnh (bạn có thể dùng mã này để tham chiếu) ảnh toàn cảnh này) chỉ ổn định trong phiên trình duyệt hiện tại.
• position_changed sẽ kích hoạt bất cứ khi nào cơ bản (LatLng) vị trí của ảnh toàn cảnh sẽ thay đổi. Xoay ảnh toàn cảnh sẽ không kích hoạt sự kiện này. Lưu ý rằng bạn có thể thay đổi vị trí cơ bản của ảnh toàn cảnh mà không cần thay đổi mã ảnh toàn cảnh vì API sẽ tự động liên kết biến thể gần nhất ID ảnh toàn cảnh vào vị trí của ảnh toàn cảnh.
• pov_changed sẽ kích hoạt bất cứ khi nào chế độ xem đường phố StreetViewPov thay đổi. Lưu ý rằng sự kiện này có thể kích hoạt trong khi vị trí và mã ảnh toàn cảnh vẫn ổn định.
• links_changed sẽ kích hoạt bất cứ khi nào chế độ xem đường phố liên kết thay đổi. Lưu ý rằng sự kiện này có thể kích hoạt không đồng bộ sau thay đổi trong mã ảnh toàn cảnh được biểu thị thông qua pano_changed.
• visible_changed sẽ kích hoạt bất cứ khi nào chế độ xem đường phố các thay đổi về chế độ hiển thị. Lưu ý rằng sự kiện này có thể kích hoạt không đồng bộ sau thay đổi trong mã ảnh toàn cảnh được biểu thị thông qua pano_changed.

Mã sau đây minh hoạ cách xử lý các sự kiện này để thu thập dữ liệu về StreetViewPanorama cơ bản:

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

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

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

Lưu ý: JavaScript được biên dịch từ đoạn mã TypeScript.

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

Xem ví dụ

Thử dùng mẫu

JSFiddle.net Google Cloud Shell

Các nút điều khiển trong Chế độ xem đường phố

Khi hiển thị StreetViewPanorama, nhiều loại mã theo mặc định, các nút điều khiển sẽ xuất hiện trên ảnh toàn cảnh. Bạn có thể bật hoặc tắt bằng cách đặt các trường thích hợp trong StreetViewPanoramaOptions đến true hoặc false:

• panControl cung cấp cách xoay ảnh toàn cảnh. Theo mặc định, chế độ điều khiển này xuất hiện dưới dạng một la bàn tích hợp tiêu chuẩn và điều khiển xoay. Bạn có thể thay đổi vị trí của điều khiển bằng cách cung cấp PanControlOptions ở Trường panControlOptions.
• zoomControl cung cấp cách thu phóng trong hình ảnh. Chiến dịch này theo mặc định sẽ xuất hiện ở gần phía dưới cùng bên phải của ảnh toàn cảnh. Bạn có thể thay đổi giao diện của điều khiển bằng cách cung cấp ZoomControlOptions ở Trường zoomControlOptions.
• addressControl cung cấp lớp phủ văn bản cho biết địa chỉ của vị trí được liên kết và cung cấp một đường liên kết để mở vị trí trong Google Maps. Bạn có thể thay đổi giao diện của điều khiển bằng cách cung cấp StreetViewAddressControlOptions ở Trường addressControlOptions.
• fullscreenControl cho phép mở Chế độ xem đường phố ở chế độ toàn màn hình. Bạn có thể thay đổi giao diện của điều khiển bằng cách cung cấp FullscreenControlOptions ở Trường fullscreenControlOptions.
• motionTrackingControl cung cấp tuỳ chọn bật hoặc tắt chế độ theo dõi chuyển động trên thiết bị di động. Chế độ điều khiển này chỉ xuất hiện trên những thiết bị hỗ trợ sự kiện liên quan đến hướng thiết bị. Theo mặc định, chế độ kiểm soát xuất hiện ở gần phía dưới cùng bên phải của ảnh toàn cảnh. Bạn có thể thay đổi chế độ điều khiển vị trí bằng cách cung cấp MotionTrackingControlOptions. Để biết thêm thông tin, hãy xem phần chuyển động theo dõi.
• linksControl cung cấp các mũi tên chỉ dẫn trên hình ảnh để di chuyển đến ảnh toàn cảnh liền kề.
• Nút Đóng cho phép người dùng đóng trình xem Chế độ xem đường phố. Bạn có thể bật hoặc tắt chế độ Đóng kiểm soát bằng cài đặt enableCloseButton thành true hoặc false.

Ví dụ sau đây thay đổi các chế độ điều khiển hiển thị trong thuộc tính Chế độ xem đường phố và xoá các đường liên kết của chế độ xem này:

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

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

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

Lưu ý: JavaScript được biên dịch từ đoạn mã TypeScript.

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

Xem ví dụ

Dùng thử mẫu

JSFiddle.net Google Cloud Shell

Truy cập trực tiếp vào dữ liệu của Chế độ xem đường phố

Bạn nên dùng phương pháp lập trình để xác định tình trạng sẵn có của dữ liệu Chế độ xem phố hoặc trả về thông tin về ảnh toàn cảnh cụ thể, mà không cần thao tác trực tiếp với bản đồ/ảnh toàn cảnh. Bạn có thể làm như vậy bằng cách sử dụng đối tượng StreetViewService, đối tượng này cung cấp giao diện với dữ liệu được lưu trữ trong dịch vụ Chế độ xem đường phố của Google.

Yêu cầu dịch vụ Chế độ xem đường phố

Truy cập dịch vụ Chế độ xem phố không đồng bộ, do API Google Maps cần thực hiện lệnh gọi đến máy chủ bên ngoài. Vì lý do đó, bạn cần chuyển phương thức callback thực thi sau khi hoàn tất yêu cầu. Chiến dịch này phương thức gọi lại sẽ xử lý kết quả.

Bạn có thể bắt đầu yêu cầu cho StreetViewService bằng cách sử dụng StreetViewPanoRequest hoặc StreetViewLocationRequest.

Yêu cầu sử dụng StreetViewPanoRequest sẽ trả về ảnh toàn cảnh dữ liệu được cung cấp ID tham chiếu xác định duy nhất ảnh toàn cảnh. Lưu ý rằng các mã tham chiếu này chỉ ổn định trong suốt thời gian hoạt động của hình ảnh ảnh toàn cảnh.

Một yêu cầu sử dụng StreetViewLocationRequest lượt tìm kiếm cho dữ liệu ảnh toàn cảnh tại một vị trí cụ thể, bằng cách sử dụng các tham số sau:

• location chỉ định vị trí (vĩ độ và kinh độ) để tìm kiếm ảnh toàn cảnh.
• preference đặt tùy chọn mà ảnh toàn cảnh sẽ được tìm thấy trong bán kính: vị trí gần vị trí được cung cấp nhất hoặc vị trí tốt nhất trong bán kính.
• radius đặt bán kính, được chỉ định theo mét, để tìm kiếm ảnh toàn cảnh, ở giữa vĩ độ và kinh độ cho sẵn. Giá trị mặc định là 50 khi không được cung cấp.
• source chỉ định nguồn của ảnh toàn cảnh để tìm kiếm. Các giá trị hợp lệ là:
  • default sử dụng các nguồn mặc định cho Chế độ xem đường phố; lượt tìm kiếm không bị giới hạn ở những nguồn cụ thể.
  • outdoor giới hạn việc tìm kiếm ở các bộ sưu tập ngoài trời. Lưu ý rằng ảnh toàn cảnh ngoài trời có thể không tồn tại cho vị trí được chỉ định.

Phản hồi của dịch vụ Chế độ xem đường phố

Hàm getPanorama() cần một hàm callback để thực thi sau khi truy xuất kết quả thông qua dịch vụ Chế độ xem đường phố. Hàm callback này trả về một tập hợp dữ liệu toàn cảnh trong đối tượng StreetViewPanoramaData và một Mã StreetViewStatus biểu thị trạng thái của yêu cầu trong đơn đặt hàng đó.

Thông số kỹ thuật của đối tượng StreetViewPanoramaData chứa siêu dữ liệu về ảnh toàn cảnh trong Chế độ xem đường phố của biểu mẫu sau:

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

Lưu ý rằng đối tượng dữ liệu này không phải là StreetViewPanorama chính đối tượng. Để tạo đối tượng Chế độ xem đường phố bằng dữ liệu này, bạn sẽ cần tạo một StreetViewPanorama và gọi setPano(), truyền vào đó mã nhận dạng như đã ghi chú trong giá trị được trả về Trường location.pano.

Mã status có thể trả về một trong các giá trị sau:

• OK cho biết dịch vụ tìm thấy kết quả trùng khớp ảnh toàn cảnh.
• ZERO_RESULTS cho biết dịch vụ không thể tìm thấy ảnh toàn cảnh phù hợp với các tiêu chí đã vượt qua.
• UNKNOWN_ERROR cho biết rằng một yêu cầu Chế độ xem đường phố không thể xử lý mặc dù lý do chính xác chưa được biết.

Đoạn mã sau đây sẽ tạo một StreetViewService phản hồi những lần người dùng nhấp vào một bản đồ bằng cách tạo ra các điểm đánh dấu khi được nhấp vào, hiển thị StreetViewPanorama của trang đó vị trí. Mã này sử dụng nội dung của StreetViewPanoramaData bị trả về từ dịch vụ.

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

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

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

Lưu ý: JavaScript được biên dịch từ đoạn mã TypeScript.

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

Xem ví dụ

Dùng thử mẫu

JSFiddle.net Google Cloud Shell

Cung cấp ảnh toàn cảnh tuỳ chỉnh trong Chế độ xem đường phố

API JavaScript của Maps hỗ trợ hiển thị ảnh toàn cảnh tuỳ chỉnh trong đối tượng StreetViewPanorama. Dùng chế độ tuỳ chỉnh ảnh toàn cảnh, bạn có thể hiển thị nội thất của toà nhà, cảnh quan từ địa điểm tuyệt đẹp hoặc bất cứ thứ gì từ trí tưởng tượng của bạn. Bạn thậm chí có thể liên kết các ảnh toàn cảnh tùy chỉnh này với Chế độ xem phố hiện có của Google ảnh toàn cảnh.

Thiết lập một tập hợp hình ảnh toàn cảnh tùy chỉnh bao gồm các bước sau:

• Tạo ảnh toàn cảnh nền cho mỗi ảnh toàn cảnh tuỳ chỉnh. Chiến dịch này nên hình ảnh gốc nên là hình ảnh có độ phân giải cao nhất bạn muốn phân phát hình ảnh được phóng to.
• (Không bắt buộc, nhưng nên dùng) Tạo một bộ ô toàn cảnh ở các mức thu phóng khác nhau so với hình ảnh cơ bản.
• Tạo liên kết giữa các ảnh toàn cảnh tuỳ chỉnh.
• (Không bắt buộc) Chỉ định "mục" ảnh toàn cảnh trong Hình ảnh hiện có của Google trong Chế độ xem đường phố và các đường liên kết tuỳ chỉnh đến/từ tập hợp tuỳ chỉnh sang tập hợp chuẩn.
• Xác định siêu dữ liệu cho từng ảnh toàn cảnh trong đối tượng StreetViewPanoramaData.
• Triển khai một phương thức xác định ảnh toàn cảnh tuỳ chỉnh dữ liệu và hình ảnh rồi chỉ định phương thức đó làm trình xử lý tuỳ chỉnh trong đối tượng StreetViewPanorama.

Các phần sau đây sẽ giải thích quy trình này.

Tạo ảnh toàn cảnh tùy chỉnh

Mỗi ảnh toàn cảnh trong Chế độ xem đường phố là một hình ảnh hoặc một tập hợp hình ảnh cung cấp chế độ xem 360 độ đầy đủ từ một vị trí duy nhất. Đối tượng StreetViewPanorama sử dụng hình ảnh phù hợp với hình cầu toàn cảnh (Bảng Phép chiếu Carree). Phép chiếu như vậy chứa 360 độ của chế độ xem ngang (bao quanh toàn bộ) và 180 độ chế độ xem dọc (từ thẳng lên thành thẳng xuống). Các trường này kết quả chế độ xem sẽ cho ra hình ảnh có tỷ lệ khung hình là 2:1. Đáp ảnh toàn cảnh bao quanh được hiển thị bên dưới.

Ảnh toàn cảnh thường được chụp bằng cách chụp nhiều ảnh ảnh từ một vị trí và ghép chúng lại với nhau bằng phần mềm ảnh toàn cảnh. (Xem trang So sánh các ứng dụng ghép ảnh để biết thêm thông tin.) Những hình ảnh như vậy phải có chung một "máy ảnh" quỹ tích để chụp từng ảnh toàn cảnh. Chiến lược phát hành đĩa đơn kết quả ảnh toàn cảnh 360 độ sau đó có thể xác định một phép chiếu một hình cầu với hình ảnh được bao bọc vào bề mặt hai chiều hình cầu.

Xem ảnh toàn cảnh là một phép chiếu trên một hình cầu có một đường thẳng hệ toạ độ này thuận lợi khi chia hình ảnh thành ô thẳng và phân phát hình ảnh dựa trên ô đã tính toán toạ độ.

Tạo các ô toàn cảnh tùy chỉnh

Chế độ xem đường phố cũng hỗ trợ các mức độ chi tiết hình ảnh khác nhau thông qua sử dụng bộ điều khiển thu phóng, cho phép bạn phóng to và thu nhỏ từ chế độ xem mặc định. Nhìn chung, Chế độ xem đường phố cung cấp năm mức độ phân giải thu phóng cho bất kỳ hình ảnh toàn cảnh nào. Nếu bạn đã dựa vào một ảnh toàn cảnh duy nhất để có được tất cả mức thu phóng, chẳng hạn như một hình ảnh hoặc là sẽ khá lớn và làm chậm đáng kể ứng dụng của bạn hoặc có độ phân giải kém như vậy ở mức thu phóng cao hơn mà bạn sẽ phân phát hình ảnh có pixel kém. Tuy nhiên, thật may là chúng ta có thể sử dụng mẫu thiết kế tương tự được dùng để phân phát Các ô bản đồ của Google ở các mức thu phóng khác nhau để cung cấp hình ảnh có độ phân giải thích hợp cho ảnh toàn cảnh ở mỗi mức thu phóng.

Theo mặc định, khi StreetViewPanorama tải lần đầu tiên nó hiển thị hình ảnh bao gồm 25% (90 độ vòng cung) của chiều ngang của ảnh toàn cảnh ở mức thu phóng 1. Chế độ xem này tương ứng với trường nhìn thông thường của con người. Đang thu phóng "out" về cơ bản, chế độ xem mặc định này cung cấp một vòng cung rộng hơn, trong khi phóng to sẽ thu hẹp trường xem thành một vòng cung nhỏ hơn. Chiến lược phát hành đĩa đơn StreetViewPanorama tự động tính toán trường nhìn thích hợp cho mức thu phóng đã chọn, sau đó chọn hình ảnh thích hợp nhất cho độ phân giải đó bằng cách chọn một tập hợp ô gần khớp với kích thước của hình chữ nhật nằm ngang trường nhìn. Các trường chế độ xem sau đây liên kết với Chế độ xem đường phố mức thu phóng:

Mức thu phóng của Chế độ xem phố	Trường nhìn (độ)
0	180
1 (mặc định)	90
2	45
3	22,5
4	11,25

Xin lưu ý rằng kích thước của hình ảnh hiển thị trong Chế độ xem phố là hoàn toàn phụ thuộc vào kích thước màn hình (chiều rộng) của Chế độ xem đường phố vùng chứa. Nếu bạn cung cấp vùng chứa rộng hơn thì dịch vụ vẫn sẽ cung cấp cùng một trường nhìn cho bất kỳ mức thu phóng, mặc dù chế độ này có thể chọn các ô thích hợp hơn cho giải pháp đó.

Bởi vì mỗi ảnh toàn cảnh bao gồm một phép chiếu hình cầu toàn cảnh, việc tạo ô toàn cảnh tương đối dễ dàng. Dưới dạng phép chiếu cung cấp hình ảnh có tỷ lệ khung hình là 2:1, ô với tỷ lệ 2:1 dễ sử dụng hơn, mặc dù ô vuông có thể mang lại hiệu suất tốt hơn trên bản đồ hình vuông (vì trường nhìn sẽ là hình vuông).

Đối với ô 2:1, một hình ảnh bao quanh toàn bộ thể hiện toàn bộ ảnh toàn cảnh "thế giới" (hình ảnh gốc) khi thu phóng mức 0, với mỗi mức thu phóng tăng dần 4 ô^zoomLevel. (Ví dụ: tại thu phóng mức 2, toàn bộ ảnh toàn cảnh bao gồm 16 ô.) Lưu ý: mức thu phóng trong Chế độ xem đường phố xếp kề không khớp trực tiếp với mức thu phóng như được cung cấp sử dụng kiểm soát Chế độ xem đường phố; thay vào đó, chế độ điều khiển thu phóng của Chế độ xem đường phố Chọn Trường nhìn (FoV), từ đó thích hợp đã chọn ô.

Thông thường, bạn nên đặt tên cho ô hình ảnh để chúng có thể được chọn theo phương thức lập trình. Cách đặt tên như vậy được thảo luận bên dưới trong Xử lý báo cáo tuỳ chỉnh Yêu cầu ảnh toàn cảnh.

Xử lý yêu cầu ảnh toàn cảnh tùy chỉnh

Để sử dụng ảnh toàn cảnh tùy chỉnh, hãy gọi StreetViewPanorama.registerPanoProvider(), chỉ định tên về phương thức của nhà cung cấp ảnh toàn cảnh tuỳ chỉnh. Nhà cung cấp ảnh toàn cảnh phải trả về đối tượng StreetViewPanoramaData và có sau đây:

Function(pano):StreetViewPanoramaData

StreetViewPanoramaData là một đối tượng của biểu mẫu:

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

Hiển thị ảnh toàn cảnh tuỳ chỉnh như sau:

• Thiết lập StreetViewPanoramaOptions.pano thành một giá trị tùy chỉnh.
• Gọi điện StreetViewPanorama.registerPanoProvider() để cung cấp hàm nhà cung cấp ảnh toàn cảnh tuỳ chỉnh.
• Triển khai hàm nhà cung cấp ảnh toàn cảnh tuỳ chỉnh để xử lý giá trị pano được chỉ định.
• Tạo một StreetViewPanoramaData .
• Thiết lập StreetViewTileData.getTileUrl vào tên của hàm nhà cung cấp thẻ thông tin tuỳ chỉnh mà bạn cung cấp. Để ví dụ: getCustomPanoramaTileUrl.
• Triển khai hàm trình cung cấp thẻ thông tin tuỳ chỉnh, như minh hoạ trong mẫu bên dưới.
• Trả về đối tượng StreetViewPanoramaData.

Lưu ý: Không trực tiếp đặt position trên StreetViewPanorama khi bạn muốn hiển thị ảnh toàn cảnh tuỳ chỉnh, như một vị trí như vậy sẽ chỉ dẫn Đường phố Xem dịch vụ để yêu cầu đóng hình ảnh mặc định trong Chế độ xem đường phố đến vị trí đó. Thay vào đó, hãy đặt vị trí này trong của đối tượng StreetViewPanoramaData tuỳ chỉnh Trường location.latLng.

Ví dụ sau đây hiển thị một ảnh toàn cảnh tuỳ chỉnh về Google Sydney văn phòng. Xin lưu ý rằng ví dụ này không sử dụng bản đồ hoặc Chế độ xem đường phố mặc định hình ảnh:

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

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

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

Lưu ý: JavaScript được biên dịch từ đoạn mã TypeScript.

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

Xem ví dụ

Dùng thử mẫu

JSFiddle.net Google Cloud Shell

Trình cung cấp ảnh toàn cảnh tuỳ chỉnh sẽ trả về thẻ thông tin thích hợp đã cho mã nhận dạng ảnh toàn cảnh, mức thu phóng và toạ độ ô ảnh toàn cảnh đã được truyền. Vì việc lựa chọn hình ảnh phụ thuộc vào các giá trị được truyền này nên sẽ rất hữu ích để đặt tên cho những hình ảnh có thể được chọn theo phương thức lập trình. giá trị đã chuyển, chẳng hạn như pano_zoom_tileX_tileY.png.

Ví dụ sau đây sẽ thêm một mũi tên khác vào hình ảnh, ngoài mũi tên điều hướng mặc định của Chế độ xem đường phố, trỏ đến Google Sydney và liên kết sang hình ảnh tuỳ chỉnh:

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

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

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

Lưu ý: JavaScript được biên dịch từ đoạn mã TypeScript.

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

Xem ví dụ

Thử dùng mẫu

JSFiddle.net Google Cloud Shell