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

สรุป:
- เพิ่มส่วนย่อยในกิจกรรมที่จะจัดการภาพพาโนรามาของ Street View วิธีที่ง่ายที่สุดในการดําเนินการนี้คือ เพิ่มองค์ประกอบ
<fragment>
ลงในไฟล์การออกแบบสําหรับActivity
- ใช้อินเทอร์เฟซ
OnStreetViewPanoramaReadyCallback
และใช้เมธอดเรียกกลับของ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 ลงในแอป ขั้นตอนแรกคือการใช้อินเทอร์เฟซการเรียกกลับ
Java
class StreetViewActivity extends AppCompatActivity implements OnStreetViewPanoramaReadyCallback { // ... }
Kotlin
class StreetViewActivity : AppCompatActivity(), OnStreetViewPanoramaReadyCallback { // ... }
ในวิธี onCreate()
ของ Activity
ให้ตั้งค่าไฟล์เลย์เอาต์เป็นมุมมองเนื้อหา ตัวอย่างเช่น หากไฟล์การออกแบบมีชื่อ main.xml
ให้ใช้โค้ดนี้
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) }
รับแฮนเดิลสําหรับส่วนย่อยด้วยการเรียก FragmentManager.findFragmentById()
แล้วส่งผ่านรหัสทรัพยากรขององค์ประกอบ <fragment>
สังเกตว่ามีการเพิ่มรหัสทรัพยากร R.id.streetviewpanorama
ลงในโปรเจ็กต์ Android โดยอัตโนมัติเมื่อคุณสร้างไฟล์เค้าโครง
จากนั้นใช้ getStreetViewPanoramaAsync()
เพื่อตั้งค่าการเรียกกลับบนส่วนย่อย
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)
ใช้วิธีการติดต่อกลับ onStreetViewPanoramaReady(StreetViewPanorama)
เพื่อเรียกข้อมูลอินสแตนซ์ที่ไม่ใช่ Null ของ StreetViewPanorama
ซึ่งพร้อมใช้งาน
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) }
ข้อมูลเพิ่มเติมเกี่ยวกับการกําหนดค่าสถานะเริ่มต้น
สิ่งที่แตกต่างจากแผนที่คือ คุณไม่สามารถกําหนดค่าสถานะเริ่มต้นของภาพพาโนรามา Street View ผ่าน XML ได้ แต่คุณจะกําหนดค่าพาโนรามาแบบเป็นโปรแกรมด้วยการส่งผ่านออบเจ็กต์ StreetViewPanoramaOptions
ที่มีตัวเลือกที่ระบุก็ได้
- หากใช้
StreetViewPanoramaFragment
ให้ใช้เมธอดเริ่มต้นแบบคงที่ของStreetViewPanoramaFragment.newInstance(StreetViewPanoramaOptions options)
เพื่อสร้างส่วนย่อยและส่งผ่านในตัวเลือกที่กําหนดค่าเอง - หากคุณใช้
StreetViewPanoramaView
ให้ใช้เครื่องมือสร้างStreetViewPanoramaView(Context, StreetViewPanoramaOptions)
และส่งผ่านในตัวเลือกที่กําหนดค่าที่กําหนดเอง
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) )
ข้อมูลเพิ่มเติมเกี่ยวกับ StreetViewPanoramaFragment
StreetViewPanoramaFragment
เป็นคลาสย่อยของหมวดหมู่ Android Fragment และให้คุณวางภาพพาโนรามาของ Street View ในส่วนย่อยของ Android ได้ วัตถุ StreetViewPanoramaFragment
ทําหน้าที่เป็นคอนเทนเนอร์สําหรับภาพพาโนรามา และให้สิทธิ์เข้าถึงวัตถุ StreetViewPanorama
StreetView พาโนรามา
StreetViewPanoramaView
เป็นคลาสย่อยของ Android View
ช่วยให้คุณวางภาพพาโนรามาของ Street View ใน View
ของ Android ได้ View
แสดงพื้นที่รูปสี่เหลี่ยมผืนผ้าของหน้าจอ
และเป็นองค์ประกอบพื้นฐานสําหรับแอปพลิเคชัน Android และวิดเจ็ตต่างๆ
StreetViewPanoramaView
เปรียบเสมือนคอนเทนเนอร์
สําหรับภาพพาโนรามา ซึ่งเผยให้เห็นฟังก์ชันการทํางานหลักผ่านออบเจ็กต์ StreetViewPanorama
ซึ่งคล้ายกับ StreetViewPanoramaFragment
ผู้ใช้คลาสนี้ต้องส่งต่อเมธอดอายุการใช้งานทั้งหมดของกิจกรรม (เช่น 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 อาจอยู่ในสถานที่ต่างๆ เช่น พิพิธภัณฑ์ อาคารสาธารณะ คาเฟ่ และธุรกิจต่างๆ โปรดทราบว่าอาจไม่มีภาพพาโนรามากลางแจ้งสําหรับสถานที่ที่ระบุ
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)
หรือจะตั้งค่าตําแหน่งตามรหัสพาโนรามาโดยส่ง panoId
ไปยัง StreetViewPanorama.setPosition()
หากต้องการเรียกข้อมูลรหัสพาโนรามาสําหรับภาพพาโนรามาที่ติดกัน ให้ใช้ getLocation()
เพื่อเรียกข้อมูล StreetViewPanoramaLocation
ก่อน
วัตถุนี้มีรหัสของพาโนรามาปัจจุบันและอาร์เรย์ของวัตถุ StreetViewPanoramaLink
แต่ละวัตถุมีรหัสของภาพพาโนรามาที่เชื่อมต่อกับวัตถุปัจจุบัน
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) }
ซูมเข้าและออก
คุณสามารถเปลี่ยนระดับการซูมได้แบบเป็นโปรแกรมด้วยการตั้งค่า StreetViewPanoramaCamera.zoom
การตั้งค่าการซูมเป็น 1.0 จะขยายรูปภาพโดยปัจจัยที่ 2
ข้อมูลโค้ดต่อไปนี้ใช้ StreetViewPanoramaCamera.Builder()
เพื่อสร้างกล้องใหม่พร้อมการเอียงและทิศทางของกล้องที่มีอยู่ และเพิ่มการซูม 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()
ตั้งค่าการวางแนวกล้อง (มุมมอง)
คุณสามารถตั้งการวางแนวกล้อง Street View ได้โดยการตั้งค่าทิศทางของเอียงและเอียงบน StreetViewPanoramaCamera
- การแบก
- ทิศทางที่กล้องเล็ง ระบุเป็นองศาตามเข็มนาฬิกาจากทิศเหนือจริงตามตําแหน่งกล้อง ทิศเหนือจริงคือ 0 ทิศตะวันออกคือ 90 ทิศใต้คือ 180 ทิศตะวันตกคือ 270
- เอียง
- แกน Y เอียงขึ้นหรือลง ช่วงคือ -90 ถึง 90 โดย -90 มีการมองลงโดยตรง, 0 อยู่ตรงกลางในแนวนอน และ 90 มองขึ้น โดยตรง ค่าความแปรปรวนนี้วัดจากระดับความสูงต่ําเริ่มต้นของกล้อง ซึ่งมักจะ อยู่ในแนวราบ (ไม่ใช่เสมอไป) เช่น รูปภาพที่ถ่ายจากบนเนินเขาอาจมีการเสนอขายเริ่มต้นแบบแนวนอน
ข้อมูลโค้ดต่อไปนี้ใช้ StreetViewPanoramaCamera.Builder()
เพื่อสร้างกล้องใหม่พร้อมการซูมและเอียงของกล้องที่มีอยู่ และเปลี่ยนทิศทางเอียง 30 องศาไปทางซ้าย
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()
ข้อมูลโค้ดจะเอียงกล้องขึ้น 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()
ทําให้การเคลื่อนไหวของกล้องเคลื่อนไหว
สร้างการเคลื่อนไหวของกล้อง แล้วโทร StreetViewPanorama.animateTo()
ภาพเคลื่อนไหวจะประมาณค่าระหว่างแอตทริบิวต์กล้องปัจจุบันกับแอตทริบิวต์กล้องใหม่ หากต้องการข้ามไปยังกล้องถ่ายรูปโดยตรงโดยไม่มีภาพเคลื่อนไหว
ให้กําหนดระยะเวลาเป็น 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)
รูปภาพต่อไปนี้แสดงผลลัพธ์เมื่อคุณตั้งเวลาให้ภาพเคลื่อนไหวด้านบนทํางานทุกๆ 2, 000 มิลลิวินาที โดยใช้ Handler.postDelayed()
