Street View

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:

• StreetViewพาโนรามา BasicDemoActivity: พื้นฐานของการใช้ Street View
• StreetViewพาโนรามาEventsDemoActivity: ฟังเหตุการณ์
• StreetViewพาโนรามาการนําทางทางธรรมชาติ: การควบคุมพาโนรามาของ Street View แบบเป็นโปรแกรม
• StreetViewพาโนรามาOptionsDemoActivity: เปลี่ยน UI และตัวเลือกท่าทางสัมผัส
• StreetViewพาโนรามาViewDemoActivity: ใช้StreetViewPanoramaView (แทน Fragment)
• SplitStreetViewพาโนรามาAndMapDemoActivity: การสร้างกิจกรรมที่แสดง Street View และ Maps

ตัวอย่าง Kotlin

• StreetViewพาโนรามา BasicDemoActivity: พื้นฐานของการใช้ Street View
• StreetViewพาโนรามาEventsDemoActivity: ฟังเหตุการณ์
• StreetViewพาโนรามาการนําทางทางธรรมชาติ: การควบคุมพาโนรามาของ Street View แบบเป็นโปรแกรม
• StreetViewพาโนรามาOptionsDemoActivity: เปลี่ยน UI และตัวเลือกท่าทางสัมผัส
• StreetViewพาโนรามาViewDemoActivity: ใช้StreetViewPanoramaView (แทน Fragment)
• SplitStreetViewพาโนรามาAndMapDemoActivity: ใช้กิจกรรมที่แสดง Street View และ Maps

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

ใช้ API

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

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

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

บทสรุปมีดังนี้

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

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

      

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

      

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

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

      

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() เพื่อตั้งค่าการเรียกกลับในส่วน

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

      

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

      

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

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

      

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) และส่งผ่านในตัวเลือกที่กําหนดค่าไว้ที่กําหนดเอง

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

      

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

      

ข้อมูลเพิ่มเติมเกี่ยวกับ StreetViewพาโนรามาFragment

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 อาจอยู่ในสถานที่ต่างๆ เช่น พิพิธภัณฑ์ อาคารสาธารณะ คาเฟ่ และธุรกิจต่างๆ โปรดทราบว่าพาโนรามากลางแจ้งอาจไม่มีอยู่ในสถานที่ที่ระบุ

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

      

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 ซึ่งแต่ละรหัสจะมีรหัสของพาโนรามาที่เชื่อมต่อกับรูปปัจจุบัน

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

      

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

      

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

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

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

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

      

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 องศาไปทางซ้าย

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

      

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

      

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

float tilt = streetViewPanorama.getPanoramaCamera().tilt + 30;
tilt = (tilt > 90) ? 90 : tilt;

StreetViewPanoramaCamera previous = streetViewPanorama.getPanoramaCamera();

StreetViewPanoramaCamera camera = new StreetViewPanoramaCamera.Builder(previous)
    .tilt(tilt)
    .build();

      

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 ได้

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

      

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