Street View

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

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

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

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

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

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

ที่เก็บ ApiDemos ใน GitHub มีตัวอย่างที่แสดงให้เห็นถึงการใช้งาน Street View

ตัวอย่าง Java:

ตัวอย่าง Kotlin

ภาพรวมของ Street View ใน Maps SDK สําหรับแอนดรอยด์

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

ใช้ API

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

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

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

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

สรุป:

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

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

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

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

Java


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

      

Kotlin


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

      

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

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

      

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

      

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

จากนั้นใช้ getStreetViewPanoramaAsync() เพื่อตั้งค่าการเรียกกลับบนส่วนย่อย

Java


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

      

Kotlin


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

      

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

Java


@Override
public void onStreetViewPanoramaReady(StreetViewPanorama streetViewPanorama) {
    LatLng sanFrancisco = new LatLng(37.754130, -122.447129);
    streetViewPanorama.setPosition(sanFrancisco);
}

      

Kotlin


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

      

ข้อมูลเพิ่มเติมเกี่ยวกับการกําหนดค่าสถานะเริ่มต้น

สิ่งที่แตกต่างจากแผนที่คือ คุณไม่สามารถกําหนดค่าสถานะเริ่มต้นของภาพพาโนรามา Street View ผ่าน XML ได้ แต่คุณจะกําหนดค่าพาโนรามาแบบเป็นโปรแกรมด้วยการส่งผ่านออบเจ็กต์ StreetViewPanoramaOptions ที่มีตัวเลือกที่ระบุก็ได้

  • หากใช้ StreetViewPanoramaFragment ให้ใช้เมธอดเริ่มต้นแบบคงที่ของ StreetViewPanoramaFragment.newInstance(StreetViewPanoramaOptions options) เพื่อสร้างส่วนย่อยและส่งผ่านในตัวเลือกที่กําหนดค่าเอง
  • หากคุณใช้ StreetViewPanoramaView ให้ใช้เครื่องมือสร้าง StreetViewPanoramaView(Context, StreetViewPanoramaOptions) และส่งผ่านในตัวเลือกที่กําหนดค่าที่กําหนดเอง

Java


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

      

Kotlin


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

      

ข้อมูลเพิ่มเติมเกี่ยวกับ StreetViewPanoramaFragment

StreetViewPanoramaFragment เป็นคลาสย่อยของหมวดหมู่ Android Fragment และให้คุณวางภาพพาโนรามาของ Street View ในส่วนย่อยของ Android ได้ วัตถุ StreetViewPanoramaFragment ทําหน้าที่เป็นคอนเทนเนอร์สําหรับภาพพาโนรามา และให้สิทธิ์เข้าถึงวัตถุ StreetViewPanorama

StreetView พาโนรามา

StreetViewPanoramaView เป็นคลาสย่อยของ Android View ช่วยให้คุณวางภาพพาโนรามาของ Street View ใน View ของ Android ได้ View แสดงพื้นที่รูปสี่เหลี่ยมผืนผ้าของหน้าจอ และเป็นองค์ประกอบพื้นฐานสําหรับแอปพลิเคชัน Android และวิดเจ็ตต่างๆ StreetViewPanoramaView เปรียบเสมือนคอนเทนเนอร์ สําหรับภาพพาโนรามา ซึ่งเผยให้เห็นฟังก์ชันการทํางานหลักผ่านออบเจ็กต์ StreetViewPanorama ซึ่งคล้ายกับ StreetViewPanoramaFragment ผู้ใช้คลาสนี้ต้องส่งต่อเมธอดอายุการใช้งานทั้งหมดของกิจกรรม (เช่น 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 อาจอยู่ในสถานที่ต่างๆ เช่น พิพิธภัณฑ์ อาคารสาธารณะ คาเฟ่ และธุรกิจต่างๆ โปรดทราบว่าอาจไม่มีภาพพาโนรามากลางแจ้งสําหรับสถานที่ที่ระบุ

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

      

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)

      

หรือจะตั้งค่าตําแหน่งตามรหัสพาโนรามาโดยส่ง panoId ไปยัง StreetViewPanorama.setPosition()

หากต้องการเรียกข้อมูลรหัสพาโนรามาสําหรับภาพพาโนรามาที่ติดกัน ให้ใช้ getLocation() เพื่อเรียกข้อมูล StreetViewPanoramaLocation ก่อน วัตถุนี้มีรหัสของพาโนรามาปัจจุบันและอาร์เรย์ของวัตถุ StreetViewPanoramaLink แต่ละวัตถุมีรหัสของภาพพาโนรามาที่เชื่อมต่อกับวัตถุปัจจุบัน

Java


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

      

Kotlin


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

      

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

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

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

Java


float zoomBy = 0.5f;
StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder()
    .zoom(streetViewPanorama.getPanoramaCamera().zoom + zoomBy)
    .tilt(streetViewPanorama.getPanoramaCamera().tilt)
    .bearing(streetViewPanorama.getPanoramaCamera().bearing)
    .build();

      

Kotlin


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

      

ตั้งค่าการวางแนวกล้อง (มุมมอง)

คุณสามารถตั้งการวางแนวกล้อง Street View ได้โดยการตั้งค่าทิศทางของเอียงและเอียงบน StreetViewPanoramaCamera

การแบก
ทิศทางที่กล้องเล็ง ระบุเป็นองศาตามเข็มนาฬิกาจากทิศเหนือจริงตามตําแหน่งกล้อง ทิศเหนือจริงคือ 0 ทิศตะวันออกคือ 90 ทิศใต้คือ 180 ทิศตะวันตกคือ 270
เอียง
แกน Y เอียงขึ้นหรือลง ช่วงคือ -90 ถึง 90 โดย -90 มีการมองลงโดยตรง, 0 อยู่ตรงกลางในแนวนอน และ 90 มองขึ้น โดยตรง ค่าความแปรปรวนนี้วัดจากระดับความสูงต่ําเริ่มต้นของกล้อง ซึ่งมักจะ อยู่ในแนวราบ (ไม่ใช่เสมอไป) เช่น รูปภาพที่ถ่ายจากบนเนินเขาอาจมีการเสนอขายเริ่มต้นแบบแนวนอน

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

Java


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

      

Kotlin


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

      

ข้อมูลโค้ดจะเอียงกล้องขึ้น 30 องศา

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

      

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

      

ทําให้การเคลื่อนไหวของกล้องเคลื่อนไหว

สร้างการเคลื่อนไหวของกล้อง แล้วโทร StreetViewPanorama.animateTo() ภาพเคลื่อนไหวจะประมาณค่าระหว่างแอตทริบิวต์กล้องปัจจุบันกับแอตทริบิวต์กล้องใหม่ หากต้องการข้ามไปยังกล้องถ่ายรูปโดยตรงโดยไม่มีภาพเคลื่อนไหว ให้กําหนดระยะเวลาเป็น 0

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

      

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)

      

รูปภาพต่อไปนี้แสดงผลลัพธ์เมื่อคุณตั้งเวลาให้ภาพเคลื่อนไหวด้านบนทํางานทุกๆ 2, 000 มิลลิวินาที โดยใช้ Handler.postDelayed()

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