Street View

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

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

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

ภาพพาโนรามาใน Street View

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

  1. เพิ่มออบเจ็กต์ Fragment ลงใน Activity ที่จัดการภาพพาโนรามาของ 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 อินเทอร์เฟซและตั้งค่าอินสแตนซ์ของคอลแบ็กในออบเจ็กต์ 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 ใน View ของ Android ได้ 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() ภาพเคลื่อนไหวจะแสดงค่าระหว่างแอตทริบิวต์กล้องปัจจุบันกับแอตทริบิวต์กล้องใหม่ หากต้องการไปที่กล้องโดยตรงโดยไม่มีภาพเคลื่อนไหว คุณสามารถตั้งค่าระยะเวลาเป็น 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