Street View

เลือกแพลตฟอร์ม Android iOS JavaScript

Google Street View แสดงภาพมุมมอง 360 องศาแบบพาโนรามาจากถนนที่กําหนดทั่วทั้งพื้นที่ให้บริการ

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

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

คลาส StreetViewPanorama จะจำลองภาพพาโนรามาของ Street View ในแอปพลิเคชัน ใน 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 2-3 รายการที่คุณนําเข้าไปยังโปรเจ็กต์และใช้เพื่อเป็นพื้นฐานในการพัฒนาได้ ดูข้อมูลเบื้องต้นเพื่อดูหลักเกณฑ์ในการนําเข้าตัวอย่าง

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

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 ที่มีตัวเลือกที่ระบุ

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 Fragment ได้ ออบเจ็กต์ StreetViewPanoramaFragment จะทำหน้าที่เป็นคอนเทนเนอร์ของภาพพาโนรามา และให้สิทธิ์เข้าถึงออบเจ็กต์ StreetViewPanorama

StreetViewPanoramaView

StreetViewPanoramaView ซึ่งเป็นคลาสย่อยของคลาส Android View ช่วยให้คุณวางภาพพาโนรามาของ Street View ใน Android View ได้ 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()

ภาพตัวอย่างภาพเคลื่อนไหวพาโนรามาของ Street View