Google Street View แสดงภาพมุมมองพาโนรามา 360 องศาจากถนนที่กำหนดทั่วทั้งพื้นที่ให้บริการ
วิดีโอนี้แสดงวิธีใช้บริการ Street View เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่อยู่บนแผนที่เหมือนในชีวิตจริง โดยให้บริบทที่สื่อความหมายเกี่ยวกับจุดหมายหรือสถานที่ที่ผู้ใช้สนใจ
ความครอบคลุมที่พร้อมใช้งานผ่าน Google Maps Android API v2 จะเหมือนกับแอป Google Maps ในอุปกรณ์ Android อ่านข้อมูลเพิ่มเติมเกี่ยวกับ Street View และดูพื้นที่ที่รองรับบนแผนที่แบบอินเทอร์แอกทีฟได้ที่เกี่ยวกับ Street View
คลาส StreetViewPanorama
แสดงภาพพาโนรามาของ Street View ในแอปพลิเคชัน ใน UI ของคุณ ระบบจะแสดงภาพพาโนรามาด้วยออบเจ็กต์ StreetViewPanoramaFragment
หรือ StreetViewPanoramaView
ตัวอย่างโค้ด
ที่เก็บ ApiDemos ใน GitHub มีตัวอย่างที่สาธิตการใช้ Street View
ตัวอย่าง Kotlin:
- StreetViewPanoramaBasicDemoActivity: พื้นฐานในการใช้ Google Street View
- StreetViewPanoramaEventsDemoActivity: การฟังเหตุการณ์
- StreetViewPanoramaNavigationDemoActivity: การควบคุมพาโนรามาใน Street View แบบเป็นโปรแกรม
- StreetViewPanoramaOptionsDemoActivity: การเปลี่ยน UI และตัวเลือกท่าทางสัมผัส
- StreetViewPanoramaViewDemoActivity: การใช้
StreetViewPanoramaView
(แทน Fragment) - SplitStreetViewPanoramaAndMapDemoActivity: การใช้กิจกรรมที่แสดง Street View และแผนที่
ตัวอย่าง Java:
- StreetViewPanoramaBasicDemoActivity: พื้นฐานในการใช้ Google Street View
- StreetViewPanoramaEventsDemoActivity: การฟังเหตุการณ์
- StreetViewPanoramaNavigationDemoActivity: การควบคุมพาโนรามาใน Street View แบบเป็นโปรแกรม
- StreetViewPanoramaOptionsDemoActivity: การเปลี่ยน UI และตัวเลือกท่าทางสัมผัส
- StreetViewPanoramaViewDemoActivity: การใช้
StreetViewPanoramaView
(แทน Fragment) - SplitStreetViewPanoramaAndMapDemoActivity: การสร้างกิจกรรมที่แสดง Street View และแผนที่
ภาพรวมของ Street View ใน Maps SDK สำหรับ Android
Maps SDK สำหรับ Android มีบริการ Street View สำหรับรับและดัดแปลงภาพที่ใช้ใน Google Street View ระบบจะแสดงผลรูปภาพเป็นภาพพาโนรามา
ภาพพาโนรามาของ Street View แต่ละภาพคือรูปภาพหรือชุดรูปภาพที่แสดงมุมมอง 360 องศาเต็มจากสถานที่ตั้งเดียว รูปภาพเป็นไปตามการฉายภาพทรงกลม (Plate Carrée) ซึ่งประกอบด้วยมุมมองแนวนอน 360 องศา (แบบรอบตัว) และมุมมองแนวตั้ง 180 องศา (จากบนลงล่าง) ภาพพาโนรามา 360 องศาที่ได้จะกำหนดการฉายบนทรงกลมโดยที่รูปภาพจะวางซ้อนบนพื้นผิว 2 มิติของทรงกลมนั้น
StreetViewPanorama
มีโปรแกรมดูภาพพาโนรามาที่แสดงผลภาพพาโนรามาเป็นรูปทรงกลมโดยมีกล้องอยู่ตรงกลาง คุณควบคุมStreetViewPanoramaCamera
เพื่อซูมและการวางแนว (การเอียงและทิศทาง) ของกล้องได้
เริ่มต้นใช้งาน
ตั้งค่าโปรเจ็กต์
ทำตามคู่มือเริ่มต้นใช้งานเพื่อตั้งค่าโปรเจ็กต์ Maps SDK สำหรับ Android
ตรวจสอบความพร้อมใช้งานของภาพพาโนรามาใน Street View ก่อนเพิ่มภาพพาโนรามา
ไลบรารีไคลเอ็นต์ SDK ของบริการ Google Play มีตัวอย่าง Street View 2-3 รายการที่คุณนําเข้าไปไว้ในโปรเจ็กต์และใช้เพื่อเป็นพื้นฐานในการพัฒนาได้ ดูข้อมูลเบื้องต้นเพื่อดูหลักเกณฑ์ในการนําเข้าตัวอย่าง
ไลบรารียูทิลิตี Maps SDK สำหรับ Android เป็นไลบรารีคลาสโอเพนซอร์สที่มีประโยชน์สำหรับแอปพลิเคชันต่างๆ ที่เก็บ GitHub นี้จะมียูทิลิตีข้อมูลเมตาของ Street View รวมอยู่ด้วย
ยูทิลิตีนี้จะตรวจสอบว่า Street View รองรับสถานที่หรือไม่ คุณหลีกเลี่ยงข้อผิดพลาดเมื่อเพิ่มภาพพาโนรามาของ Street View ลงในแอป Android ได้โดยเรียกใช้ยูทิลิตีข้อมูลเมตานี้ และเพิ่มภาพพาโนรามาของ Street View เฉพาะในกรณีที่การตอบกลับคือ OK
ใช้ API
ทำตามวิธีการด้านล่างเพื่อเพิ่มภาพพาโนรามาของ Street View ลงในฟragment ของ Android วิธีนี้เป็นวิธีที่ง่ายที่สุดในการเพิ่ม Street View ลงในแอปพลิเคชัน จากนั้นอ่านข้อมูลเพิ่มเติมเกี่ยวกับชิ้นส่วน มุมมอง และการปรับแต่งภาพพาโนรามา
เพิ่มภาพพาโนรามาใน Street View
ทำตามขั้นตอนด้านล่างเพื่อเพิ่มภาพพาโนรามาของ Street View เช่นนี้
โดยสรุป
- เพิ่มออบเจ็กต์ Fragment ลงใน Activity ที่จัดการภาพพาโนรามาของ Street View วิธีที่ง่ายที่สุดคือเพิ่มองค์ประกอบ
<fragment>
ลงในไฟล์เลย์เอาต์ของActivity
- ใช้
OnStreetViewPanoramaReadyCallback
อินเทอร์เฟซและใช้เมธอด Callback ของonStreetViewPanoramaReady(StreetViewPanorama)
เพื่อรับแฮนเดิลสำหรับออบเจ็กต์StreetViewPanorama
- เรียกใช้
getStreetViewPanoramaAsync()
ในฟрагเมนต์เพื่อลงทะเบียนการโทรกลับ
รายละเอียดเพิ่มเติมเกี่ยวกับแต่ละขั้นตอนมีดังนี้
เพิ่มข้อมูลโค้ด
เพิ่มองค์ประกอบ <fragment>
ลงในไฟล์เลย์เอาต์ของกิจกรรมเพื่อกำหนดออบเจ็กต์ส่วน ในองค์ประกอบนี้ ให้ตั้งค่าแอตทริบิวต์ class
เป็น com.google.android.gms.maps.StreetViewPanoramaFragment
(หรือ SupportStreetViewPanoramaFragment
)
ต่อไปนี้คือตัวอย่างของข้อมูลโค้ดในไฟล์เลย์เอาต์
<fragment android:name="com.google.android.gms.maps.StreetViewPanoramaFragment" android:id="@+id/streetviewpanorama" android:layout_width="match_parent" android:layout_height="match_parent"/>
เพิ่มรหัส Street View
หากต้องการใช้งานภาพพาโนรามาของ Street View ในแอป คุณจะต้องติดตั้งใช้งานOnStreetViewPanoramaReadyCallback
อินเทอร์เฟซและตั้งค่าอินสแตนซ์ของคอลแบ็กในออบเจ็กต์ StreetViewPanoramaFragment
หรือ StreetViewPanoramaView
บทแนะนำนี้ใช้ StreetViewPanoramaFragment
เนื่องจากเป็นวิธีที่ง่ายที่สุดในการเพิ่ม Street View ลงในแอป ขั้นตอนแรกคือการใช้อินเทอร์เฟซการเรียกกลับ โดยทำดังนี้
Kotlin
class StreetViewActivity : AppCompatActivity(), OnStreetViewPanoramaReadyCallback { // ... }
Java
class StreetViewActivity extends AppCompatActivity implements OnStreetViewPanoramaReadyCallback { // ... }
ในเมธอด onCreate()
ของ Activity
ให้ตั้งค่าไฟล์เลย์เอาต์เป็นมุมมองเนื้อหา ตัวอย่างเช่น หากไฟล์เลย์เอาต์มีชื่อว่า main.xml
ให้ใช้รหัสนี้
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); }
รับแฮนเดิลของข้อมูลโค้ดเรียกใช้โดยเรียกใช้ FragmentManager.findFragmentById()
โดยส่งรหัสทรัพยากรขององค์ประกอบ <fragment>
โปรดทราบว่าระบบจะเพิ่มรหัสทรัพยากร R.id.streetviewpanorama
ลงในโปรเจ็กต์ Android โดยอัตโนมัติเมื่อคุณสร้างไฟล์เลย์เอาต์
จากนั้นใช้ getStreetViewPanoramaAsync()
เพื่อตั้งค่าการเรียกกลับในข้อมูลโค้ด
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);
ใช้เมธอด Callback ของ onStreetViewPanoramaReady(StreetViewPanorama)
เพื่อเรียกข้อมูลอินสแตนซ์ของ StreetViewPanorama
ที่ไม่ใช่ค่า Null ซึ่งพร้อมใช้งาน
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); }
ข้อมูลเพิ่มเติมเกี่ยวกับการกําหนดค่าสถานะเริ่มต้น
ต่างจากแผนที่ตรงที่คุณจะกำหนดค่าสถานะเริ่มต้นของภาพพาโนรามา Street View ผ่าน XML ไม่ได้ อย่างไรก็ตาม คุณสามารถกําหนดค่าภาพพาโนรามาแบบเป็นโปรแกรมได้โดยส่งออบเจ็กต์ StreetViewPanoramaOptions
ที่มีตัวเลือกที่ระบุ
- หากคุณใช้
StreetViewPanoramaFragment
ให้ใช้เมธอดแบบคงที่ของฟีเจอร์การสร้างเพื่อสร้างข้อมูลโค้ดโค้ดและส่งตัวเลือกที่กำหนดค่าเองStreetViewPanoramaFragment.newInstance(StreetViewPanoramaOptions options)
- หากคุณใช้
StreetViewPanoramaView
ให้ใช้คอนสตรคเตอร์StreetViewPanoramaView(Context, StreetViewPanoramaOptions)
และส่งตัวเลือกที่กำหนดค่าเอง
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));
ข้อมูลเพิ่มเติมเกี่ยวกับ StreetViewPanoramaFragment
StreetViewPanoramaFragment
เป็นคลาสย่อยของคลาส Android Fragment และช่วยให้คุณวางภาพพาโนรามาของ Street View ใน Android Fragment ได้ วัตถุ StreetViewPanoramaFragment
จะทำหน้าที่เป็นคอนเทนเนอร์ของภาพพาโนรามา และให้สิทธิ์เข้าถึงวัตถุ StreetViewPanorama
StreetViewPanoramaView
StreetViewPanoramaView
ซึ่งเป็นคลาสย่อยของคลาส Android View
ช่วยให้คุณวางภาพพาโนรามาของ Street View ใน View
ของ Android ได้ View
แสดงถึงพื้นที่สี่เหลี่ยมผืนผ้าบนหน้าจอ และเป็นองค์ประกอบพื้นฐานสําหรับแอปพลิเคชันและวิดเจ็ต Android
StreetViewPanoramaView
ทำหน้าที่เป็นคอนเทนเนอร์ของภาพพาโนรามาเช่นเดียวกับ StreetViewPanoramaFragment
โดยแสดงฟังก์ชันหลักผ่านออบเจ็กต์ StreetViewPanorama
ผู้ใช้คลาสนี้ต้องส่งต่อเมธอดวงจรชีวิตของกิจกรรมทั้งหมด (เช่น onCreate()
, onDestroy()
, onResume()
และ onPause())
) ไปยังเมธอดที่เกี่ยวข้องในคลาส StreetViewPanoramaView
ปรับแต่งฟังก์ชันการทำงานที่ผู้ใช้ควบคุม
โดยค่าเริ่มต้น ผู้ใช้จะใช้งานฟังก์ชันต่อไปนี้ได้เมื่อดูภาพพาโนรามาของ Street View ได้แก่ การเลื่อน การซูม และการเปลี่ยนไปยังภาพพาโนรามาที่อยู่ติดกัน คุณเปิดและปิดใช้ท่าทางสัมผัสที่ผู้ใช้ควบคุมได้ผ่านวิธีการต่างๆ ใน StreetViewPanorama
การเปลี่ยนแปลงแบบเป็นโปรแกรมจะยังคงทําได้เมื่อปิดใช้ท่าทางสัมผัส
กำหนดตำแหน่งของภาพพาโนรามา
หากต้องการตั้งค่าตำแหน่งของพาโนรามาใน Street View ให้เรียกใช้ StreetViewPanorama.setPosition()
โดยส่ง LatLng
นอกจากนี้ คุณยังส่ง radius
และ source
เป็นพารามิเตอร์ที่ไม่บังคับได้ด้วย
รัศมีมีประโยชน์ในกรณีที่คุณต้องการขยายหรือแคบพื้นที่ที่ Street View จะค้นหาภาพพาโนรามาที่ตรงกัน รัศมี 0 หมายความว่าภาพพาโนรามาต้องลิงก์กับ LatLng
ที่ระบุไว้เท่านั้น
โดยรัศมีเริ่มต้นคือ 50 เมตร หากภาพพาโนรามาในบริเวณที่ตรงกันมีมากกว่า 1 ภาพ API จะแสดงผลภาพที่ตรงกันที่สุด
แหล่งที่มาจะมีประโยชน์หากคุณต้องการจำกัดให้ Street View มองหาเฉพาะภาพพาโนรามาที่ถ่ายกลางแจ้ง โดยค่าเริ่มต้น ภาพพาโนรามาของ Street View อาจอยู่ภายในสถานที่ต่างๆ เช่น พิพิธภัณฑ์ อาคารสาธารณะ คาเฟ่ และธุรกิจ โปรดทราบว่าภาพพาโนรามากลางแจ้งอาจไม่พร้อมใช้งานสำหรับสถานที่ที่ระบุ
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);
หรือจะตั้งค่าตำแหน่งตามรหัสภาพพาโนรามาโดยส่ง panoId
ไปยัง StreetViewPanorama.setPosition()
ก็ได้
หากต้องการเรียกข้อมูลรหัสพาโนรามาของพาโนรามาที่อยู่ติดกัน ให้ใช้ getLocation()
เพื่อเรียกข้อมูล StreetViewPanoramaLocation
ก่อน
ออบเจ็กต์นี้มีรหัสของพาโนรามาปัจจุบันและอาร์เรย์ของออบเจ็กต์ StreetViewPanoramaLink
โดยแต่ละรายการมีรหัสของพาโนรามาที่เชื่อมต่อกับพาโนรามาปัจจุบัน
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); }
ซูมเข้าและออก
คุณเปลี่ยนระดับการซูมแบบเป็นโปรแกรมได้โดยการตั้งค่า StreetViewPanoramaCamera.zoom
การตั้งค่าการซูมเป็น 1.0 จะขยายรูปภาพขึ้น 2 เท่า
ข้อมูลโค้ดต่อไปนี้ใช้ StreetViewPanoramaCamera.Builder()
เพื่อสร้างกล้องใหม่ที่มีการเอียงและทิศทางของกล้องที่มีอยู่ พร้อมกับเพิ่มการซูมขึ้น 50 เปอร์เซ็นต์
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();
ตั้งค่าการวางแนวของกล้อง (จุดที่มอง)
คุณกำหนดการวางแนวของกล้อง Street View ได้โดยการตั้งค่าการทรงตัวและการเอียงใน StreetViewPanoramaCamera
- ทิศทาง
- ทิศทางที่กล้องชี้ไป โดยระบุเป็นองศาจากทิศเหนือตามจริงตามเข็มนาฬิการอบจุดที่กล้องอยู่ ทิศเหนือจริงคือ 0, ตะวันออกคือ 90, ใต้คือ 180 และตะวันตกคือ 270
- เอียง
- บิดแกน Y ขึ้นหรือลง ช่วงคือ -90 ถึง 0 ถึง 90 โดย -90 หมายถึงมองลง 0 หมายถึงตรงกับขอบฟ้า และ 90 หมายถึงมองขึ้น โดยความแปรปรวนจะวัดจากระดับความชันเริ่มต้นเริ่มต้นของกล้อง ซึ่งมักจะเป็นมุมแนวนอนแบบราบ (แต่ก็ไม่เสมอไป) เช่น รูปภาพที่ถ่ายบนเนินเขาอาจมีระดับความลาดชันเริ่มต้นที่ไม่ใช่แนวนอน
ข้อมูลโค้ดต่อไปนี้ใช้ StreetViewPanoramaCamera.Builder()
เพื่อสร้างกล้องใหม่ที่มีการซูมและเอียงของกล้องที่มีอยู่ ขณะที่เปลี่ยนทิศทางการกําหนด 30 องศาไปทางซ้าย
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();
ข้อมูลโค้ดต่อไปนี้จะเอียงกล้องขึ้น 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();
เคลื่อนไหวการเคลื่อนกล้อง
หากต้องการทำให้กล้องเคลื่อนไหว ให้เรียกใช้ StreetViewPanorama.animateTo()
ภาพเคลื่อนไหวจะแสดงค่าระหว่างแอตทริบิวต์กล้องปัจจุบันกับแอตทริบิวต์กล้องใหม่ หากต้องการข้ามไปยังกล้องโดยตรงโดยไม่ใช้ภาพเคลื่อนไหว ให้ตั้งค่าระยะเวลาเป็น 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);
รูปภาพต่อไปนี้แสดงผลลัพธ์เมื่อคุณตั้งเวลาให้ภาพเคลื่อนไหวข้างต้นทำงานทุก 2, 000 มิลลิวินาทีโดยใช้ Handler.postDelayed()