Google Street View แสดงภาพมุมมองพาโนรามา 360 องศาจากถนนที่กำหนดทั่วทั้งพื้นที่ให้บริการ
วิดีโอนี้แสดงวิธีใช้บริการ Street View เพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่อยู่บนแผนที่เหมือนในชีวิตจริง โดยให้บริบทที่สื่อความหมายเกี่ยวกับจุดหมายหรือสถานที่ที่ผู้ใช้สนใจ
ความครอบคลุมที่มีใน Google Maps API สำหรับ Android 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
(แทน 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 Utility Library เป็นไลบรารีชั้นเรียนแบบโอเพนซอร์สซึ่งมีประโยชน์สำหรับแอปพลิเคชันต่างๆ ในที่เก็บ 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()
ในส่วนย่อยเพื่อลงทะเบียน 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
และตั้งค่าอินสแตนซ์ของ Callback ในออบเจ็กต์ 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 ได้ วัตถุ 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()