Chế độ xem phố

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

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

Video này cho thấy cách bạn có thể sử dụng dịch vụ Chế độ xem đường phố để mang đến 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 hữu ích về điểm đến hoặc bất kỳ địa điểm nào họ quan tâm.

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

Lớp StreetViewPanorama sẽ lập mô hình ảnh toàn cảnh của Chế độ xem đường phố trong ứng dụng của bạn. 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ạ việc sử dụng Chế độ xem đường phố.

Mẫu Java:

Mẫu Kotlin:

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

SDK Maps dành cho Android cung cấp dịch vụ Chế độ xem đường phố để thu thập và sử dụng hình ảnh dùng trong Chế độ xem đường phố của Google. Hình ảnh được trả về dưới dạng ảnh toàn cả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 toàn bộ 360 độ từ một vị trí duy nhất. Các hình ảnh tuân theo phép chiếu hình cầu toàn cảnh (Plate Carrée) có góc nhìn ngang 360 độ (bao quanh toàn bộ) và 180 độ góc nhìn dọc (từ thẳng lên đến thẳng xuống). Ảnh toàn cảnh 360 độ thu được sẽ xác định phép chiếu trên một hình cầu với hình ảnh được bao bọc theo bề mặt hai chiều của hình cầu đó.

StreetViewPanorama cung cấp trình 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ể điều khiển StreetViewPanoramaCamera để điều khiển mức thu phóng cũng như hướng (nghiêng và góc xoay) của máy ảnh.

Bắt đầu

Thiết lập dự án

Làm theo hướng dẫn bắt đầu sử dụng để thiết lập dự án SDK Maps dành cho Android.

Kiểm tra tính sẵn có của ảnh toàn cảnh Chế độ xem đường phố trước khi thêm ảnh toàn cảnh

Thư viện ứng dụng SDK Dịch vụ Google Play bao gồm một số mẫu Chế độ xem đường phố mà bạn có thể nhập vào dự án của mình và dùng làm cơ sở cho việc 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.

SDK Maps cho Thư viện tiện ích Android là thư viện nguồn mở gồm các lớp hữu ích cho nhiều ứng dụng. Tiện ích siêu dữ liệu của Chế độ xem đường phố có trong kho lưu trữ GitHub là tiện ích siêu dữ liệu của Chế độ xem đường phố. Tiện ích này kiểm tra xem một vị trí có được Chế độ xem đường phố hỗ trợ hay không. Bạn có thể tránh lỗi khi thêm ảnh toàn cảnh của Chế độ xem đường phố vào ứng dụng Android bằng cách gọi tiện ích siêu dữ liệu này và chỉ thêm ảnh toàn cảnh của Chế độ xem đường phố nếu nội dung phản hồi là OK.

Sử dụng API

Hãy làm theo hướng dẫn bên dưới để thêm ảnh toàn cảnh Chế độ xem đường phố vào mảnh Android. Đó là cách đơn giản nhất để thêm Chế độ xem đường 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 ảnh toàn cảnh.

Thêm ảnh toàn cảnh trong Chế độ xem đường phố

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

Bản minh hoạ ảnh toàn cảnh của Chế độ xem đường phố

Tóm tắt:

  1. Thêm một đối tượng Mảnh vào Hoạt động sẽ xử lý ảnh toàn cảnh của Chế độ xem đường phố. Cách dễ nhất để làm 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. Hãy 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 phần tử <fragment> vào tệp bố cục của hoạt động để xác định đối tượng 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 đường phố

Để xử lý ảnh toàn cảnh của Chế độ xem đường phố trong ứng dụng, bạn cần triển khai giao diện OnStreetViewPanoramaReadyCallback và đặt một thực thể 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 đường phố vào ứng dụng của bạn. 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 onCreate() của Activity, hãy đặt tệp bố cục làm khung 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ã này:

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ã nhận dạng tài nguyên R.id.streetviewpanorama sẽ tự động được thêm vào dự án Android khi bạn tạo tệp bố cục.

Sau đó, sử dụng getStreetViewPanoramaAsync() để đặt lệnh gọi lại trên phâ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)

Sử dụng phương thức gọi lại onStreetViewPanoramaReady(StreetViewPanorama) để truy xuất một thực thể khác rỗng của StreetViewPanorama, 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 Chế độ xem đường phố thông 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 một đố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ề Chế độ xem toàn cảnh đường phố

StreetViewPanoramaFragment là một lớp con của lớp Android Fragment (Mảnh Android) và cho phép bạn đặt ảnh toàn cảnh về Chế độ xem đường 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 trong Chế độ xem phố

StreetViewPanoramaView, một lớp con của lớp View trên Android, cho phép bạn đặt ảnh toàn cảnh Chế độ xem đường phố trong Android View. View đại diện cho một vùng hình chữ nhật của màn hình, là thành phần cơ bản cho các ứng dụng và tiện ích Android. Giống như StreetViewPanoramaFragment, StreetViewPanoramaView hoạt động như một vùng chứa cho ảnh toàn cảnh, cho thấy chức năng cốt lõi thông qua đối tượng StreetViewPanorama. Người dùng của 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() và onPause()) sang 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 ảnh toàn cảnh Chế độ xem đường phố: kéo (hình ảnh), thu phóng và di chuyển đến ả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. Các thay đổi có lập trình vẫn có thể thực hiện khi cử chỉ bị tắt.

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

Để đặt vị trí của ảnh toàn cảnh Chế độ xem đường phố, hãy gọi StreetViewPanorama.setPosition(), truyền một LatLng. Bạn cũng có thể truyền radius và source dưới dạng tham số không bắt buộc.

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 đường 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à ảnh toàn cảnh phải được liên kết chính xác với LatLng đã 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 phù hợp, thì API sẽ trả về kết quả phù hợp nhất.

Nguồn sẽ hữu ích nếu bạn muốn hạn chế Chế độ xem đường phố chỉ tìm ảnh toàn cảnh ngoài trời. Theo mặc định, ảnh toàn cảnh về Chế độ xem đường phố có thể xuất hiện bên trong những địa điểm như bảo tàng, toà nhà công cộng, quán cà phê và doanh nghiệp. Xin 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.

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 ảnh 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ã nhận dạng 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 chứa mã của ảnh toàn cảnh được kết nối với đối tượng 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ể lập trình để thay đổi mức thu phóng bằng cách đặt StreetViewPanoramaCamera.zoom. Việc đặt mức thu phóng thành 1.0 sẽ phóng to 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 theo độ nghiêng và góc phương vị của máy ảnh hiện tại, đồng thời tăng mức thu phóng thêm 50%.

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 đường phố bằng cách đặt góc nhìn và độ nghiêng là StreetViewPanoramaCamera.

đang mang
Hướng mà máy ảnh trỏ, được xác định (tính bằng độ theo chiều kim đồng hồ) so với hướng chính bắc, xung quanh quỹ tích máy ảnh. Đúng là 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. Phạm vi là -90 thông qua 0 đến 90, trong đó -90 nhìn thẳng xuống, 0 là căn giữa theo đường chân trời và 90 nhìn thẳng lên. Phương sai được đo từ cao độ mặc định ban đầu của máy ảnh, cao độ mặc định thường (nhưng không phải lúc nào cũng) theo chiều ngang. Ví dụ: một hình ảnh chụp trên một ngọn đồi có thể sẽ có độ cao mặc định không theo chiều ngang.

Đoạn mã sau 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 tại, đồng thời thay đổi góc nhìn 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 ảnh động cho chuyển động của máy ảnh

Để tạo ảnh động cho chuyển động của máy ảnh, hãy gọi StreetViewPanorama.animateTo(). Ảnh động sẽ 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ới của máy ảnh. Nếu muốn chuyển thẳng đến máy ảnh mà không có ả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 cho ảnh động ở trên chạy mỗi 2000 mili giây, bằng cách sử dụng Handler.postDelayed():

Bản minh hoạ ảnh động toàn cảnh của Chế độ xem đường phố