Android ขั้นสูง 09.1: Google Maps

1. ยินดีต้อนรับ

Codelab นี้เป็นส่วนหนึ่งของหลักสูตรการฝึกอบรมการพัฒนา Android ขั้นสูง ซึ่งพัฒนาโดยทีมฝึกอบรมของ Google Developers คุณจะได้รับประโยชน์สูงสุดจากหลักสูตรนี้หากทำตาม Codelab ตามลำดับ

ดูรายละเอียดทั้งหมดเกี่ยวกับหลักสูตรได้ที่ภาพรวมการพัฒนา Android ขั้นสูง

หมายเหตุ: หลักสูตรนี้ใช้คำว่า "โค้ดแล็บ" และ "ภาคปฏิบัติ" สลับกัน

บทนำ

การสร้างแอปด้วย Google Maps ช่วยให้คุณเพิ่มฟีเจอร์ต่างๆ ลงในแอปได้ เช่น ภาพถ่ายดาวเทียม การควบคุม UI ที่มีประสิทธิภาพ การติดตามตำแหน่ง และเครื่องหมายตำแหน่ง คุณสามารถเพิ่มคุณค่าให้กับ Google Maps มาตรฐานได้โดยการแสดงข้อมูลจากชุดข้อมูลของคุณเอง เช่น สถานที่ตั้งของพื้นที่ตกปลาหรือปีนเขาที่มีชื่อเสียง นอกจากนี้ คุณยังสร้างเกมที่เชื่อมโยงกับโลกจริงได้ด้วย เช่น Pokémon Go

ในแล็บนี้ คุณจะได้สร้างแอป Google Maps ที่ชื่อ Wander

สิ่งที่คุณควรทราบอยู่แล้ว

คุณควรคุ้นเคยกับสิ่งต่อไปนี้

• ฟังก์ชันการทำงานพื้นฐานของ Google Maps
• สิทธิ์รันไทม์
• การสร้าง การคอมไพล์ และการเรียกใช้แอปใน Android Studio
• รวมไลบรารีภายนอกไว้ในไฟล์ build.gradle

สิ่งที่คุณจะได้เรียนรู้

• ผสานรวม Google Maps ในแอป
• แสดงแผนที่ประเภทต่างๆ
• จัดรูปแบบ Google Map
• เพิ่มเครื่องหมายลงในแผนที่
• ช่วยให้ผู้ใช้ปักหมุดในจุดที่น่าสนใจ (POI) ได้
• เปิดใช้การติดตามตำแหน่ง
• เปิดใช้ Google Street View

สิ่งที่คุณต้องดำเนินการ

• รับคีย์ API จากคอนโซล Google API และลงทะเบียนคีย์กับแอป
• สร้างWanderแอปที่มี Google Maps ฝังอยู่
• เพิ่มฟีเจอร์ที่กำหนดเองลงในแอป เช่น เครื่องหมาย การจัดรูปแบบ และการติดตามตำแหน่ง
• เปิดใช้การติดตามตำแหน่งและ Street View ในแอป

2. ภาพรวมของแอป

ในภาคปฏิบัตินี้ คุณจะได้สร้างแอป Wander ซึ่งเป็น Google Maps ที่มีสไตล์ แอป Wander ช่วยให้คุณวางเครื่องหมายบนสถานที่ต่างๆ ดูตำแหน่งของคุณแบบเรียลไทม์ และดูภาพพาโนรามาของ Street View ได้

3. งานที่ 1 ตั้งค่าโปรเจ็กต์และรับคีย์ API

Google Maps API เช่นเดียวกับ Places API กำหนดให้ต้องใช้คีย์ API หากต้องการรับคีย์ API ให้ลงทะเบียนโปรเจ็กต์ในคอนโซล Google API คีย์ API จะเชื่อมโยงกับใบรับรองดิจิทัลที่ลิงก์แอปกับผู้เขียน ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ใบรับรองดิจิทัลและการลงนามในแอปได้ที่ลงนามในแอป

ในแล็บนี้ คุณจะได้ใช้คีย์ API สำหรับใบรับรองการแก้ไขข้อบกพร่อง ใบรับรองการแก้ไขข้อบกพร่องไม่ปลอดภัยตามการออกแบบ ดังที่อธิบายไว้ในลงนามในบิลด์การแก้ไขข้อบกพร่อง แอป Android ที่เผยแพร่แล้วซึ่งใช้ Google Maps API จะต้องมีคีย์ API ที่ 2 ซึ่งก็คือคีย์สำหรับใบรับรองรุ่น ดูข้อมูลเพิ่มเติมเกี่ยวกับการขอรับใบรับรองรุ่นได้ที่รับคีย์ API

Android Studio มีเทมเพลตกิจกรรม Google Maps ซึ่งสร้างโค้ดเทมเพลตที่เป็นประโยชน์ โค้ดเทมเพลตมีไฟล์ google_maps_api.xml ซึ่งมีลิงก์ที่ช่วยให้รับคีย์ API ได้ง่ายขึ้น

หมายเหตุ: หากต้องการสร้างกิจกรรมโดยไม่ใช้เทมเพลต ให้ทำตามขั้นตอนในคู่มือคีย์ API เพื่อรับคีย์ API โดยไม่ต้องใช้ลิงก์ในเทมเพลต

1.1 สร้างโปรเจ็กต์ Wander ด้วยเทมเพลต Maps

1. สร้างโปรเจ็กต์ Android Studio ใหม่
2. ตั้งชื่อแอปใหม่ว่า "Wander" ยอมรับค่าเริ่มต้นจนกว่าจะถึงหน้าเพิ่มกิจกรรม
3. เลือกเทมเพลตกิจกรรมใน Google Maps
4. ปล่อยให้ชื่อกิจกรรมและชื่อเลย์เอาต์เป็นค่าเริ่มต้น
5. เปลี่ยนชื่อเป็น "Wander" แล้วคลิกเสร็จสิ้น

Android Studio จะสร้างไฟล์เพิ่มเติมที่เกี่ยวข้องกับแผนที่หลายไฟล์ ดังนี้

google_maps_api**.xml**

คุณใช้ไฟล์การกำหนดค่านี้เพื่อจัดเก็บคีย์ API เทมเพลตจะสร้างไฟล์ google_maps_api.xml 2 ไฟล์ ได้แก่ ไฟล์สำหรับดีบักและไฟล์สำหรับเผยแพร่ ไฟล์สำหรับคีย์ API สำหรับใบรับรองการแก้ไขข้อบกพร่องจะอยู่ใน src/debug/res/values ไฟล์สำหรับคีย์ API ของใบรับรองการเผยแพร่อยู่ใน src/release/res/values ในทางปฏิบัติ เราจะใช้เฉพาะใบรับรองการแก้ไขข้อบกพร่อง

activity_maps.xml

ไฟล์เลย์เอาต์นี้มี Fragment เดียวที่ครอบคลุมทั้งหน้าจอ คลาส SupportMapFragment เป็นคลาสย่อยของคลาส Fragment คุณสามารถใส่ SupportMapFragment ในไฟล์เลย์เอาต์ได้โดยใช้แท็ก <fragment> ใน ViewGroup ใดก็ได้ โดยมีแอตทริบิวต์เพิ่มเติมดังนี้

android:name="com.google.android.gms.maps.SupportMapFragment"

MapsActivity.java

ไฟล์ MapsActivity.java จะสร้างอินสแตนซ์ของคลาส SupportMapFragment และใช้วิธี getMapAsync() ของคลาสเพื่อเตรียม Google Maps กิจกรรมที่มี SupportMapFragment ต้องใช้การเชื่อมต่อ OnMapReadyCallback และเมธอด onMapReady() ของการเชื่อมต่อดังกล่าว เมธอด getMapAsync() จะแสดงผลออบเจ็กต์ GoogleMap ซึ่งบ่งบอกว่าโหลดแผนที่แล้ว

หากคุณเรียกใช้แอปตอนนี้ แผนที่จะโหลดไม่สำเร็จ หากดูในบันทึก คุณจะเห็นข้อความที่ระบุว่าไม่ได้ตั้งค่าคีย์ API อย่างถูกต้อง ในขั้นตอนถัดไป คุณจะได้รับคีย์ API เพื่อให้แอปแสดงแผนที่

หมายเหตุ: หากทดสอบแอป Wander ในโปรแกรมจำลอง ให้ใช้รูปภาพระบบที่มี Google API และ Google Play เลือกรูปภาพที่แสดง Google Play ในคอลัมน์เป้าหมายของรายการอุปกรณ์เสมือน

1.2 รับคีย์ API

1. เปิดไฟล์ google_maps_api.xml เวอร์ชันแก้ไขข้อบกพร่อง

ไฟล์มีความคิดเห็นที่มี URL ยาว พารามิเตอร์ของ URL มีข้อมูลเฉพาะเกี่ยวกับแอปของคุณ

2. คัดลอกและวาง URL ลงในเบราว์เซอร์
3. ทำตามข้อความแจ้งเพื่อสร้างโปรเจ็กต์ในคอนโซล Google API เนื่องจากพารามิเตอร์ใน URL ที่ระบุ คอนโซล API จึงทราบว่าต้องเปิดใช้ Google Maps Android API โดยอัตโนมัติ
4. สร้างคีย์ API แล้วคลิกจำกัดคีย์เพื่อจำกัดการใช้คีย์สำหรับแอป Android คีย์ API ที่สร้างขึ้นควรขึ้นต้นด้วย AIza
5. ในgoogle_maps_api.xmlไฟล์ ให้วางคีย์ลงในสตริง google_maps_key ที่มีข้อความ YOUR_KEY_HERE
6. เรียกใช้แอป คุณมีแผนที่ฝังอยู่ในกิจกรรม โดยมีเครื่องหมายที่ตั้งอยู่ในซิดนีย์ ออสเตรเลีย (เครื่องหมายซิดนีย์เป็นส่วนหนึ่งของเทมเพลต และคุณจะเปลี่ยนได้ในภายหลัง)

หมายเหตุ: คีย์ API อาจใช้เวลาถึง 5 นาทีจึงจะมีผล

4. งานที่ 2 เพิ่มประเภทแผนที่และเครื่องหมาย

Google Maps มีแผนที่หลายประเภท ได้แก่ ปกติ ไฮบริด ดาวเทียม ภูมิประเทศ และ "ไม่มี" ในงานนี้ คุณจะเพิ่มแถบแอปที่มีเมนูตัวเลือกซึ่งช่วยให้ผู้ใช้เปลี่ยนประเภทแผนที่ได้ คุณย้ายตำแหน่งเริ่มต้นของแผนที่ไปยังตำแหน่งบ้านของคุณเอง จากนั้นเพิ่มการรองรับเครื่องหมาย ซึ่งจะระบุตำแหน่งเดียวบนแผนที่และอาจมีป้ายกำกับ

2.1 เพิ่มประเภทแผนที่

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

1. หากต้องการสร้างไฟล์ XML ของเมนูใหม่ ให้คลิกขวาที่ไดเรกทอรี res แล้วเลือกใหม่ > ไฟล์ทรัพยากร Android
2. ในกล่องโต้ตอบ ให้ตั้งชื่อไฟล์ map_options เลือก Menu เป็นประเภททรัพยากร คลิกตกลง
3. แทนที่โค้ดในไฟล์ใหม่ด้วยโค้ดต่อไปนี้เพื่อสร้างตัวเลือกแผนที่ ระบบจะละเว้นประเภทแผนที่ "ไม่มี" เนื่องจาก "ไม่มี" จะส่งผลให้ไม่มีแผนที่เลย

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
   <item android:id="@+id/normal_map"
       android:title="@string/normal_map"
       app:showAsAction="never"/>
   <item android:id="@+id/hybrid_map"
       android:title="@string/hybrid_map"
       app:showAsAction="never"/>
   <item android:id="@+id/satellite_map"
       android:title="@string/satellite_map"
       app:showAsAction="never"/>
   <item android:id="@+id/terrain_map"
       android:title="@string/terrain_map"
       app:showAsAction="never"/>
</menu>

4. สร้างทรัพยากรสตริงสำหรับแอตทริบิวต์ title
5. ในไฟล์ MapsActivity ให้เปลี่ยนคลาสเพื่อขยายคลาส AppCompatActivity แทนที่จะขยายคลาส FragmentActivity การใช้ AppCompatActivity จะแสดงแถบแอปและแสดงเมนู
6. ใน MapsActivity ให้ลบล้างเมธอด onCreateOptionsMenu() และขยายไฟล์ map_options

@Override
public boolean onCreateOptionsMenu(Menu menu) {
   MenuInflater inflater = getMenuInflater();
   inflater.inflate(R.menu.map_options, menu);
   return true;
}

7. หากต้องการเปลี่ยนประเภทแผนที่ ให้ใช้วิธี setMapType() ในออบเจ็กต์ GoogleMap โดยส่งค่าคงที่ประเภทแผนที่ค่าใดค่าหนึ่ง

แทนที่เมธอด onOptionsItemSelected() วางโค้ดต่อไปนี้เพื่อเปลี่ยนประเภทแผนที่เมื่อผู้ใช้เลือกตัวเลือกใดตัวเลือกหนึ่งในเมนู

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
       // Change the map type based on the user's selection.
       switch (item.getItemId()) {
           case R.id.normal_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
               return true;
           case R.id.hybrid_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_HYBRID);
               return true;
           case R.id.satellite_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
               return true;
           case R.id.terrain_map:
               mMap.setMapType(GoogleMap.MAP_TYPE_TERRAIN);
               return true;
           default:
               return super.onOptionsItemSelected(item);
       }
    }

8. เรียกใช้แอป ใช้เมนูในแถบแอปเพื่อเปลี่ยนประเภทแผนที่ สังเกตว่าลักษณะของแผนที่เปลี่ยนแปลงไปอย่างไร

2.2 ย้ายตำแหน่งแผนที่เริ่มต้น

โดยค่าเริ่มต้น onMapReady() การเรียกกลับจะมีโค้ดที่วางเครื่องหมายในซิดนีย์ ประเทศออสเตรเลีย ซึ่งเป็นที่ที่สร้าง Google Maps การเรียกกลับเริ่มต้นจะทำให้แผนที่เคลื่อนไหวเพื่อเลื่อนไปยังซิดนีย์ด้วย ในขั้นตอนนี้ คุณจะเลื่อนแผนที่ไปยังตำแหน่งบ้านโดยไม่ต้องวางเครื่องหมาย แล้วซูมไปยังระดับที่คุณระบุ

1. ในเมธอด onMapReady() ให้นำโค้ดที่วางเครื่องหมายในซิดนีย์และย้ายกล้องออก
2. ไปที่ www.google.com/maps ในเบราว์เซอร์ แล้วค้นหาบ้านของคุณ
3. คลิกขวาที่ตำแหน่ง แล้วเลือกที่นี่คือที่ไหน

ที่ด้านล่างของหน้าจอ หน้าต่างเล็กๆ จะปรากฏขึ้นพร้อมข้อมูลตำแหน่ง รวมถึงละติจูดและลองจิจูด

4. สร้างออบเจ็กต์ LatLng ใหม่ชื่อ home ในออบเจ็กต์ LatLng ให้ใช้พิกัดที่คุณพบจาก Google Maps ในเบราว์เซอร์
5. สร้างfloatตัวแปรชื่อ zoom และตั้งค่าตัวแปรเป็นระดับการซูมเริ่มต้นที่ต้องการ รายการต่อไปนี้จะช่วยให้คุณทราบถึงระดับรายละเอียดที่แต่ละระดับการซูมแสดง

• 1: โลก
• 5: ผืนดินขนาดใหญ่/ทวีป
• 10: เมือง
• 15: ถนน
• 20: อาคาร

6. สร้างออบเจ็กต์ CameraUpdate โดยใช้ CameraUpdateFactory.newLatLngZoom() แล้วส่งออบเจ็กต์ LatLng และตัวแปร zoom เลื่อนและซูมกล้องโดยเรียกใช้ moveCamera() ในออบเจ็กต์ GoogleMap แล้วส่งออบเจ็กต์ CameraUpdate ใหม่

mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(home, zoom));

7. เรียกใช้แอป แผนที่ควรเลื่อนไปยังบ้านและซูมเข้าสู่ระดับที่ต้องการ

2.3 เพิ่มเครื่องหมายแผนที่

Google Maps สามารถระบุตำแหน่งโดยใช้เครื่องหมายซึ่งคุณสร้างได้โดยใช้คลาส Marker เครื่องหมายเริ่มต้นใช้ไอคอน Google Maps มาตรฐาน

คุณขยายเครื่องหมายเพื่อแสดงข้อมูลตามบริบทในหน้าต่างข้อมูลได้

ในขั้นตอนนี้ คุณจะเพิ่มเครื่องหมายเมื่อผู้ใช้แตะตำแหน่งบนแผนที่ค้างไว้ จากนั้นให้เพิ่ม InfoWindow ที่แสดงพิกัดของเครื่องหมายเมื่อมีการแตะเครื่องหมาย

1. สร้าง Stub ของเมธอดใน MapsActivity ชื่อ setMapLongClick() ซึ่งรับ final GoogleMap เป็นอาร์กิวเมนต์และแสดงผล void ดังนี้

private void setMapLongClick(final GoogleMap map) {}

2. ใช้วิธี setOnMapLongClickListener() ของออบเจ็กต์ GoogleMap เพื่อวางเครื่องหมายในตำแหน่งที่ผู้ใช้แตะค้างไว้ ส่งอินสแตนซ์ใหม่ของ OnMapLongClickListener ที่ลบล้างเมธอด onMapLongClick() อาร์กิวเมนต์ขาเข้าคือออบเจ็กต์ LatLng ที่มีพิกัดของตำแหน่งที่ผู้ใช้กด

private void setMapLongClick(final GoogleMap map) {
   map.setOnMapLongClickListener(new GoogleMap.OnMapLongClickListener() {
       @Override
       public void onMapLongClick(LatLng latLng) {
       }
   });
}

3. ภายใน onMapLongClick() ให้เรียกใช้เมธอด addMarker() ส่งออบเจ็กต์ MarkerOptions ใหม่โดยตั้งค่าตำแหน่งเป็น LatLng ที่ส่งเข้ามา

map.addMarker(new MarkerOptions().position(latLng));

4. เรียกใช้ setMapLongClick() ที่ส่วนท้ายของเมธอด onMapReady() บัตร mMap
5. เรียกใช้แอป แตะแผนที่ค้างไว้เพื่อวางเครื่องหมายที่ตำแหน่ง
6. แตะเครื่องหมายเพื่อจัดกึ่งกลางบนหน้าจอ

ปุ่มการนำทางจะปรากฏที่ด้านซ้ายล่างของหน้าจอ ซึ่งช่วยให้ผู้ใช้ใช้แอป Google Maps เพื่อไปยังตำแหน่งที่ทำเครื่องหมายไว้ได้

วิธีเพิ่มหน้าต่างข้อมูลสำหรับเครื่องหมาย

1. ในออบเจ็กต์ MarkerOptions ให้ตั้งค่าฟิลด์ title และฟิลด์ snippet
2. ใน onMapLongClick() ให้ตั้งค่าช่อง title เป็น "หมุดที่วาง" ตั้งค่าฟิลด์ snippet เป็นพิกัดของสถานที่ภายในเมธอด addMarker()

map.setOnMapLongClickListener(new GoogleMap.OnMapLongClickListener() {
   @Override
   public void onMapLongClick(LatLng latLng) {
       String snippet = String.format(Locale.getDefault(),
               "Lat: %1$.5f, Long: %2$.5f",
               latLng.latitude,
               latLng.longitude);

       map.addMarker(new MarkerOptions()
               .position(latLng)
               .title(getString(R.string.dropped_pin))
               .snippet(snippet));
   }
});

3. เรียกใช้แอป แตะแผนที่ค้างไว้เพื่อวางเครื่องหมายระบุตำแหน่ง แตะเครื่องหมายเพื่อแสดงหน้าต่างข้อมูล

2.4 เพิ่มเครื่องมือฟัง POI

โดยค่าเริ่มต้น จุดที่น่าสนใจ (POI) จะปรากฏบนแผนที่พร้อมกับไอคอนที่เกี่ยวข้อง POI ได้แก่ สวนสาธารณะ โรงเรียน อาคารรัฐบาล และอื่นๆ เมื่อตั้งค่าประเภทแผนที่เป็น normal จุดที่น่าสนใจของธุรกิจจะปรากฏบนแผนที่ด้วย POI ของธุรกิจแสดงถึงธุรกิจต่างๆ เช่น ร้านค้า ร้านอาหาร และโรงแรม

ในขั้นตอนนี้ คุณจะเพิ่ม GoogleMap.OnPoiClickListener ลงในแผนที่ เครื่องมือฟังการคลิกนี้จะวางเครื่องหมายบนแผนที่ทันทีแทนที่จะรอการแตะค้างไว้ ตัวฟังการคลิกจะแสดงหน้าต่างข้อมูลที่มีชื่อจุดที่น่าสนใจด้วย

1. สร้าง Stub ของเมธอดใน MapsActivity ชื่อ setPoiClick() ซึ่งรับ final GoogleMap เป็นอาร์กิวเมนต์ และแสดงผล void ดังนี้

private void setPoiClick(final GoogleMap map) {}

2. ในเมธอด setPoiClick() ให้ตั้งค่า OnPoiClickListener ใน GoogleMap ที่ส่งเข้ามา

map.setOnPoiClickListener(new GoogleMap.OnPoiClickListener() {
   @Override
   public void onPoiClick(PointOfInterest poi) {
   }
});

3. ในonPoiClick()วิธีนี้ ให้วางเครื่องหมายที่ตำแหน่งของจุดที่น่าสนใจ ตั้งชื่อเป็นชื่อของจุดที่น่าสนใจ บันทึกผลลัพธ์ลงในตัวแปรที่ชื่อ poiMarker

public void onPoiClick(PointOfInterest poi) {
   Marker poiMarker = mMap.addMarker(new MarkerOptions()
       .position(poi.latLng)
       .title(poi.name);
}

4. โทรหา showInfoWindow() บน poiMarker เพื่อแสดงหน้าต่างข้อมูลทันที

poiMarker.showInfoWindow();

5. โทรหา setPoiClick() ในช่วงท้ายของ onMapReady() บัตร mMap
6. เรียกใช้แอปและค้นหาสถานที่น่าสนใจ เช่น สวนสาธารณะ แตะจุดที่น่าสนใจเพื่อวางเครื่องหมายและแสดงชื่อของจุดที่น่าสนใจในหน้าต่างข้อมูล

5. งานที่ 3 จัดรูปแบบแผนที่

คุณปรับแต่ง Google Maps ได้หลายวิธีเพื่อให้แผนที่มีรูปลักษณ์และให้ความรู้สึกที่ไม่ซ้ำใคร

คุณปรับแต่งออบเจ็กต์ MapFragment ได้โดยใช้แอตทริบิวต์ XML ที่มีอยู่ เช่นเดียวกับการปรับแต่ง Fragment อื่นๆ อย่างไรก็ตาม ในขั้นตอนนี้ คุณจะปรับแต่งรูปลักษณ์ของเนื้อหาของ MapFragment โดยใช้วิธีการในออบเจ็กต์ GoogleMap คุณใช้วิซาร์ดการจัดรูปแบบออนไลน์เพื่อเพิ่มรูปแบบลงในแผนที่และปรับแต่งเครื่องหมาย นอกจากนี้ คุณยังเพิ่มGroundOverlayลงในตำแหน่งบ้านซึ่งจะปรับขนาดและหมุนตามแผนที่ได้ด้วย

3.1 เพิ่มสไตล์ลงในแผนที่

หากต้องการสร้างสไตล์ที่กำหนดเองสำหรับแผนที่ ให้สร้างไฟล์ JSON ที่ระบุวิธีแสดงองค์ประกอบในแผนที่ คุณไม่จำเป็นต้องสร้างไฟล์ JSON นี้ด้วยตนเอง เนื่องจาก Google มีวิซาร์ดการจัดรูปแบบที่จะสร้าง JSON ให้คุณหลังจากที่คุณจัดรูปแบบแผนที่ด้วยภาพ ในแบบฝึกหัดนี้ คุณจะจัดรูปแบบแผนที่สำหรับ "โหมดกลางคืน" ซึ่งหมายความว่าแผนที่จะใช้สีที่หรี่แสงและคอนทราสต์ต่ำสำหรับการใช้งานในเวลากลางคืน

หมายเหตุ: การจัดรูปแบบใช้ได้กับแผนที่ที่ใช้normalประเภทแผนที่เท่านั้น

1. ไปที่ https://mapstyle.withgoogle.com/ ในเบราว์เซอร์
2. เลือกสร้างสไตล์
3. เลือกธีมกลางคืน
4. คลิกตัวเลือกเพิ่มเติมที่ด้านล่างของเมนู
5. ที่ด้านล่างของรายการประเภทฟีเจอร์ ให้เลือกน้ำ > เติม เปลี่ยนสีน้ำเป็นสีน้ำเงินเข้ม (เช่น #160064)
6. คลิกเสร็จสิ้น คัดลอกโค้ด JSON จากหน้าต่างป๊อปอัปที่ได้
7. ใน Android Studio ให้สร้างไดเรกทอรีทรัพยากรชื่อ raw ในไดเรกทอรี res สร้างไฟล์ใน res/raw ชื่อ map_style.json
8. วางโค้ด JSON ลงในไฟล์ทรัพยากรใหม่
9. หากต้องการตั้งค่ารูปแบบ JSON ให้กับแผนที่ ให้เรียกใช้ setMapStyle() ในออบเจ็กต์ GoogleMap ส่งออบเจ็กต์ MapStyleOptions ซึ่งจะโหลดไฟล์ JSON เมธอด setMapStyle() จะแสดงผลบูลีนที่ระบุความสำเร็จของการจัดรูปแบบ หากโหลดไฟล์ไม่ได้ เมธอดจะแสดง Resources.NotFoundException

คัดลอกโค้ดต่อไปนี้ลงในเมธอด onMapReady() เพื่อจัดรูปแบบแผนที่ คุณอาจต้องสร้างTAGสตริงสำหรับคำสั่งบันทึก:

     try {
        // Customize the styling of the base map using a JSON object defined
        // in a raw resource file.
        boolean success = googleMap.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
                   this, R.raw.map_style));

        if (!success) {
            Log.e(TAG, "Style parsing failed.");
        }
     } catch (Resources.NotFoundException e) {
        Log.e(TAG, "Can't find style. Error: ", e);
     }

10. เรียกใช้แอปของคุณ รูปแบบใหม่ควรปรากฏเมื่อแผนที่อยู่ในโหมด normal

3.2 จัดรูปแบบเครื่องหมาย

คุณปรับแต่งแผนที่เพิ่มเติมได้โดยการจัดรูปแบบเครื่องหมายแผนที่ ในขั้นตอนนี้ คุณจะเปลี่ยนเครื่องหมายสีแดงเริ่มต้นให้เข้ากับรูปแบบสีของโหมดกลางคืน

1. ในonMapLongClick()วิธี ให้เพิ่มบรรทัดโค้ดต่อไปนี้ลงในตัวสร้าง MarkerOptions() เพื่อใช้เครื่องหมายเริ่มต้น แต่เปลี่ยนสีเป็นสีน้ำเงิน

.icon(BitmapDescriptorFactory.defaultMarker
       (BitmapDescriptorFactory.HUE_BLUE))

2. เรียกใช้แอป ตอนนี้เครื่องหมายที่คุณวางจะมีสีน้ำเงินเข้ม ซึ่งสอดคล้องกับธีมโหมดกลางคืนของแอปมากขึ้น

โปรดทราบว่าเครื่องหมาย POI ยังคงเป็นสีแดง เนื่องจากคุณไม่ได้เพิ่มรูปแบบให้กับเมธอด onPoiClick()

3.3 เพิ่มการวางซ้อน

วิธีหนึ่งในการปรับแต่ง Google Maps คือการวาดทับแผนที่ เทคนิคนี้มีประโยชน์หากคุณต้องการไฮไลต์สถานที่ประเภทใดประเภทหนึ่ง เช่น จุดตกปลายอดนิยม ระบบรองรับโฆษณาซ้อนทับ 3 ประเภท ได้แก่

• รูปร่าง: คุณสามารถเพิ่มเส้นหลายเส้น รูปหลายเหลี่ยม และวงกลมลงในแผนที่ได้
• TileOverlay ออบเจ็กต์: การวางซ้อนของชิ้นส่วนแผนที่จะกำหนดชุดรูปภาพที่เพิ่มไว้ด้านบนชิ้นส่วนแผนที่ฐาน การซ้อนทับไทล์มีประโยชน์เมื่อคุณต้องการเพิ่มภาพจำนวนมากในแผนที่ การซ้อนทับไทล์ทั่วไปครอบคลุมพื้นที่ทางภูมิศาสตร์ขนาดใหญ่
• ออบเจ็กต์ GroundOverlay: การวางซ้อนพื้นคือรูปภาพที่ตรึงไว้กับแผนที่ การวางซ้อนพื้นดินจะวางแนวให้สอดคล้องกับพื้นผิวโลก ไม่ใช่หน้าจอ การหมุน เอียง หรือซูมแผนที่จะเปลี่ยนการวางแนวของรูปภาพ การวางซ้อนพื้นมีประโยชน์เมื่อคุณต้องการแก้ไขรูปภาพเดียวในพื้นที่หนึ่งบนแผนที่

ในขั้นตอนนี้ คุณจะเพิ่มภาพซ้อนทับพื้นในรูปทรงของหุ่นยนต์ Android ไปยังตำแหน่งบ้าน

1. ดาวน์โหลดรูปภาพ Android นี้และบันทึกลงในโฟลเดอร์ res/drawable
2. ใน onMapReady() หลังจากเรียกให้ย้ายกล้องไปยังตำแหน่งเริ่มต้นแล้ว ให้สร้างออบเจ็กต์ GroundOverlayOptions กำหนดออบเจ็กต์ให้กับตัวแปรที่ชื่อ homeOverlay

GroundOverlayOptions homeOverlay = new GroundOverlayOptions();

3. ใช้เมธอด BitmapDescriptorFactory.fromResource() เพื่อสร้างออบเจ็กต์ BitmapDescriptor จากรูปภาพด้านบน ส่งออบเจ็กต์ไปยังเมธอด image() ของออบเจ็กต์ GroundOverlayOptions

GroundOverlayOptions homeOverlay = new GroundOverlayOptions()
    .image(BitmapDescriptorFactory.fromResource(R.drawable.android));

4. ตั้งค่าพร็อพเพอร์ตี้ position สำหรับออบเจ็กต์ GroundOverlayOptions โดยเรียกใช้เมธอด position() ส่งออบเจ็กต์ home LatLng และ float สำหรับความกว้างเป็นเมตรของภาพซ้อนทับที่ต้องการ สำหรับตัวอย่างนี้ ความกว้าง 100 ม. จะใช้งานได้ดี

GroundOverlayOptions homeOverlay = new GroundOverlayOptions()
     .image(BitmapDescriptorFactory.fromResource(R.drawable.android))
       .position(home, 100);

5. เรียกใช้ addGroundOverlay() ในออบเจ็กต์ GoogleMap ส่งออบเจ็กต์ GroundOverlayOptions ของคุณ

mMap.addGroundOverlay(homeOverlay);

6. เรียกใช้แอป ซูมเข้าตำแหน่งบ้านของคุณ แล้วคุณจะเห็นรูปภาพ Android เป็นภาพซ้อนทับ

6. งานที่ 4 เปิดใช้การติดตามตำแหน่งและ Street View

ผู้ใช้มักใช้ Google Maps เพื่อดูตำแหน่งปัจจุบัน และคุณสามารถรับตำแหน่งอุปกรณ์ได้โดยใช้ Location Services API หากต้องการแสดงตำแหน่งอุปกรณ์บนแผนที่โดยไม่ต้องใช้ข้อมูล Location เพิ่มเติม คุณสามารถใช้เลเยอร์ข้อมูลตำแหน่งได้

เลเยอร์ข้อมูลตำแหน่งจะเพิ่มปุ่มตำแหน่งของฉันที่ด้านขวาบนของแผนที่ เมื่อผู้ใช้แตะปุ่ม แผนที่จะอยู่ตรงกลางตำแหน่งของอุปกรณ์ ตำแหน่งจะแสดงเป็นจุดสีน้ำเงินหากอุปกรณ์อยู่กับที่ และเป็นเครื่องหมายเชฟรอนสีน้ำเงินหากอุปกรณ์กำลังเคลื่อนที่

คุณให้ข้อมูลเพิ่มเติมเกี่ยวกับสถานที่ได้โดยใช้ Google Street View ซึ่งเป็นภาพพาโนรามาที่นำทางได้ของสถานที่ที่กำหนด

ในงานนี้ คุณจะเปิดใช้เลเยอร์ข้อมูลตำแหน่งและ Street View เพื่อให้เมื่อผู้ใช้แตะหน้าต่างข้อมูลสำหรับเครื่องหมาย POI แผนที่จะเข้าสู่โหมด Street View

4.1 เปิดใช้การติดตามตำแหน่ง

การเปิดใช้การติดตามตำแหน่งใน Google Maps ต้องใช้โค้ดเพียงบรรทัดเดียว อย่างไรก็ตาม คุณต้องตรวจสอบว่าผู้ใช้ได้ให้สิทธิ์เข้าถึงตำแหน่ง (โดยใช้โมเดลสิทธิ์รันไทม์)

ในขั้นตอนนี้ คุณจะขอสิทธิ์เข้าถึงตำแหน่งและเปิดใช้การติดตามตำแหน่ง

1. ในไฟล์ AndroidManifest.xml ให้ตรวจสอบว่ามีสิทธิ์ FINE_LOCATION อยู่แล้ว Android Studio แทรกสิทธิ์นี้เมื่อคุณเลือกเทมเพลต Google Maps
2. หากต้องการเปิดใช้การติดตามตำแหน่งในแอป ให้สร้างเมธอดใน MapsActivity ที่ชื่อ enableMyLocation() ซึ่งไม่ต้องใช้อาร์กิวเมนต์และไม่แสดงผลสิ่งใด
3. กำหนดenableMyLocation() ตรวจสอบสิทธิ์ ACCESS_FINE_LOCATION หากได้รับสิทธิ์ ให้เปิดใช้เลเยอร์ตำแหน่ง หรือขอสิทธิ์โดยทำดังนี้

private void enableMyLocation() {
   if (ContextCompat.checkSelfPermission(this,
           Manifest.permission.ACCESS_FINE_LOCATION)
           == PackageManager.PERMISSION_GRANTED) {
       mMap.setMyLocationEnabled(true);
   } else {
       ActivityCompat.requestPermissions(this, new String[]
                       {Manifest.permission.ACCESS_FINE_LOCATION},
               REQUEST_LOCATION_PERMISSION);
   }
}

4. เรียกใช้ enableMyLocation() จากการเรียกกลับ onMapReady() เพื่อเปิดใช้เลเยอร์ตำแหน่ง
5. แทนที่เมธอด onRequestPermissionsResult() หากได้รับสิทธิ์ ให้โทรหา enableMyLocation()

@Override
public void onRequestPermissionsResult(int requestCode,
       @NonNull String[] permissions,
       @NonNull int[] grantResults) {
   // Check if location permissions are granted and if so enable the
   // location data layer.
   switch (requestCode) {
       case REQUEST_LOCATION_PERMISSION:
           if (grantResults.length > 0
                   && grantResults[0]
                   == PackageManager.PERMISSION_GRANTED) {
               enableMyLocation();
               break;
           }
   }
}

6. เรียกใช้แอป ตอนนี้มุมขวาบนจะมีปุ่มตำแหน่งของฉัน ซึ่งจะแสดงตำแหน่งปัจจุบันของอุปกรณ์

หมายเหตุ: เมื่อเรียกใช้แอปในโปรแกรมจำลอง ตำแหน่งอาจไม่พร้อมใช้งาน หากคุณไม่ได้ใช้การตั้งค่าโปรแกรมจำลองเพื่อตั้งค่าตำแหน่ง ปุ่มตำแหน่งจะใช้งานไม่ได้

4.2 เปิดใช้ Street View

Google Maps มี Street View ซึ่งเป็นมุมมองพาโนรามาของสถานที่ที่มีตัวควบคุมสำหรับการนำทางไปตามเส้นทางที่กำหนด Street View ไม่ได้ครอบคลุมทั่วโลก

ในขั้นตอนนี้ คุณจะเปิดใช้ภาพพาโนรามา Street View ที่จะเปิดใช้งานเมื่อผู้ใช้แตะหน้าต่างข้อมูลของจุดที่น่าสนใจ คุณต้องดำเนินการ 2 อย่างต่อไปนี้

1. แยกเครื่องหมาย POI ออกจากเครื่องหมายอื่นๆ เนื่องจากคุณต้องการให้ฟังก์ชันการทำงานของแอปทำงานเฉพาะในเครื่องหมาย POI ด้วยวิธีนี้ คุณจะเริ่ม Street View ได้เมื่อผู้ใช้แตะหน้าต่างข้อมูลจุดที่น่าสนใจ แต่จะเริ่มไม่ได้เมื่อผู้ใช้แตะเครื่องหมายประเภทอื่นๆ

คลาส Marker มีเมธอด setTag() ที่ช่วยให้คุณแนบข้อมูลได้ (ข้อมูลอาจเป็นอะไรก็ได้ที่ขยายจาก Object) คุณจะตั้งค่าแท็กในเครื่องหมายที่สร้างขึ้นเมื่อผู้ใช้คลิกจุดที่น่าสนใจ

2. เมื่อผู้ใช้แตะหน้าต่างข้อมูลที่ติดแท็กใน OnInfoWindowClickListener ให้แทนที่ MapFragment ด้วย StreetViewPanoramaFragment (โค้ดด้านล่างใช้ SupportMapFragment และ SupportStreetViewPanoramaFragment เพื่อรองรับ Android เวอร์ชันที่ต่ำกว่า API 12)

หากมีการเปลี่ยนแปลง Fragment ใดก็ตามในขณะรันไทม์ คุณต้องเพิ่ม Fragment นั้นในคลาส Activity ที่มี Fragment นั้นอยู่ ไม่ใช่เพิ่มแบบคงที่ใน XML

ติดแท็กเครื่องหมาย POI

1. ในonPoiClick()ติดต่อกลับ ให้โทรหา setTag() ที่หมายเลข poiMarker ส่งสตริงใดก็ได้

poiMarker.setTag("poi");

แทนที่ SupportMapFragment แบบคงที่ด้วยอินสแตนซ์รันไทม์

1. เปิด activity_maps.xml แล้วเปลี่ยนองค์ประกอบเป็นเลย์เอาต์เฟรมที่จะทำหน้าที่เป็นคอนเทนเนอร์สำหรับ Fragment

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/fragment_container"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

2. ใน onCreate() ใน MapsActivity ให้นำโค้ดที่ค้นหา SupportMapFragment ตามรหัสออก เนื่องจากไม่มี SupportMapFragment แบบคงที่ใน XML อีกต่อไป แต่ให้สร้างอินสแตนซ์รันไทม์ใหม่ของ SupportMapFragment โดยเรียกใช้ SupportMapFragment.newInstance() แทน

SupportMapFragment mapFragment = SupportMapFragment.newInstance();

3. เพิ่ม Fragment ไปยัง FrameLayout โดยใช้ธุรกรรม Fragment ที่มี FragmentManager ดังนี้

getSupportFragmentManager().beginTransaction()
       .add(R.id.fragment_container, mapFragment).commit();

4. เก็บบรรทัดโค้ดที่ทริกเกอร์การโหลดแผนที่แบบไม่พร้อมกันไว้

mapFragment.getMapAsync(this);

ตั้งค่า OnInfoWindowClickListener และตรวจสอบแท็กเครื่องหมาย

1. สร้าง Stub ของเมธอดใน MapsActivity ชื่อ setInfoWindowClickToPanorama() ที่รับ GoogleMap เป็นอาร์กิวเมนต์และแสดงผล void ดังนี้

private void setInfoWindowClickToPanorama(GoogleMap map) {}

2. ตั้งค่า OnInfoWindowClickListener เป็น GoogleMap โดยทำดังนี้

map.setOnInfoWindowClickListener(
       new GoogleMap.OnInfoWindowClickListener() {
           @Override
           public void onInfoWindowClick(Marker marker) {
           }
       });

3. ในonInfoWindowClick() ให้ตรวจสอบว่าเครื่องหมายมีสตริงแท็กที่คุณตั้งค่าไว้ในonPoiClick() หรือไม่

if (marker.getTag() == "poi") {}

แทนที่ SupportMapFragment ด้วย SupportStreetViewPanoramaFragment

1. ในกรณีที่เครื่องหมายมีแท็ก ให้ระบุตำแหน่งสำหรับภาพพาโนรามา Street View โดยใช้ออบเจ็กต์ StreetViewPanoramaOptions ตั้งค่าพร็อพเพอร์ตี้ position ของออบเจ็กต์เป็นตำแหน่งของเครื่องหมายที่ส่งเข้ามา

StreetViewPanoramaOptions options =
       new StreetViewPanoramaOptions().position(
               marker.getPosition());

2. สร้างอินสแตนซ์ใหม่ของ SupportStreetViewPanoramaFragment โดยส่งออบเจ็กต์ options ที่คุณสร้างขึ้น

SupportStreetViewPanoramaFragment streetViewFragment
       = SupportStreetViewPanoramaFragment
       .newInstance(options);

3. เริ่มธุรกรรม Fragment แทนที่เนื้อหาของคอนเทนเนอร์ Fragment ด้วย Fragment ใหม่ streetViewFragment เพิ่มธุรกรรมลงในสแต็กย้อนกลับ เพื่อให้การกดปุ่มย้อนกลับนำทางกลับไปที่ SupportMapFragment และไม่ทำให้แอปออก

getSupportFragmentManager().beginTransaction()
       .replace(R.id.fragment_container,
               streetViewFragment)
       .addToBackStack(null).commit();

หมายเหตุ: อาร์กิวเมนต์สำหรับเมธอด addToBackStack() คือชื่อที่ไม่บังคับ ชื่อนี้ใช้เพื่อจัดการสถานะของสแต็กย้อนกลับ ในกรณีนี้ ระบบจะไม่ใช้ชื่ออีก คุณจึงส่ง null ได้

4. โทรหา setInfoWindowClickToPanorama(mMap) ใน onMapReady() หลังจากโทรหา setPoiClick().
5. เรียกใช้แอป ซูมเข้าไปในเมืองที่มีพื้นที่ให้บริการ Street View เช่น เมาน์เทนวิว (ที่ตั้งสำนักงานใหญ่ของ Google) แล้วค้นหาสถานที่น่าสนใจ เช่น สวนสาธารณะ แตะจุดที่น่าสนใจเพื่อวางเครื่องหมายและแสดงหน้าต่างข้อมูล แตะหน้าต่างข้อมูลเพื่อเข้าสู่โหมด Street View สำหรับตำแหน่งของเครื่องหมาย กดปุ่มย้อนกลับเพื่อกลับไปที่ Fragment ของแผนที่

7. รหัสโซลูชัน

Wander รหัสโซลูชัน

8. การทดสอบการเขียนโค้ด

หมายเหตุ: การท้าทายด้านการเขียนโค้ดทั้งหมดเป็นแบบไม่บังคับ

ความท้าทาย: หากแตะหน้าต่างข้อมูลของจุดที่น่าสนใจในสถานที่ที่ไม่มีภาพ Street View คุณจะเห็นหน้าจอสีดำ

• หากต้องการตรวจสอบว่า Street View พร้อมให้บริการในพื้นที่ใดหรือไม่ ให้ใช้การเรียกกลับ OnStreetViewPanomaraReady ร่วมกับ StreetViewPanorama.OnStreetViewPanoramaChangeListener
• หากไม่มี Street View ในพื้นที่ที่เลือก ให้กลับไปที่ส่วนแผนที่และแสดงข้อผิดพลาด

9. สรุป

• หากต้องการใช้ Maps API คุณต้องมีคีย์ API จากคอนโซล Google API
• ใน Android Studio การใช้เทมเพลตกิจกรรม Google Maps จะสร้าง Activity ที่มี SupportMapFragment รายการเดียวในเลย์เอาต์ของแอป เทมเพลตยังเพิ่ม ACCESS_FINE_PERMISSION ลงในไฟล์ Manifest ของแอปด้วย รวมถึงใช้ OnMapReadyCallback ในกิจกรรม และลบล้างเมธอด onMapReady() ที่จำเป็น

หากต้องการเปลี่ยนประเภทแผนที่ของ GoogleMap ในรันไทม์ ให้ใช้วิธีการ GoogleMap.setMapType() Google Maps อาจเป็นแผนที่ประเภทใดประเภทหนึ่งต่อไปนี้

• ปกติ: แผนที่ถนนทั่วไป แสดงถนน สิ่งก่อสร้างบางอย่างที่มนุษย์สร้างขึ้น และลักษณะทางธรรมชาติที่สำคัญ เช่น แม่น้ำ นอกจากนี้ คุณยังเห็นป้ายกำกับถนนและฟีเจอร์ด้วย
• ไฮบริด: ข้อมูลภาพถ่ายจากดาวเทียมที่มีการเพิ่มแผนที่ถนน นอกจากนี้ คุณยังเห็นป้ายกำกับถนนและฟีเจอร์ด้วย
• ดาวเทียม: ข้อมูลภาพถ่าย ป้ายกำกับถนนและฟีเจอร์จะไม่ปรากฏ
• ภูมิประเทศ: ข้อมูลภูมิประเทศ แผนที่ประกอบด้วยสี เส้นชั้นความสูงและป้ายกำกับ รวมถึงการแรเงาตามมุมมอง นอกจากนี้ คุณยังเห็นถนนและป้ายกำกับบางรายการด้วย
• ไม่มี**:** ไม่มีแผนที่

เกี่ยวกับ Google Maps

• เครื่องหมายคือตัวบ่งชี้สำหรับสถานที่ตั้งทางภูมิศาสตร์ที่เฉพาะเจาะจง
• เมื่อแตะ เครื่องหมายจะมีลักษณะการทำงานเริ่มต้นคือแสดงหน้าต่างข้อมูลพร้อมข้อมูลเกี่ยวกับสถานที่
• โดยค่าเริ่มต้น จุดที่น่าสนใจ (POI) จะปรากฏบนแผนที่ฐานพร้อมกับไอคอนที่เกี่ยวข้อง POI ได้แก่ สวนสาธารณะ โรงเรียน อาคารรัฐบาล และอื่นๆ
• นอกจากนี้ จุดที่น่าสนใจสำหรับธุรกิจ (ร้านค้า ร้านอาหาร โรงแรม และอื่นๆ) จะปรากฏบนแผนที่โดยค่าเริ่มต้นเมื่อประเภทแผนที่เป็น normal
• คุณบันทึกการคลิกจุดที่น่าสนใจได้โดยใช้ OnPoiClickListener
• คุณเปลี่ยนลักษณะที่ปรากฏขององค์ประกอบเกือบทั้งหมดของ Google Maps ได้โดยใช้วิซาร์ดการจัดรูปแบบ ตัวช่วยจัดรูปแบบจะสร้างไฟล์ JSON ที่คุณส่งไปยัง Google Maps โดยใช้เมธอด setMapStyle()
• คุณปรับแต่งเครื่องหมายได้โดยเปลี่ยนสีเริ่มต้น หรือแทนที่ไอคอนเครื่องหมายเริ่มต้นด้วยรูปภาพที่กำหนดเอง

ข้อมูลอื่นๆ ที่สำคัญมีดังนี้

• ใช้ภาพซ้อนทับบนพื้นเพื่อตรึงรูปภาพไว้กับสถานที่ตั้งทางภูมิศาสตร์
• ใช้ออบเจ็กต์ GroundOverlayOptions เพื่อระบุรูปภาพ ขนาดของรูปภาพเป็นเมตร และตำแหน่งของรูปภาพ ส่งออบเจ็กต์นี้ไปยังเมธอด GoogleMap.addGroundOverlay() เพื่อตั้งค่าการวางซ้อนในแผนที่
• หากแอปมีสิทธิ์ ACCESS_FINE_LOCATION คุณจะเปิดใช้การติดตามตำแหน่งได้โดยใช้วิธี mMap.setMyLocationEnabled(true)
• Google Street View ให้มุมมองพาโนรามา 360 องศาจากถนนที่กำหนดทั่วทั้งพื้นที่ครอบคลุม
• ใช้วิธี StreetViewPanoramaFragment.newInstance() เพื่อสร้าง Fragment ของ Street View ใหม่
• หากต้องการระบุตัวเลือกสำหรับมุมมอง ให้ใช้ออบเจ็กต์ StreetViewPanoramaOptions ส่งออบเจ็กต์ไปยังเมธอด newInstance()

10. ดูข้อมูลเพิ่มเติม

เอกสารประกอบแนวคิดที่เกี่ยวข้องอยู่ใน 9.1: Google Maps API

เอกสารประกอบสำหรับนักพัฒนาแอป Android:

• การเริ่มต้นใช้งาน Google Maps Android API
• การเพิ่มแผนที่พร้อมเครื่องหมาย
• ออบเจ็กต์แผนที่
• การเพิ่มแผนที่ที่มีการจัดรูปแบบ
• Street View
• การวางซ้อนพื้น

เอกสารอ้างอิง:

• GoogleMap
• SupportMapFragment
• SupportStreetViewPanoramaFragment

11. การบ้าน

ส่วนนี้แสดงรายการการบ้านที่เป็นไปได้สำหรับนักเรียนที่กำลังทำ Codelab นี้เป็นส่วนหนึ่งของหลักสูตรที่สอนโดยผู้สอน ผู้สอนมีหน้าที่ดำเนินการต่อไปนี้

• มอบหมายการบ้านหากจำเป็น
• สื่อสารกับนักเรียนเกี่ยวกับวิธีส่งงานที่ได้รับมอบหมาย
• ให้คะแนนงานการบ้าน

ผู้สอนสามารถใช้คำแนะนำเหล่านี้ได้มากน้อยตามที่ต้องการ และควรสามารถมอบหมายการบ้านอื่นๆ ที่เห็นว่าเหมาะสมได้

หากคุณกำลังทำ Codelab นี้ด้วยตนเอง โปรดใช้แบบฝึกหัดเหล่านี้เพื่อทดสอบความรู้ของคุณ

สร้างและเรียกใช้แอป

1. สร้างแอปใหม่ที่ใช้เทมเพลตกิจกรรม Google Maps ซึ่งจะโหลด Google Maps เมื่อเปิดแอป
2. เมื่อโหลด Google Maps แล้ว ให้เลื่อนกล้องไปยังตำแหน่งโรงเรียน ตำแหน่งบ้าน หรือตำแหน่งอื่นๆ ที่มีความหมายสำหรับคุณ
3. เพิ่มเครื่องหมาย 2 อันลงในแผนที่ โดยอันหนึ่งอยู่ที่ตำแหน่งโรงเรียน และอีกอันอยู่ที่บ้านหรือตำแหน่งอื่นๆ ที่มีความหมาย
4. ปรับแต่งไอคอนเครื่องหมายโดยเปลี่ยนสีเริ่มต้นหรือแทนที่ไอคอนเครื่องหมายเริ่มต้นด้วยรูปภาพที่กำหนดเอง

เคล็ดลับ: ดูเอกสารประกอบของ onMapReady (GoogleMap googleMap)

ตอบคำถามต่อไปนี้

คำถามที่ 1

ระบบจะเรียกใช้เมธอดใดเมื่อโหลดแผนที่และพร้อมใช้งานในแอป

• onMapReady ( GoogleMap googleMap)
• onMapLoaded ( GoogleMap googleMap)
• onMapCreate ( GoogleMap googleMap)
• onMapInitialize ( GoogleMap googleMap)

คำถามที่ 2

คุณใช้คอมโพเนนต์ Android ใดเพื่อรวม Google Maps ไว้ในแอปได้

• MapView และ MapFragment
• MapFragment และ MapActivity
• MapView และ MapActivity
• เฉพาะ MapFragment

คำถามที่ 3

Google Maps Android API มีแผนที่ประเภทใดบ้าง

• ปกติ ไฮบริด ภูมิประเทศ ดาวเทียม และแผนที่ถนน
• ปกติ ไฮบริด ภูมิประเทศ ดาวเทียม และ "ไม่มี"
• ไฮบริด ภูมิประเทศ ดาวเทียม แผนที่ถนน และ "ไม่มี"
• ปกติ ภูมิประเทศ ดาวเทียม แผนที่รูปภาพ และ "ไม่มี"

คำถามที่ 4

คุณใช้อินเทอร์เฟซใดเพื่อเพิ่มฟังก์ชันการทำงานเมื่อคลิกลงในจุดที่น่าสนใจ (POI)

• GoogleMap.OnPoiListener
• GoogleMap.OnPoiClickListener
• GoogleMap.OnPoiClick
• GoogleMap.OnPoiClicked

ส่งแอปเพื่อรับการให้คะแนน

คำแนะนำสำหรับผู้ให้คะแนน

ตรวจสอบว่าแอปมีฟีเจอร์ต่อไปนี้

• เมื่อเปิดแอป Google Maps จะแสดงอย่างถูกต้อง ซึ่งบ่งชี้ว่าระบบสร้างคีย์ API อย่างถูกต้อง
• หลังจาก Google Maps โหลดแล้ว กล้องจะย้ายไปยังตำแหน่งบ้านหรือโรงเรียนของนักเรียน ในโค้ด ขั้นตอนนี้ควรเกิดขึ้นในเมธอดเรียกกลับ onMapReady (GoogleMap googleMap)
• เครื่องหมายจะแสดงที่ตำแหน่งโรงเรียนของนักเรียนและตำแหน่งอื่นๆ เช่น บ้านของนักเรียน
• เครื่องหมายทั้ง 2 รายการได้รับการปรับแต่ง เช่น เครื่องหมายใช้สีอื่นที่ไม่ใช่สีแดงเริ่มต้น หรือใช้ไอคอนที่กำหนดเอง

12. Codelab ถัดไป

หากต้องการดู Codelab ทั้งหมดในหลักสูตรการฝึกอบรมการพัฒนา Android ขั้นสูง ให้ไปที่หน้า Landing Page ของ Codelab การพัฒนา Android ขั้นสูง