Street View

เลือกแพลตฟอร์ม แอนดรอยด์ iOS JavaScript

Google Street View ให้มุมมอง 360 องศาแบบพาโนรามาจากถนนที่กำหนด ให้ครอบคลุมทุกพื้นที่

วิดีโอนี้จะแสดงวิธีใช้บริการ Street View เพื่อมอบให้กับผู้ใช้ ประสบการณ์การใช้งานจริงของที่อยู่บนแผนที่ ทำให้ บริบทที่มีความหมายเกี่ยวกับจุดหมายปลายทางหรือสถานที่ที่พวกเขาสนใจ

ความครอบคลุมที่มีใน Google Maps Android API v2 นั้นเหมือนกับ API ของแอป Google Maps บน Android ของคุณ อุปกรณ์ คุณสามารถอ่านข้อมูลเพิ่มเติมเกี่ยวกับ Street View และดูพื้นที่ที่สนับสนุนได้ใน แผนที่แบบอินเทอร์แอกทีฟที่เกี่ยวกับ Street View

โมเดลคลาส StreetViewPanorama ของ Street ดูภาพพาโนรามาในแอปพลิเคชันของคุณ ใน UI ของคุณ ระบบจะแสดงภาพพาโนรามา โดย StreetViewPanoramaFragment หรือ ออบเจ็กต์ StreetViewPanoramaView

ตัวอย่างโค้ด

ที่เก็บ ApiDemos บน GitHub ประกอบด้วย ตัวอย่างที่สาธิตการใช้ Street View

ตัวอย่าง Kotlin

ตัวอย่าง Java:

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

ใช้ API

ทำตามวิธีการด้านล่างเพื่อเพิ่มภาพพาโนรามาของ Street View ลงใน Android ส่วนย่อย นั่นเป็นวิธีที่ง่ายที่สุดในการเพิ่ม Street View ลงในแอปพลิเคชันของคุณ จากนั้น อ่านเพิ่มเติมเกี่ยวกับส่วนย่อย มุมมอง และการปรับแต่งภาพพาโนรามา

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

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

การสาธิตพาโนรามา Street View

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

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

ด้านล่างนี้คือรายละเอียดเพิ่มเติมเกี่ยวกับแต่ละขั้นตอน

เพิ่มส่วนย่อย

เพิ่มเอลิเมนต์ <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

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() เพื่อกำหนด Callback ในส่วนย่อย

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) เมธอด Callback เพื่อเรียกคืนอินสแตนซ์ที่ไม่ใช่ค่าว่างของ 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 รายการ ที่มีตัวเลือกที่คุณระบุ

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 เช่นเดียวกับ StreetViewPanoramaFragment StreetViewPanoramaView จะทำหน้าที่เป็น ที่เก็บภาพพาโนรามาซึ่งเผยให้เห็นฟังก์ชันหลักผ่านทาง ออบเจ็กต์ StreetViewPanorama รายการ ผู้ใช้ของชั้นเรียนนี้ต้องส่งต่อกิจกรรมทั้งหมด วงจรชีวิต (เช่น onCreate(), onDestroy(), onResume() และ onPause()) ไปยังเมธอดที่เกี่ยวข้องในคลาส StreetViewPanoramaView

ปรับแต่งฟังก์ชันการทำงานที่ผู้ใช้ควบคุม

โดยค่าเริ่มต้น ฟังก์ชันต่อไปนี้จะพร้อมใช้งานสำหรับผู้ใช้ขณะดู ภาพพาโนรามา Street View: การแพนกล้อง การซูม และการเดินทาง กับภาพพาโนรามาที่อยู่ติดกัน คุณสามารถเปิดและปิดใช้ท่าทางสัมผัสที่ผู้ใช้ควบคุมได้ ใน StreetViewPanorama แบบเป็นโปรแกรม ยังคงสามารถเปลี่ยนแปลงได้เมื่อปิดใช้งานท่าทางสัมผัส

ตั้งค่าตำแหน่งของภาพพาโนรามา

เมื่อต้องการกำหนดตำแหน่งของภาพพาโนรามาของ Street View ให้เรียกใช้ StreetViewPanorama.setPosition() ผ่าน LatLng นอกจากนี้คุณยังส่งผ่าน radius และ source เป็นพารามิเตอร์ที่ไม่บังคับได้ด้วย

รัศมีมีประโยชน์หากคุณต้องการขยายหรือ จำกัดพื้นที่ที่ Street View จะค้นหาภาพพาโนรามาที่ตรงกันให้แคบลง รัศมี ของ 0 หมายความว่าภาพพาโนรามาต้องเชื่อมโยงกับ LatLng ที่ระบุทุกประการ รัศมีเริ่มต้นคือ 50 เมตร หากมีภาพพาโนรามามากกว่าหนึ่งภาพใน ที่ตรงกัน 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() ภาพเคลื่อนไหวจะประสานระหว่างแอตทริบิวต์ของกล้องปัจจุบันกับ ของ AdWords หากต้องการไปที่กล้องโดยตรงโดยไม่มีภาพเคลื่อนไหว คุณสามารถตั้งค่าระยะเวลาเป็น 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() ดังนี้

การสาธิตภาพเคลื่อนไหวแบบพาโนรามาใน Street View