ใน 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: ข้อมูลเบื้องต้นในการใช้ Street View
- StreetViewPanoramaEventsDemoActivity: การฟังเหตุการณ์
- StreetViewPanoramaNavigationDemoActivity: การควบคุมภาพพาโนรามาของ Street View แบบเป็นโปรแกรม
- StreetViewPanoramaOptionsDemoActivity: การเปลี่ยนตัวเลือก UI และท่าทางสัมผัส
- StreetViewPanoramaViewDemoActivity: การใช้
StreetViewPanoramaView
(แทนส่วนย่อย) - SplitStreetViewPanoramaAndMapDemoActivity: การใช้กิจกรรมที่แสดง Street View และแผนที่
ตัวอย่าง Java:
- StreetViewPanoramaBasicDemoActivity: ข้อมูลเบื้องต้นในการใช้ Street View
- StreetViewPanoramaEventsDemoActivity: การฟังเหตุการณ์
- StreetViewPanoramaNavigationDemoActivity: การควบคุมภาพพาโนรามาของ Street View แบบเป็นโปรแกรม
- StreetViewPanoramaOptionsDemoActivity: การเปลี่ยนตัวเลือก UI และท่าทางสัมผัส
- StreetViewPanoramaViewDemoActivity: การใช้
StreetViewPanoramaView
(แทนส่วนย่อย) - 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 บางส่วนซึ่งคุณนำเข้าไปยังโปรเจ็กต์และใช้เป็นพื้นฐานในการพัฒนาได้ ดูบทนำสำหรับหลักเกณฑ์ ในการนำเข้าตัวอย่าง
Maps SDK สำหรับ Android Utility Library เป็นไลบรารีแบบโอเพนซอร์สของคลาสที่มีประโยชน์สำหรับแอปพลิเคชันมากมาย ยูทิลิตีข้อมูลเมตาของ Street View รวมอยู่ในที่เก็บ GitHub
ยูทิลิตีนี้จะตรวจสอบว่า Street View รองรับตำแหน่งดังกล่าวหรือไม่ คุณหลีกเลี่ยงข้อผิดพลาดได้เมื่อเพิ่มพาโนรามาของ Street View ลงในแอป Android โดยเรียกใช้ยูทิลิตีของข้อมูลเมตานี้และเพิ่มภาพพาโนรามาของ Street View เฉพาะเมื่อตอบกลับเป็น OK
ใช้ API
ทำตามคำแนะนำด้านล่างเพื่อเพิ่มภาพพาโนรามาของ Street View ลงในส่วนย่อยของ Android นั่นเป็นวิธีที่ง่ายที่สุดในการเพิ่ม Street View ลงในแอปพลิเคชันของคุณ จากนั้นอ่านเพิ่มเติมเกี่ยวกับส่วนย่อย มุมมอง และการปรับแต่งภาพพาโนรามา
เพิ่มภาพพาโนรามา Street View
ทำตามขั้นตอนด้านล่างเพื่อเพิ่มภาพพาโนรามาของ Street View อย่างเช่นตัวอย่างนี้

สรุป:
- เพิ่มวัตถุส่วนย่อยในกิจกรรมที่จะจัดการภาพพาโนรามาของ Street View วิธีที่ง่ายที่สุดในการดำเนินการนี้คือการเพิ่มเอลิเมนต์
<fragment>
ลงในไฟล์เลย์เอาต์สำหรับActivity
- ใช้อินเทอร์เฟซ
OnStreetViewPanoramaReadyCallback
และใช้เมธอดการเรียกกลับonStreetViewPanoramaReady(StreetViewPanorama)
เพื่อรับแฮนเดิลไปยังออบเจ็กต์StreetViewPanorama
- เรียกใช้
getStreetViewPanoramaAsync()
บน Fragment เพื่อลงทะเบียน Callback
รายละเอียดเพิ่มเติมของแต่ละขั้นตอนมีดังนี้
เพิ่มส่วนย่อย
เพิ่มองค์ประกอบ <fragment>
ในไฟล์เลย์เอาต์ของกิจกรรมเพื่อกำหนดออบเจ็กต์ 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()
เพื่อกำหนดโค้ดเรียกกลับใน Fragment
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);
ให้ใช้วิธีเรียกกลับ onStreetViewPanoramaReady(StreetViewPanorama)
เพื่อเรียกอินสแตนซ์ที่ไม่เป็นค่าว่างของ StreetViewPanorama
ซึ่งพร้อมที่จะใช้งานได้
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 ได้ วัตถุ StreetViewPanoramaFragment
ทำหน้าที่เป็นคอนเทนเนอร์สำหรับพาโนรามา และให้สิทธิ์เข้าถึงออบเจ็กต์ StreetViewPanorama
StreetViewPanoramaView
StreetViewPanoramaView
ซึ่งเป็นคลาสย่อยของคลาส Android View
ช่วยให้คุณวางภาพพาโนรามาของ Street View ใน Android View
ได้ 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()
