Street View

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 (แทนส่วนย่อย)
• SplitStreetViewPanoramaAndMapDemoActivity: การสร้างกิจกรรมที่แสดง Street View และแผนที่

ภาพรวมของ Street View ใน 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 ลงในส่วนย่อยของ Android ซึ่งเป็นวิธีที่ง่ายที่สุดในการเพิ่ม Street View ลงในแอปพลิเคชันของคุณ จากนั้นก็อ่านเพิ่มเติมเกี่ยวกับส่วนย่อย มุมมอง และการปรับแต่งภาพพาโนรามา

เพิ่มภาพพาโนรามา Street View

ทำตามขั้นตอนด้านล่างเพื่อเพิ่มภาพพาโนรามา Street View อย่างเช่นภาพนี้

โดยสรุปได้ดังนี้

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

class StreetViewActivity : AppCompatActivity(), OnStreetViewPanoramaReadyCallback {
    // ...
}

      

class StreetViewActivity extends AppCompatActivity implements OnStreetViewPanoramaReadyCallback {
    // ...
}

      

ในเมธอด onCreate() ของ Activity ให้ตั้งค่าไฟล์เลย์เอาต์เป็นมุมมองเนื้อหา เช่น หากไฟล์เลย์เอาต์มีชื่อ main.xml ให้ใช้โค้ดต่อไปนี้

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)
}

      

@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() เพื่อตั้งค่า Callback ใน Fragment

val streetViewPanoramaFragment =
    supportFragmentManager
        .findFragmentById(R.id.street_view_panorama) as SupportStreetViewPanoramaFragment
streetViewPanoramaFragment.getStreetViewPanoramaAsync(this)

      

SupportStreetViewPanoramaFragment streetViewPanoramaFragment =
    (SupportStreetViewPanoramaFragment) getSupportFragmentManager()
        .findFragmentById(R.id.street_view_panorama);
streetViewPanoramaFragment.getStreetViewPanoramaAsync(this);

      

ใช้เมธอด Callback onStreetViewPanoramaReady(StreetViewPanorama) เพื่อเรียกข้อมูลอินสแตนซ์ที่ไม่ใช่ Null ของ StreetViewPanorama ซึ่งพร้อมใช้งานใน

override fun onStreetViewPanoramaReady(streetViewPanorama: StreetViewPanorama) {
    val sanFrancisco = LatLng(37.754130, -122.447129)
    streetViewPanorama.setPosition(sanFrancisco)
}

      

@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) และส่งในตัวเลือกที่กำหนดค่าไว้ที่กำหนดเอง

val sanFrancisco = LatLng(37.754130, -122.447129)
val view = StreetViewPanoramaView(
    this,
    StreetViewPanoramaOptions().position(sanFrancisco)
)

      

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 อาจอยู่ภายในสถานที่ต่างๆ เช่น พิพิธภัณฑ์ อาคารสาธารณะ คาเฟ่ และธุรกิจต่างๆ โปรดทราบว่าตำแหน่งที่ระบุอาจไม่มีภาพพาโนรามากลางแจ้ง

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)

      

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 วัตถุแต่ละแบบมีรหัสของพาโนรามาที่เชื่อมต่อกับวัตถุปัจจุบัน

streetViewPanorama.location.links.firstOrNull()?.let { link: StreetViewPanoramaLink ->
    streetViewPanorama.setPosition(link.panoId)
}

      

StreetViewPanoramaLocation location = streetViewPanorama.getLocation();
if (location != null && location.links != null) {
    streetViewPanorama.setPosition(location.links[0].panoId);
}

      

ซูมเข้าและออก

คุณเปลี่ยนระดับการซูมแบบเป็นโปรแกรมได้โดยการตั้งค่า StreetViewPanoramaCamera.zoom การตั้งค่าการซูมเป็น 1.0 จะขยายรูปภาพขึ้นเป็น 2 เท่า

ข้อมูลโค้ดต่อไปนี้ใช้ StreetViewPanoramaCamera.Builder() เพื่อสร้างกล้องใหม่ด้วยการเอียงและรองรับกล้องที่มีอยู่ ขณะเพิ่มการซูม 50 เปอร์เซ็นต์

val zoomBy = 0.5f
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom + zoomBy)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing)
    .build()

      

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 องศา

val panBy = 30f
val camera = StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.panoramaCamera.zoom)
    .tilt(streetViewPanorama.panoramaCamera.tilt)
    .bearing(streetViewPanorama.panoramaCamera.bearing - panBy)
    .build()

      

float panBy = 30;
StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.getPanoramaCamera().zoom)
    .tilt(streetViewPanorama.getPanoramaCamera().tilt)
    .bearing(streetViewPanorama.getPanoramaCamera().bearing - panBy)
    .build();

      

ข้อมูลโค้ดต่อไปนี้เอียงกล้องขึ้น 30 องศา

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()

      

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

// 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)

      

// 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()