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

ใช้ API

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

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

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

การสาธิตภาพพาโนรามาของ Street View

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

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

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

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

เพิ่มองค์ประกอบ <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);
}

      

จัดการ Fragment ด้วยการเรียกใช้ FragmentManager.findFragmentById() โดยส่งรหัสทรัพยากรขององค์ประกอบ <fragment> ไปให้ โปรดสังเกตว่าระบบจะเพิ่มรหัสทรัพยากร R.id.streetviewpanorama ไปยังโปรเจ็กต์ Android โดยอัตโนมัติเมื่อคุณสร้างไฟล์เลย์เอาต์

จากนั้นใช้ getStreetViewPanoramaAsync() เพื่อกำหนดโค้ดเรียกกลับใน Fragment

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

  • หากคุณใช้ StreetViewPanoramaFragment ให้ใช้เมธอดเริ่มต้นแบบคงที่ของ StreetViewPanoramaFragment.newInstance(StreetViewPanoramaOptions options) เพื่อสร้างส่วนย่อยและส่งในตัวเลือกที่กำหนดค่าที่กำหนดเอง
  • หากคุณใช้ StreetViewPanoramaView ให้ใช้เครื่องมือสร้าง StreetViewPanoramaView(Context, 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 ลงใน Fragment ของ Android ได้ วัตถุ 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