Chế độ xem phố

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Chọn nền tảng: Android iOS JavaScript

Chế độ xem phố của Google cung cấp chế độ xem toàn cảnh 360 độ từ những con đường được chỉ định trong suốt khu vực bao phủ.

Video này hướng dẫn bạn cách sử dụng dịch vụ Chế độ xem phố để cung cấp cho người dùng trải nghiệm thực tế về một địa chỉ trên bản đồ, cung cấp cho họ bối cảnh có ý nghĩa về điểm đến hoặc bất kỳ địa điểm nào mà họ quan tâm.

Mức độ phù hợp được cung cấp thông qua API Google Maps Android phiên bản 2 cũng giống như mức độ phù hợp đối với ứng dụng Google Maps trên thiết bị Android. Bạn có thể đọc thêm về Chế độ xem phố và xem các khu vực được hỗ trợ trên bản đồ tương tác, tại bài viết Giới thiệu về Chế độ xem phố.

Lớp StreetViewPanorama mô hình hoá ảnh toàn cảnh của Chế độ xem phố trong ứng dụng. Trong giao diện người dùng, ảnh toàn cảnh được biểu thị bằng một đối tượng StreetViewPanoramaFragment hoặc StreetViewPanoramaView.

Mã mẫu

Kho lưu trữ ApiDemos trên GitHub bao gồm các mẫu minh hoạ cách sử dụng Chế độ xem phố.

Mẫu Java:

Mẫu Kotlin:

Tổng quan về Chế độ xem phố trong SDK Maps dành cho Android

SDK Maps dành cho Android cung cấp dịch vụ Chế độ xem phố để lấy và thao tác với hình ảnh được sử dụng trong Chế độ xem phố của Google. Hình ảnh được trả về dưới dạng toàn cảnh.

Mỗi ảnh toàn cảnh ở Chế độ xem phố là một hình ảnh hoặc một nhóm hình ảnh cung cấp chế độ xem 360 độ đầy đủ từ một vị trí. Hình ảnh tuân theo hình chiếu hình cầu toàn cảnh (Plate Carrée), trong đó có góc nhìn ngang 360 độ (bao quanh toàn bộ) và 180 độ theo chiều dọc (từ thẳng lên đến thẳng xuống). Ảnh toàn cảnh 360 độ xác định một phép chiếu trên một hình cầu với hình ảnh được bao bọc ở bề mặt hai chiều của hình cầu đó.

StreetViewPanorama cung cấp cho người xem kết xuất ảnh toàn cảnh dưới dạng hình cầu có máy ảnh ở giữa. Bạn có thể thao tác StreetViewPanoramaCamera để điều khiển tính năng thu phóng và hướng (độ nghiêng và góc) của máy ảnh.

Bắt đầu

Làm theo hướng dẫn bắt đầu sử dụng để thiết lập SDK Maps dành cho dự án Android. Sau đó, thêm toàn cảnh Chế độ xem phố như mô tả dưới đây.

Thư viện ứng dụng SDK Dịch vụ Google Play bao gồm một vài mẫu Chế độ xem phố mà bạn có thể nhập vào dự án và sử dụng làm cơ sở để phát triển. Hãy xem phần giới thiệu để biết các nguyên tắc nhập mẫu.

Sử dụng API

Làm theo hướng dẫn bên dưới để thêm ảnh toàn cảnh ở Chế độ xem phố vào một mảnh Android. Đó là cách đơn giản nhất để thêm Chế độ xem phố vào ứng dụng của bạn. Sau đó, hãy đọc thêm về các mảnh, thành phần hiển thị và tuỳ chỉnh toàn cảnh.

Thêm ảnh toàn cảnh ở Chế độ xem phố

Hãy làm theo các bước bên dưới để thêm ảnh toàn cảnh trong Chế độ xem phố như ảnh này:

Bản demo toàn cảnh Chế độ xem phố

Tóm tắt:

  1. Thêm đối tượng Fragment vào Activity, hoạt động này sẽ xử lý ảnh toàn cảnh của Chế độ xem phố. Cách dễ nhất để thực hiện việc này là thêm phần tử <fragment> vào tệp bố cục cho Activity.
  2. Triển khai giao diện OnStreetViewPanoramaReadyCallback và sử dụng phương thức gọi lại onStreetViewPanoramaReady(StreetViewPanorama) để xử lý đối tượng StreetViewPanorama.
  3. Gọi getStreetViewPanoramaAsync() trên mảnh để đăng ký lệnh gọi lại.

Dưới đây là thông tin chi tiết hơn về từng bước.

Thêm mảnh

Thêm một phần tử <fragment> vào tệp bố cục của hoạt động để xác định đối tượng Fragment (Mảnh). Trong phần tử này, hãy đặt thuộc tính class thành com.google.android.gms.maps.StreetViewPanoramaFragment (hoặc SupportStreetViewPanoramaFragment).

Dưới đây là ví dụ về một mảnh trong tệp bố cục:

<fragment
    android:name="com.google.android.gms.maps.StreetViewPanoramaFragment"
    android:id="@+id/streetviewpanorama"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

Thêm mã Chế độ xem phố

Để làm việc với ảnh toàn cảnh của Chế độ xem phố trong ứng dụng, bạn cần triển khai giao diện OnStreetViewPanoramaReadyCallback và đặt một phiên bản của lệnh gọi lại trên đối tượng StreetViewPanoramaFragment hoặc StreetViewPanoramaView. Hướng dẫn này sử dụng StreetViewPanoramaFragment vì đó là cách đơn giản nhất để thêm Chế độ xem phố vào ứng dụng. Bước đầu tiên là triển khai giao diện gọi lại:

Java


class StreetViewActivity extends AppCompatActivity implements OnStreetViewPanoramaReadyCallback {
    // ...
}

      

Kotlin


class StreetViewActivity : AppCompatActivity(), OnStreetViewPanoramaReadyCallback {
    // ...
}

      

Trong phương thức Activitybiểu tượng onCreate(), hãy đặt tệp bố cục làm thành phần hiển thị nội dung. Ví dụ: nếu tệp bố cục có tên main.xml, hãy sử dụng mã sau:

Java


@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_street_view);
    SupportStreetViewPanoramaFragment streetViewPanoramaFragment =
        (SupportStreetViewPanoramaFragment) getSupportFragmentManager()
            .findFragmentById(R.id.street_view_panorama);
    streetViewPanoramaFragment.getStreetViewPanoramaAsync(this);
}

      

Kotlin


override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_street_view)
    val streetViewPanoramaFragment =
        supportFragmentManager
            .findFragmentById(R.id.street_view_panorama) as SupportStreetViewPanoramaFragment
    streetViewPanoramaFragment.getStreetViewPanoramaAsync(this)
}

      

Xử lý mảnh bằng cách gọi FragmentManager.findFragmentById(), truyền vào mã nhận dạng tài nguyên của phần tử <fragment>. Xin lưu ý rằng mã tài nguyên R.id.streetviewpanorama sẽ tự động được thêm vào dự án Android khi bạn xây dựng tệp bố cục.

Sau đó, hãy sử dụng getStreetViewPanoramaAsync() để đặt lệnh gọi lại trên mảnh.

Java


SupportStreetViewPanoramaFragment streetViewPanoramaFragment =
    (SupportStreetViewPanoramaFragment) getSupportFragmentManager()
        .findFragmentById(R.id.street_view_panorama);
streetViewPanoramaFragment.getStreetViewPanoramaAsync(this);

      

Kotlin


val streetViewPanoramaFragment =
    supportFragmentManager
        .findFragmentById(R.id.street_view_panorama) as SupportStreetViewPanoramaFragment
streetViewPanoramaFragment.getStreetViewPanoramaAsync(this)

      

Hãy sử dụng phương thức gọi lại onStreetViewPanoramaReady(StreetViewPanorama) để truy xuất một phiên bản không rỗng của StreetViewPanorama và sẵn sàng để sử dụng.

Java


@Override
public void onStreetViewPanoramaReady(StreetViewPanorama streetViewPanorama) {
    LatLng sanFrancisco = new LatLng(37.754130, -122.447129);
    streetViewPanorama.setPosition(sanFrancisco);
}

      

Kotlin


override fun onStreetViewPanoramaReady(streetViewPanorama: StreetViewPanorama) {
    val sanFrancisco = LatLng(37.754130, -122.447129)
    streetViewPanorama.setPosition(sanFrancisco)
}

      

Tìm hiểu thêm về cách định cấu hình trạng thái ban đầu

Không giống như bản đồ, bạn không thể định cấu hình trạng thái ban đầu của ảnh toàn cảnh trong Chế độ xem phố qua XML. Tuy nhiên, bạn có thể định cấu hình ảnh toàn cảnh theo phương thức lập trình bằng cách truyền vào đối tượng StreetViewPanoramaOptions chứa các tuỳ chọn đã chỉ định.

Java


LatLng sanFrancisco = new LatLng(37.754130, -122.447129);
StreetViewPanoramaView view = new StreetViewPanoramaView(this,
    new StreetViewPanoramaOptions().position(sanFrancisco));

      

Kotlin


val sanFrancisco = LatLng(37.754130, -122.447129)
val view = StreetViewPanoramaView(
    this,
    StreetViewPanoramaOptions().position(sanFrancisco)
)

      

Tìm hiểu thêm về StreetViewGlFragment

StreetViewPanoramaFragment là một lớp con của lớp Android Fragment và cho phép bạn đặt ảnh toàn cảnh trong Chế độ xem phố trong một mảnh Android. Các đối tượng StreetViewPanoramaFragment đóng vai trò là vùng chứa cho ảnh toàn cảnh và cung cấp quyền truy cập vào đối tượng StreetViewPanorama.

Chế độ xem toàn cảnh StreetView

StreetViewPanoramaView, một lớp con của lớp View Android, cho phép bạn đặt ảnh toàn cảnh ở Chế độ xem phố trong Android View. View đại diện cho một vùng hình chữ nhật trên màn hình và là một khối xây dựng cơ bản cho các ứng dụng và tiện ích Android. Giống như StreetViewPanoramaFragment, StreetViewPanoramaView đóng vai trò là vùng chứa cho ảnh toàn cảnh, hiển thị chức năng cốt lõi thông qua đối tượng StreetViewPanorama. Người dùng lớp này phải chuyển tiếp tất cả phương thức vòng đời hoạt động (chẳng hạn như onCreate(), onDestroy(), onResume()onPause()) đến các phương thức tương ứng trong lớp StreetViewPanoramaView).

Tuỳ chỉnh chức năng do người dùng kiểm soát

Theo mặc định, người dùng có thể sử dụng chức năng sau đây khi xem toàn cảnh Chế độ xem phố: kéo (hình ảnh), thu phóng và di chuyển đến các ảnh toàn cảnh liền kề. Bạn có thể bật và tắt các cử chỉ do người dùng kiểm soát thông qua các phương thức trên StreetViewPanorama. Bạn vẫn có thể thực hiện các thay đổi có lập trình khi cử chỉ đang tắt.

Đặt vị trí cho ảnh toàn cảnh

Để đặt vị trí cho ảnh toàn cảnh của Chế độ xem phố, hãy gọi StreetViewPanorama.setPosition() bằng cách truyền LatLng. Bạn cũng có thể truyền radiussource dưới dạng tham số tuỳ chọn.

Bán kính sẽ hữu ích nếu bạn muốn mở rộng hoặc thu hẹp khu vực mà Chế độ xem phố sẽ tìm kiếm ảnh toàn cảnh phù hợp. Bán kính bằng 0 có nghĩa là toàn cảnh này phải được liên kết với đúng LatLng được chỉ định. Bán kính mặc định là 50 mét. Nếu có nhiều ảnh toàn cảnh trong khu vực khớp, API sẽ trả về kết quả phù hợp nhất.

Một nguồn sẽ hữu ích nếu bạn muốn hạn chế Chế độ xem phố chỉ tìm các ảnh toàn cảnh ngoài trời. Theo mặc định, ảnh toàn cảnh của Chế độ xem phố có thể nằm bên trong các địa điểm như bảo tàng, tòa nhà công cộng, quán cà phê và doanh nghiệp. Lưu ý rằng các ảnh toàn cảnh ngoài trời có thể không tồn tại ở vị trí đã chỉ định.

Java


LatLng sanFrancisco = new LatLng(37.754130, -122.447129);

// Set position with LatLng only.
streetViewPanorama.setPosition(sanFrancisco);

// Set position with LatLng and radius.
streetViewPanorama.setPosition(sanFrancisco, 20);

// Set position with LatLng and source.
streetViewPanorama.setPosition(sanFrancisco, StreetViewSource.OUTDOOR);

// Set position with LaLng, radius and source.
streetViewPanorama.setPosition(sanFrancisco, 20, StreetViewSource.OUTDOOR);

      

Kotlin


val sanFrancisco = LatLng(37.754130, -122.447129)

// Set position with LatLng only.
streetViewPanorama.setPosition(sanFrancisco)

// Set position with LatLng and radius.
streetViewPanorama.setPosition(sanFrancisco, 20)

// Set position with LatLng and source.
streetViewPanorama.setPosition(sanFrancisco, StreetViewSource.OUTDOOR)

// Set position with LaLng, radius and source.
streetViewPanorama.setPosition(sanFrancisco, 20, StreetViewSource.OUTDOOR)

      

Ngoài ra, bạn có thể đặt vị trí dựa trên mã nhận dạng toàn cảnh bằng cách truyền panoId đến StreetViewPanorama.setPosition().

Để truy xuất mã ảnh toàn cảnh cho ảnh toàn cảnh liền kề, trước tiên, hãy sử dụng getLocation() để truy xuất StreetViewPanoramaLocation. Đối tượng này chứa mã của ảnh toàn cảnh hiện tại và một mảng các đối tượng StreetViewPanoramaLink, mỗi đối tượng này chứa mã của ảnh toàn cảnh được kết nối với ảnh toàn cảnh hiện tại.

Java


StreetViewPanoramaLocation location = streetViewPanorama.getLocation();
if (location != null && location.links != null) {
    streetViewPanorama.setPosition(location.links[0].panoId);
}

      

Kotlin


streetViewPanorama.location.links.firstOrNull()?.let { link: StreetViewPanoramaLink ->
    streetViewPanorama.setPosition(link.panoId)
}

      

Phóng to và thu nhỏ

Bạn có thể thay đổi mức thu phóng theo phương thức lập trình bằng cách đặt StreetViewPanoramaCamera.zoom. Đặt mức thu phóng là 1,0 sẽ phóng đại hình ảnh theo hệ số 2.

Đoạn mã sau sử dụng StreetViewPanoramaCamera.Builder() để tạo một máy ảnh mới có độ nghiêng và góc phương tiện của máy ảnh hiện có, đồng thời tăng mức thu phóng lên 50 phần trăm.

Java


float zoomBy = 0.5f;
StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.getPanoramaCamera().zoom + zoomBy)
    .tilt(streetViewPanorama.getPanoramaCamera().tilt)
    .bearing(streetViewPanorama.getPanoramaCamera().bearing)
    .build();

      

Kotlin


val zoomBy = 0.5f
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom + zoomBy)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing)
    .build()

      

Đặt hướng máy ảnh (góc nhìn)

Bạn có thể xác định hướng của máy ảnh Chế độ xem phố bằng cách đặt giá trị xoay và nghiêng StreetViewPanoramaCamera.

đang mang
Hướng mà máy ảnh quay, được chỉ định bằng độ theo chiều kim đồng hồ từ phía bắc thực tế, xung quanh quỹ đạo của máy ảnh. Đúng về phía bắc là 0, phía đông là 90, phía nam là 180, phía tây là 270.
nghiêng
Trục Y nghiêng lên hoặc xuống xuống. Phạm vi là từ -90 đến 0 đến 90, trong đó -90 nhìn thẳng xuống, 0 căn giữa đường chân trời và 90 nhìn thẳng lên trên. Chênh lệch được đo 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) ngang. Ví dụ: hình ảnh chụp trên đồi có thể có cao độ mặc định không nằm ngang.

Đoạn mã sau đây sử dụng StreetViewPanoramaCamera.Builder() để tạo một máy ảnh mới với mức thu phóng và độ nghiêng của máy ảnh hiện có, trong khi thay đổi góc 30 độ sang trái.

Java


float panBy = 30;
StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.getPanoramaCamera().zoom)
    .tilt(streetViewPanorama.getPanoramaCamera().tilt)
    .bearing(streetViewPanorama.getPanoramaCamera().bearing - panBy)
    .build();

      

Kotlin


val panBy = 30f
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing - panBy)
    .build()

      

Đoạn mã sau đây nghiêng máy ảnh lên trên 30 độ.

Java


float tilt = streetViewPanorama.getPanoramaCamera().tilt + 30;
tilt = (tilt > 90) ? 90 : tilt;

StreetViewPanoramaCamera previous = streetViewPanorama.getPanoramaCamera();

StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder(previous)
    .tilt(tilt)
    .build();

      

Kotlin


var tilt = streetViewPanorama.panoramaCamera.tilt + 30
tilt = if (tilt > 90) 90f else tilt
val previous = streetViewPanorama.panoramaCamera
val camera = StreetViewPanoramaCamera.Builder(previous)
    .tilt(tilt)
    .build()

      

Tạo hiệu ứng chuyển động của máy ảnh

Để tạo hiệu ứng chuyển động máy ảnh, hãy gọi StreetViewPanorama.animateTo(). Ảnh động nội suy giữa các thuộc tính máy ảnh hiện tại và các thuộc tính máy ảnh mới. Nếu muốn chuyển thẳng đến máy ảnh mà không ảnh động, bạn có thể đặt thời lượng thành 0.

Java


// Keeping the zoom and tilt. Animate bearing by 60 degrees in 1000 milliseconds.
long duration = 1000;
StreetViewPanoramaCamera camera =
    new StreetViewPanoramaCamera.Builder()
        .zoom(streetViewPanorama.getPanoramaCamera().zoom)
        .tilt(streetViewPanorama.getPanoramaCamera().tilt)
        .bearing(streetViewPanorama.getPanoramaCamera().bearing - 60)
        .build();
streetViewPanorama.animateTo(camera, duration);

      

Kotlin


// Keeping the zoom and tilt. Animate bearing by 60 degrees in 1000 milliseconds.
val duration: Long = 1000
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing - 60)
    .build()
streetViewPanorama.animateTo(camera, duration)

      

Hình ảnh sau đây cho thấy kết quả khi bạn lên lịch để chạy ảnh động ở trên sau mỗi 2000 mili giây, sử dụng Handler.postDelayed():

Bản trình diễn ảnh động toàn cảnh Chế độ xem phố