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

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

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

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

หมายเหตุ: หลักสูตรนี้ใช้คำว่า "codelab" และ "ใช้ได้จริง" สลับกันไป

บทนำ

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

ในทางปฏิบัตินี้ คุณสร้างแอป Google Maps ชื่อ Wander

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

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

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

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

• ผสานรวม Google Maps ในแอปของคุณ
• แสดงแผนที่ประเภทต่างๆ
• จัดรูปแบบ Google Maps
• เพิ่มเครื่องหมายลงในแผนที่ของคุณ
• ให้ผู้ใช้วางเครื่องหมายบนจุดที่น่าสนใจ (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 ที่สอง ซึ่งก็คือคีย์สำหรับใบรับรองรุ่น โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับการรับใบรับรองรุ่นที่หัวข้อรับคีย์ 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. เปลี่ยนชื่อเป็น "ไม้กายสิทธิ์" แล้วคลิกเสร็จสิ้น

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

ไฟล์เลย์เอาต์นี้มีส่วนย่อยเดียวที่จะแสดงเต็มหน้าจอ คลาส 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 APIs และ 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 แผนที่ประกอบด้วยแผนที่หลายประเภท ได้แก่ ปกติ ไฮบริด ดาวเทียม ภูมิประเทศ และ "ไม่มี" ในงานนี้ คุณเพิ่มแถบแอปด้วยเมนูตัวเลือกที่ให้ผู้ใช้เปลี่ยนประเภทแผนที่ได้ คุณย้ายตำแหน่งเริ่มต้นของแผนที่ไปยังตำแหน่งบ้านของคุณเอง จากนั้นเพิ่มการรองรับเครื่องหมายต่างๆ ซึ่งระบุสถานที่แห่งเดียวในแผนที่และใส่ป้ายกำกับได้

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

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

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

<?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. สร้างสตับเมธอดใน 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 เพิ่ม Listener จุดที่น่าสนใจ

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

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

1. สร้างสตับเมธอดใน 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 ที่มีอยู่ได้ เช่นเดียวกับการปรับแต่งส่วนย่อยอื่นๆ แต่ในขั้นตอนนี้ คุณจะปรับแต่งรูปลักษณ์ของเนื้อหาของ 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. เรียกใช้แอป ตอนนี้เครื่องหมายที่คุณวางจะเปลี่ยนเป็นสีน้ำเงิน ซึ่งสอดคล้องกับธีมโหมดกลางคืนของแอปมากขึ้น

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

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

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

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

ติดแท็กเครื่องหมายจุดที่น่าสนใจ

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. เพิ่มส่วนย่อยลงใน FrameLayout โดยใช้ธุรกรรมส่วนย่อยด้วย FragmentManager:

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

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

mapFragment.getMapAsync(this);

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

1. สร้างสตับเมธอดใน 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 ใหม่ streetViewFragment เพิ่มธุรกรรมลงใน Back Stack เพื่อให้การกดกลับจะนำคุณกลับไปที่ SupportMapFragment และไม่ออกจากแอป:

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

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

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

7. โค้ดโซลูชัน

โค้ดโซลูชัน Wander

8. ภารกิจการเขียนโค้ด

หมายเหตุ: คุณไม่จำเป็นต้องตอบคำถามเกี่ยวกับการเขียนโค้ดทั้งหมด

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

• หากต้องการตรวจสอบว่ามีภาพ Street View ในพื้นที่หนึ่งๆ หรือไม่ ให้ใช้ Callback 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) จะปรากฏบนแผนที่ฐานพร้อมกับไอคอนของจุดที่น่าสนใจ จุดที่น่าสนใจ ได้แก่ สวนสาธารณะ โรงเรียน อาคารหน่วยงานราชการ และอื่นๆ
• นอกจากนี้ จุดที่น่าสนใจของธุรกิจ (ร้านค้า ร้านอาหาร โรงแรม และอื่นๆ) จะปรากฏโดยค่าเริ่มต้นบนแผนที่เมื่อประเภทแผนที่คือ normal
• คุณบันทึกการคลิกจุดที่น่าสนใจได้โดยใช้ OnPoiClickListener
• คุณสามารถเปลี่ยนรูปลักษณ์ขององค์ประกอบเกือบทั้งหมดของ Google Maps ได้โดยใช้วิซาร์ดการจัดรูปแบบ วิซาร์ดการจัดรูปแบบจะสร้างไฟล์ JSON ที่คุณส่งไปยัง Google Maps โดยใช้เมธอด setMapStyle()
• คุณสามารถปรับแต่งเครื่องหมายโดยการเปลี่ยนสีเริ่มต้นหรือแทนที่ไอคอนเครื่องหมายเริ่มต้นด้วยภาพที่กำหนดเอง

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

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

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

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

เอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์ Android:

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

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

• GoogleMap
• SupportMapFragment
• SupportStreetViewPanoramaFragment

11. Homework

ส่วนนี้จะแสดงการบ้านที่เป็นไปได้สำหรับนักเรียนที่กำลังทำผ่าน 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 แล้ว กล้องจะย้ายไปยังตำแหน่งบ้านหรือโรงเรียนของนักเรียน ในโค้ด ขั้นตอนนี้ควรเกิดขึ้นในเมธอด Callback onMapReady (GoogleMap googleMap)
• เครื่องหมายจะแสดงที่สถานที่ตั้งโรงเรียนของนักเรียนและสถานที่อื่น เช่น บ้านของนักเรียน
• โดยเครื่องหมาย 2 เครื่องหมายได้รับการปรับแต่งแล้ว ตัวอย่างเช่น เครื่องหมายใช้สีอื่นที่ไม่ใช่สีแดงเริ่มต้น หรือใช้ไอคอนที่กำหนดเอง

12. Codelab ถัดไป

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