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

ตัวอย่าง Java:

ตัวอย่างของ Kotlin

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

Maps SDK สําหรับ Android มีบริการ Street View สําหรับการรับและดัดแปลงภาพที่ใช้ใน Google Street View ภาพจะถูกส่งคืน เป็นพาโนรามา

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

Street View พาโนรามา

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