Chế độ xem đường phố của Google cung cấp chế độ xem toàn cảnh 360 độ từ các con đường được chỉ định trong suốt khu vực phủ sóng.
Video này hướng dẫn bạn cách 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 có ý nghĩa về điểm đến của họ hoặc bất kỳ địa điểm nào mà họ quan tâm.
Phạm vi áp dụng có sẵn thông qua API Google Maps dành cho Android phiên bản 2 cũng giống như phạm vi áp dụng 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
mô hình hoá ảnh toàn cảnh trong 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 Kotlin:
- StreetViewPanoramaBasicDemoActivity: Thông tin cơ bản về việc sử dụng Chế độ xem đường phố
- StreetViewPanoramaEventsDemoActivity: Nghe các sự kiện
- StreetViewPanoramaNavigationDemoActivity: Kiểm soát ảnh toàn cảnh trong Chế độ xem đường phố theo phương thức lập trình
- StreetViewPanoramaOptionsDemoActivity: Thay đổi các tuỳ chọn về cử chỉ và giao diện người dùng
- StreetViewPanoramaViewDemoActivity: Sử dụng
StreetViewPanoramaView
(thay vì một Mảnh) - SplitStreetViewPanoramaAndMapDemoActivity: Sử dụng một hoạt động hiển thị chế độ xem đường phố và bản đồ
Mẫu Java:
- StreetViewPanoramaBasicDemoActivity: Thông tin cơ bản về việc sử dụng Chế độ xem đường phố
- StreetViewPanoramaEventsDemoActivity: Nghe các sự kiện
- StreetViewPanoramaNavigationDemoActivity: Kiểm soát ảnh toàn cảnh trong Chế độ xem đường phố theo phương thức lập trình
- StreetViewPanoramaOptionsDemoActivity: Thay đổi các tuỳ chọn về cử chỉ và giao diện người dùng
- StreetViewPanoramaViewDemoActivity: Sử dụng
StreetViewPanoramaView
(thay vì một Mảnh) - SplitStreetViewPanoramaAndMapDemoActivity: Tạo một hoạt động hiển thị chế độ xem đường phố và bản đồ
Tổng quan về Chế độ xem đường phố trong SDK bản đồ dành cho Android
SDK bản đồ dành cho Android cung cấp dịch vụ Chế độ xem đường phố để lấy và chỉnh sửa hình ảnh dùng trong Chế độ xem đường phố của Google. Hình ảnh được trả về ở 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 nhóm hình ảnh, cung cấp chế độ xem toàn cảnh 360 độ từ một vị trí duy nhất. Hình ảnh tuân theo hình chiếu hình cầu toàn cảnh (Plate Carrasse), chứa 360 độ chế độ xem theo chiều ngang (bao quanh toàn bộ) và 180 độ chế độ xem dọc (từ thẳng lên đến thẳng xuống). Ảnh toàn cảnh 360 độ thu được 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 cho trình xem hiển thị ảnh toàn cảnh dưới dạng hình cầu với một máy ảnh ở giữa. Bạn có thể thao tác với StreetViewPanoramaCamera
để điều khiển mức thu phóng và hướng (nghiêng và góc nghiêng) 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 SDK Maps cho Android.
Kiểm tra phạm vi cung cấp ảnh toàn cảnh trong Chế độ xem đường phố trước khi thêm ảnh toàn cảnh
Thư viện ứng dụng SDK của 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. 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à một 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ũng có trong kho lưu trữ GitHub.
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 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 của Chế độ xem đường phố vào một 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 đó, đọc thêm về các mảnh, khung hiển thị và cách 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 trong Chế độ xem đường phố như ví dụ sau:
Tóm tắt:
- 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 để thực hiện việc này là thêm phần tử
<fragment>
vào tệp bố cục choActivity
. - Triển khai giao diện
OnStreetViewPanoramaReadyCallback
và sử dụng phương thức gọi lạionStreetViewPanoramaReady(StreetViewPanorama)
để xử lý đối tượngStreetViewPanorama
. - 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. 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
. Phần hướng dẫn này sẽ 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:
Kotlin
class StreetViewActivity : AppCompatActivity(), OnStreetViewPanoramaReadyCallback { // ... }
Java
class StreetViewActivity extends AppCompatActivity implements 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ã sau:
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) }
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); }
Tìm hiểu cách 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 đó, dùng getStreetViewPanoramaAsync()
để đặt lệnh gọi lại trên mảnh.
Kotlin
val streetViewPanoramaFragment = supportFragmentManager .findFragmentById(R.id.street_view_panorama) as SupportStreetViewPanoramaFragment streetViewPanoramaFragment.getStreetViewPanoramaAsync(this)
Java
SupportStreetViewPanoramaFragment streetViewPanoramaFragment = (SupportStreetViewPanoramaFragment) getSupportFragmentManager() .findFragmentById(R.id.street_view_panorama); 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.
Kotlin
override fun onStreetViewPanoramaReady(streetViewPanorama: StreetViewPanorama) { val sanFrancisco = LatLng(37.754130, -122.447129) streetViewPanorama.setPosition(sanFrancisco) }
Java
@Override public void onStreetViewPanoramaReady(StreetViewPanorama streetViewPanorama) { LatLng sanFrancisco = new 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 đối tượng StreetViewPanoramaOptions
chứa các tuỳ chọn mà bạn đã chỉ định.
- Nếu bạn đang dùng
StreetViewPanoramaFragment
, hãy dùng phương thức trạng thái ban đầu tĩnhStreetViewPanoramaFragment.newInstance(StreetViewPanoramaOptions options)
để tạo mảnh và truyền các tuỳ chọn được định cấu hình tuỳ chỉnh. - Nếu bạn đang sử dụng
StreetViewPanoramaView
, hãy dùng hàm khởi tạoStreetViewPanoramaView(Context, StreetViewPanoramaOptions)
và truyền các tuỳ chọn đã định cấu hình tuỳ chỉnh vào.
Kotlin
val sanFrancisco = LatLng(37.754130, -122.447129) val view = StreetViewPanoramaView( this, StreetViewPanoramaOptions().position(sanFrancisco) )
Java
LatLng sanFrancisco = new LatLng(37.754130, -122.447129); StreetViewPanoramaView view = new StreetViewPanoramaView(this, new StreetViewPanoramaOptions().position(sanFrancisco));
Thông tin thêm về StreetViewFullscreenFragment
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 của Chế độ xem đường phố trong một mảnh Android. Đố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
.
StreetViewPanoramaView
StreetViewPanoramaView
, một lớp con của lớp View
của Android, cho phép bạn đặt ảnh toàn cảnh của 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à một thành phần cơ bản cho các ứng dụng và tiện ích Android.
Cũng giống như StreetViewPanoramaFragment
, StreetViewPanoramaView
đóng vai trò như một 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 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())
đế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 ảnh toàn cảnh của Chế độ xem đường phố: kéo, 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ỉ bị tắt.
Đặt vị trí của ảnh toàn cảnh
Để đặt vị trí cho ảnh toàn cảnh của 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, API sẽ trả về kết quả phù hợp nhất.
Nguồn sẽ rất 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 của 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. Lưu ý rằng ảnh toàn cảnh ngoài trời có thể không tồn tại đối với vị trí được chỉ định.
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)
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);
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 các ả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 một ảnh toàn cảnh được kết nối với đối tượng hiện tại.
Kotlin
streetViewPanorama.location.links.firstOrNull()?.let { link: StreetViewPanoramaLink -> streetViewPanorama.setPosition(link.panoId) }
Java
StreetViewPanoramaLocation location = streetViewPanorama.getLocation(); if (location != null && location.links != null) { streetViewPanorama.setPosition(location.links[0].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
.
Việc đặt mức thu phóng ở mức 1.0 sẽ phóng to hình ảnh theo hệ số 2.
Đoạn mã sau đây sử dụng StreetViewPanoramaCamera.Builder()
để tạo một máy ảnh mới với độ nghiêng và góc phương tiện của máy ảnh hiện tại, đồng thời tăng mức thu phóng thêm 50 phần trăm.
Kotlin
val zoomBy = 0.5f val camera = StreetViewPanoramaCamera.Builder() .zoom(streetViewPanorama.panoramaCamera.zoom + zoomBy) .tilt(streetViewPanorama.panoramaCamera.tilt) .bearing(streetViewPanorama.panoramaCamera.bearing) .build()
Java
float zoomBy = 0.5f; StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder() .zoom(streetViewPanorama.getPanoramaCamera().zoom + zoomBy) .tilt(streetViewPanorama.getPanoramaCamera().tilt) .bearing(streetViewPanorama.getPanoramaCamera().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 xoay và độ nghiêng trên StreetViewPanoramaCamera
.
- đang mang
- Hướng của máy ảnh, được xác định bằng độ theo chiều kim đồng hồ tính từ 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 xoay xuống. Phạm vi là -90 đến 0 đến 90, trong đó -90 nhìn thẳng xuống, 0 0 ở giữa đườ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, thường là (nhưng không phải lúc nào cũng) ngang. Ví dụ: hình ảnh chụp trên một ngọn đồi có thể sẽ 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 tính năng thu phóng và độ nghiêng của máy ảnh hiện tại, đồng thời thay đổi góc nghiêng 30 độ sang trái.
Kotlin
val panBy = 30f val camera = StreetViewPanoramaCamera.Builder() .zoom(streetViewPanorama.panoramaCamera.zoom) .tilt(streetViewPanorama.panoramaCamera.tilt) .bearing(streetViewPanorama.panoramaCamera.bearing - panBy) .build()
Java
float panBy = 30; StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder() .zoom(streetViewPanorama.getPanoramaCamera().zoom) .tilt(streetViewPanorama.getPanoramaCamera().tilt) .bearing(streetViewPanorama.getPanoramaCamera().bearing - panBy) .build();
Đoạn mã sau đây nghiêng máy ảnh lên 30 độ.
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()
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();
Tạo ảnh động cho chuyển động của camera
Để tạo ảnh động cho chuyển động của camera, hãy gọi
StreetViewPanorama.animateTo()
.
Ảnh động nội suy giữa các thuộc tính của 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.
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)
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);
Hình ảnh sau đây cho thấy kết quả khi bạn lên lịch để ảnh động ở trên chạy sau mỗi 2000 mili giây, bằng cách sử dụng Handler.postDelayed()
: