หัวข้อนี้อธิบายวิธีกำหนดค่าแผนที่ที่เพิ่มลงในแอป Android โดยใช้ Maps SDK สำหรับ Android
ภาพรวม
หลังจากเพิ่มแผนที่ลงในแอปแล้ว คุณจะกำหนดการตั้งค่ารันไทม์เริ่มต้นและรันไทม์ของแผนที่ได้ การตั้งค่าเริ่มต้นต้องได้รับการกำหนดค่าโดยอิงจากว่าคุณเพิ่มคอนเทนเนอร์แผนที่ (SupportMapFragment
หรือ MapView
) แบบคงที่หรือแบบไดนามิก ถ้าเพิ่มคอนเทนเนอร์แผนที่แบบคงที่แล้ว คุณสามารถกำหนดค่าการตั้งค่าแผนที่เริ่มต้นในไฟล์เค้าโครงได้
หากมีการเพิ่มแบบไดนามิก คุณจะกําหนดการตั้งค่าเริ่มต้นใน Callback ของ OnCreate
ได้ด้วยออบเจ็กต์ GoogleMapOptions
ดูรายละเอียดเกี่ยวกับการเพิ่มคอนเทนเนอร์แผนที่ได้ที่เพิ่มแผนที่
การตั้งค่าแผนที่เบื้องต้นมีดังนี้
- ตำแหน่งของกล้อง ซึ่งรวมถึงตำแหน่ง การซูม การเอียง และการเอียง ดูกล้องและมุมมองสำหรับรายละเอียดเกี่ยวกับตำแหน่งของกล้อง
- ประเภทแผนที่
- คอมโพเนนต์ UI ที่จะแสดง เช่น ปุ่มซูมและเข็มทิศ
- ท่าทางสัมผัสเพื่อเปิดใช้
- เปิดใช้โหมด Lite หรือไม่
ขณะรันไทม์ คุณจะกำหนดการตั้งค่าเหล่านี้และการตั้งค่าการเพิ่มบางอย่างได้โดยการอัปเดตออบเจ็กต์ GoogleMap
ใน Callback onMapReady
การตั้งค่าเพิ่มเติมจะกำหนดผ่านเมธอดของคลาส GoogleMap
เช่น วิธีที่กำหนดค่าเลเยอร์การจราจรและระยะห่างจากขอบของแผนที่
ตัวอย่าง
ในโค้ดตัวอย่างด้านล่างและภาพหน้าจอด้านบน กำหนดค่าแผนที่ด้วยการตั้งค่าต่อไปนี้
การตั้งค่าเริ่มต้นจะได้รับการกำหนดค่าในไฟล์เลย์เอาต์ ดังนี้
- เปิดใช้การควบคุมการซูม
- เปิดใช้การควบคุมด้วยท่าทางสัมผัสเพื่อหมุน
- ตั้งแผนที่เอียงไปที่ 30
การตั้งค่ารันไทม์มีดังนี้
- ตั้งกล้องให้อยู่ตรงกลางของเกียวโตประเทศญี่ปุ่น
- เปิดใช้ประเภทแผนที่แบบผสม
- เปิดเลเยอร์การจราจร
การตั้งค่าเบื้องต้น
<?xml version="1.0" encoding="utf-8"?> <fragment xmlns:android="http://schemas.android.com/apk/res/android" xmlns:map="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:name="com.google.android.gms.maps.SupportMapFragment" android:id="@+id/map" android:layout_width="match_parent" android:layout_height="match_parent" map:uiZoomControls="true" map:uiRotateGestures="true" map:cameraTilt="30" />
การตั้งค่ารันไทม์
package com.example.mapsetup; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import com.google.android.gms.maps.CameraUpdateFactory; import com.google.android.gms.maps.GoogleMap; import com.google.android.gms.maps.OnMapReadyCallback; import com.google.android.gms.maps.SupportMapFragment; import com.google.android.gms.maps.model.LatLng; import com.google.android.gms.maps.model.MarkerOptions; public class MainActivity extends AppCompatActivity implements OnMapReadyCallback { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager() .findFragmentById(R.id.map); mapFragment.getMapAsync(this); } // Update the map configuration at runtime. @Override public void onMapReady(GoogleMap googleMap) { // Set the map coordinates to Kyoto Japan. LatLng kyoto = new LatLng(35.00116, 135.7681); // Set the map type to Hybrid. googleMap.setMapType(GoogleMap.MAP_TYPE_HYBRID); // Add a marker on the map coordinates. googleMap.addMarker(new MarkerOptions() .position(kyoto) .title("Kyoto")); // Move the camera to the map coordinates and zoom in closer. googleMap.moveCamera(CameraUpdateFactory.newLatLng(kyoto)); googleMap.moveCamera(CameraUpdateFactory.zoomTo(15)); // Display traffic. googleMap.setTrafficEnabled(true); } }
ก่อนเริ่มต้น
ก่อนเริ่มต้น คุณสามารถตั้งค่าโปรเจ็กต์และเพิ่มแผนที่พื้นฐานผ่านตัวเลือกต่อไปนี้
สร้างแอปโดยใช้เทมเพลต Maps สำหรับ Android Studio เทมเพลต Maps จะกำหนดค่าโปรเจ็กต์และเพิ่มแผนที่พื้นฐานโดยอัตโนมัติ Fragment จะใช้เป็น คอนเทนเนอร์แผนที่และจะเพิ่มแบบคงที่ ดูรายละเอียดได้ที่quickstart
กำหนดค่าโปรเจ็กต์สำหรับ SDK ด้วยตนเองและเพิ่มแผนที่พื้นฐาน ซึ่งช่วยให้คุณใช้เทมเพลต Android ใดก็ได้และ เพิ่มแผนที่ในแอปที่มีอยู่
กำหนดค่าแผนที่หลังจากเพิ่มแบบคงที่
ส่วนนี้จะอธิบายวิธีตั้งค่าสถานะเริ่มต้นของแผนที่หากคุณเพิ่มลงในไฟล์รูปแบบแบบคงที่
Maps SDK สำหรับ Android กำหนดชุดแอตทริบิวต์ XML ที่กำหนดเองสำหรับ SupportMapFragment
หรือ MapView
ที่คุณสามารถใช้เพื่อกำหนดค่าสถานะเริ่มต้นของแผนที่ได้โดยตรงจากไฟล์การออกแบบ ปัจจุบันมีการระบุแอตทริบิวต์
ต่อไปนี้
mapType
— ประเภทแผนที่ที่จะแสดง ค่าที่ถูกต้อง ได้แก่none
,normal
,hybrid
,satellite
และterrain
cameraTargetLat
,cameraTargetLng
,cameraZoom
,cameraBearing
,cameraTilt
— ตำแหน่งเริ่มต้นของกล้อง ดูรายละเอียดในคำแนะนำเกี่ยวกับกล้องและมุมมองuiZoomControls
,uiCompass
— ระบุว่าจะแสดงตัวควบคุมการซูมและเข็มทิศหรือไม่ ดูรายละเอียดได้ที่UiSettings
uiZoomGestures
,uiScrollGestures
,uiRotateGestures
,uiTiltGestures
— ระบุว่าเปิดใช้ท่าทางสัมผัสที่เฉพาะเจาะจงหรือไม่ ดูรายละเอียดได้ที่UiSettings
zOrderOnTop
— ระบุว่าพื้นผิวของมุมมองแผนที่จะปรากฏที่ด้านบนของหน้าต่างแผนที่ ตัวควบคุมแผนที่ และวัตถุในหน้าต่างหรือไม่ ดูรายละเอียดได้ที่ SurfaceView.setZOrderOnTop(boolean)useViewLifecycle
— ใช้ได้กับออบเจ็กต์SupportMapFragment
เท่านั้น ระบุว่าวงจรของแผนที่ควรเชื่อมโยงกับมุมมองของส่วนย่อยหรือส่วนนั้นเอง ดูรายละเอียดที่นี่liteMode
—true
เพื่อเปิดใช้โหมด Lite หากไม่ใช่false
mapColorScheme
— ระบุรูปแบบสีสำหรับแผนที่ภูมิประเทศปกติ ค่าต่างๆ ได้แก่light
(ค่าเริ่มต้น),dark
และfollow_system
ซึ่งหมายความว่าใช้การตั้งค่าระบบปัจจุบันตามการตั้งค่าอุปกรณ์สำหรับUI_NIGHT_MODE_MASK
ดูข้อมูลเพิ่มเติมได้ที่รูปแบบสีของแผนที่
ในการใช้แอตทริบิวต์ที่กำหนดเองเหล่านี้ภายในไฟล์การออกแบบ แอตทริบิวต์ดังกล่าวต้องมีการประกาศเนมสเปซต่อไปนี้ คุณจะเลือกเนมสเปซใดก็ได้
โดยไม่จำเป็นต้องเป็น map
xmlns:map="http://schemas.android.com/apk/res-auto"
จากนั้นคุณจะเพิ่มแอตทริบิวต์ที่มีคำนำหน้า map:
ลงในไฟล์เลย์เอาต์ได้
ไฟล์เลย์เอาต์ต่อไปนี้กำหนดค่าออบเจ็กต์ SupportMapFragment
ด้วยแอตทริบิวต์แผนที่ที่กำหนดเอง คุณใช้แอตทริบิวต์เดียวกันนี้กับออบเจ็กต์ MapView
ได้ด้วย
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:id="@+id/map"
android:layout_width="match_parent"
android:layout_height="match_parent"
map:cameraBearing="112.5"
map:cameraTargetLat="-33.796923"
map:cameraTargetLng="150.922433"
map:cameraTilt="30"
map:cameraZoom="13"
map:mapType="normal"
map:mapColorScheme="dark"
map:uiCompass="false"
map:uiRotateGestures="true"
map:uiScrollGestures="false"
map:uiTiltGestures="true"
map:uiZoomControls="false"
map:uiZoomGestures="true"/>
กำหนดค่าแผนที่หลังจากเพิ่มแบบไดนามิก
ส่วนนี้จะอธิบายวิธีตั้งค่าสถานะเริ่มต้นของแผนที่หากคุณเพิ่มลงในแอปแบบไดนามิก
หากคุณเพิ่ม SupportMapFragment
หรือ MapView
แบบไดนามิก คุณจะสามารถตั้งค่าสถานะเริ่มต้นของแผนที่ในออบเจ็กต์ GoogleMapOptions
ตัวเลือกที่ใช้ได้เป็นตัวเลือกเดียวกับที่มีในไฟล์เลย์เอาต์
คุณสามารถสร้าง GoogleMapOptions
ได้ดังนี้
Kotlin
val options = GoogleMapOptions()
Java
GoogleMapOptions options = new GoogleMapOptions();
แล้วกำหนดค่าดังนี้
Kotlin
options.mapType(GoogleMap.MAP_TYPE_SATELLITE) .compassEnabled(false) .rotateGesturesEnabled(false) .tiltGesturesEnabled(false)
Java
options.mapType(GoogleMap.MAP_TYPE_SATELLITE) .compassEnabled(false) .rotateGesturesEnabled(false) .tiltGesturesEnabled(false);
หากต้องการใช้ตัวเลือกเหล่านี้เมื่อคุณสร้างแผนที่ ให้ทำอย่างใดอย่างหนึ่งต่อไปนี้
- หากคุณใช้
SupportMapFragment
ให้ใช้SupportMapFragment.newInstance(GoogleMapOptions options)
วิธีเริ่มต้นแบบคงที่เพื่อสร้างส่วนย่อยและส่งในการตั้งค่า - หากคุณใช้
MapView
ให้ใช้เครื่องมือสร้างMapView(Context, GoogleMapOptions)
และส่งในการตั้งค่า
ตั้งค่าเลเยอร์การจราจร
คุณสามารถแสดงข้อมูลการจราจรบนแผนที่โดยการเปิดใช้เลเยอร์การจราจร คุณเปิดและปิดใช้เลเยอร์การรับส่งข้อมูลได้โดยเรียกใช้เมธอด setTrafficEnabled()
และจะระบุได้ว่าเลเยอร์การรับส่งข้อมูลเปิดอยู่หรือไม่โดยเรียกใช้เมธอด isTrafficEnabled()
ภาพหน้าจอต่อไปนี้แสดงแผนที่ที่เปิดใช้งานเลเยอร์การจราจร
กำหนดประเภทแผนที่
หากต้องการกำหนดประเภทแผนที่ ให้เรียกเมธอด setMapType
ตัวอย่างเช่น หากต้องการแสดงแผนที่ดาวเทียม ให้ทำดังนี้
Kotlin
// Sets the map type to be "hybrid" map.mapType = GoogleMap.MAP_TYPE_HYBRID
Java
// Sets the map type to be "hybrid" map.setMapType(GoogleMap.MAP_TYPE_HYBRID);
ภาพต่อไปนี้จะเปรียบเทียบแผนที่ภูมิประเทศปกติ แบบผสม และภูมิประเทศ
ตั้งค่าสิ่งปลูกสร้าง 3 มิติ
เมื่อดูในระยะใกล้ หลายๆ เมืองจะเห็นอาคาร 3 มิติที่มองเห็นได้จากรูปภาพแวนคูเวอร์ ประเทศแคนาดา ด้านล่าง คุณปิดใช้สิ่งปลูกสร้าง 3 มิติได้โดยเรียกใช้ GoogleMap.setBuildingsEnabled(false)
ตั้งค่าแผนที่ในอาคาร
ในระดับการซูมสูง แผนที่จะแสดงแปลนอาคารสำหรับพื้นที่ในอาคาร เช่น สนามบิน ศูนย์การค้า ร้านค้าปลีกขนาดใหญ่ และสถานีขนส่ง แปลนอาคารเหล่านี้เรียกว่าแผนที่ในอาคาร ซึ่งแสดงขึ้นสำหรับแผนที่ประเภท "ปกติ" และ "ดาวเทียม" (GoogleMap.MAP_TYPE_NORMAL
และ GoogleMap.MAP_TYPE_SATELLITE
) โดยแผนที่เหล่านี้จะเปิดใช้งานโดยอัตโนมัติเมื่อผู้ใช้ซูมเข้าและจะจางหายไปเมื่อแผนที่ซูมออก
ประกาศการเลิกใช้งาน: ในรุ่นถัดไป แผนที่ในอาคารจะมีให้บริการในแผนที่ประเภท normal
เท่านั้น นับจากรุ่นที่จะถึงนี้ แผนที่ในอาคารจะไม่ได้รับการสนับสนุนบนแผนที่ satellite
, terrain
หรือ hybrid
แม้ในกรณีที่ระบบไม่รองรับ Indoor แล้ว isIndoorEnabled()
จะยังคงแสดงผลค่าที่ตั้งค่าผ่าน setIndoorEnabled()
ต่อไป ดังที่เป็นอยู่ในปัจจุบัน โดยค่าเริ่มต้น setIndoorEnabled
คือ true
บันทึกประจำรุ่นจะแจ้งให้คุณทราบเมื่อแผนที่ประเภทเหล่านั้นไม่พร้อมให้บริการภายในอาคาร
ข้อมูลสรุปเกี่ยวกับฟังก์ชันการทำงานของแผนที่ในอาคารใน API มีดังนี้
- คุณสามารถปิดแผนที่ในอาคารได้โดยโทรไปที่
GoogleMap.setIndoorEnabled(false)
โดยค่าเริ่มต้น แผนที่ในอาคารจะถูกเปิดใช้งานไว้ แผนที่ในอาคารจะแสดงในหนึ่งแผนที่ต่อครั้ง โดยค่าเริ่มต้น นี่คือแผนที่แรกที่เพิ่มลงในแอปของคุณ หากต้องการแสดงแผนที่ในอาคารในแผนที่อื่น ให้ปิดใช้งานแผนที่แรก จากนั้นเรียกใช้setIndoorEnabled(true)
ในแผนที่ที่สอง - หากต้องการปิดใช้เครื่องมือเลือกระดับเริ่มต้น (เครื่องมือเลือกชั้น) ให้เรียกใช้
GoogleMap.getUiSettings().setIndoorLevelPickerEnabled(false)
ดูรายละเอียดเพิ่มเติมได้ที่การโต้ตอบกับแผนที่ OnIndoorStateChangeListener
— กำหนดผู้ฟังที่จะตรวจจับเมื่ออาคารมีโฟกัส หรือมีการเปิดระดับในอาคาร โปรดดูรายละเอียดที่การโต้ตอบกับแผนที่getFocusedBuilding
— เรียกสิ่งปลูกสร้างที่อยู่ในโฟกัส จากนั้นคุณจะดูระดับที่ใช้งานอยู่ได้โดยโทรหาIndoorBuilding.getActiveLevelIndex()
- การจัดรูปแบบแผนที่ฐานไม่มีผลต่อแผนที่ในอาคาร
ตั้งค่าระยะห่างจากขอบของแผนที่
วิดีโอนี้แสดงตัวอย่างระยะห่างจากขอบในแผนที่
แผนที่ของ Google ออกแบบมาเพื่อครอบคลุมทั้งภูมิภาคตามที่กำหนดโดยเอลิเมนต์ของคอนเทนเนอร์ ซึ่งโดยทั่วไปจะเป็น MapView
หรือ SupportMapFragment
ลักษณะและลักษณะการทำงานของแผนที่หลายด้านถูกกำหนดโดยมิติข้อมูลของคอนเทนเนอร์ ดังนี้
- เป้าหมายของกล้องจะแสดงกึ่งกลางของบริเวณเบาะ
- ตัวควบคุมแผนที่อยู่ในตำแหน่งที่สัมพันธ์กับขอบของแผนที่
- ข้อมูลทางกฎหมาย เช่น ข้อความลิขสิทธิ์ หรือโลโก้ Google จะปรากฏ ที่ขอบด้านล่างของแผนที่
คุณเพิ่มระยะห่างจากขอบรอบขอบแผนที่ได้โดยใช้ GoogleMap
setPadding()
แผนที่จะแสดงเต็มพื้นที่ของคอนเทนเนอร์ต่อไป แต่ข้อความและการควบคุมตำแหน่ง ท่าทางสัมผัสบนแผนที่ และการเคลื่อนไหวของกล้องจะยังคงทำงานเสมือนว่าถูกวางในพื้นที่ที่เล็กกว่า ซึ่งทำให้เกิดการเปลี่ยนแปลงต่อไปนี้
- การเคลื่อนที่ของกล้องผ่านการเรียก API หรือการกดปุ่ม (เช่น เข็มทิศ ตำแหน่งของฉัน ปุ่มซูม) จะสัมพันธ์กับพื้นที่ที่มีระยะห่างจากขอบ
- เมธอด
getCameraPosition
จะแสดงจุดกึ่งกลางของบริเวณที่มีระยะห่างจากขอบ - เมธอด
Projection
และgetVisibleRegion
จะแสดงขอบเขตที่มีระยะห่างจากขอบ - ตัวควบคุม UI จะออฟเซ็ตจากขอบของคอนเทนเนอร์ตามจำนวนพิกเซลที่ระบุ
Padding มีประโยชน์เมื่อออกแบบ UI ที่ซ้อนทับบางส่วนของแผนที่ ในภาพต่อไปนี้ แผนที่จะได้รับการเสริมที่ขอบบนและขอบขวา ตัวควบคุมแผนที่ที่มองเห็นได้และข้อความทางกฎหมายจะแสดงตามขอบของเขตพื้นที่รอง โดยเป็นสีเขียว ในขณะที่แผนที่จะแสดงเต็มพื้นที่คอนเทนเนอร์ และเป็นสีน้ำเงิน ในตัวอย่างนี้ คุณสามารถทำให้เมนูลอยอยู่เหนือด้านขวาของแผนที่โดยไม่บดบังการควบคุมแผนที่
รูปแบบสีของแผนที่
สำหรับแผนที่ประเภทปกติและภูมิประเทศ คุณสามารถตั้งค่ารูปแบบสีแผนที่แบบไดนามิกเป็นสีเข้ม สีอ่อน หรือใช้การตั้งค่าระบบปัจจุบัน ตัวอย่างเช่น คุณสามารถปรับรูปแบบสีแผนที่ให้เข้มหรือจางลงโดยอิงจากช่วงเวลาของวัน หรือการใช้อุปกรณ์ในร่มหรือกลางแจ้ง
โดยค่าเริ่มต้น แผนที่จะใช้โหมดสว่าง ค่าการตั้งค่าระบบปัจจุบันจะอิงตามการตั้งค่าอุปกรณ์สำหรับ UI_NIGHT_MODE_MASK
Kotlin
mapFragment = SupportMapFragment.newInstance(GoogleMapOptions().mapColorScheme(MapColorScheme.DARK).mapId(mapId2))
Java
mapFragment = SupportMapFragment.newInstance(new GoogleMapOptions().mapColorScheme(MapColorScheme.DARK).mapId(mapId2));
คุณสลับรูปแบบสีได้โดยใช้เมธอด GoogleMap.setMapColorScheme()
เพื่อตั้งค่ารูปแบบปัจจุบันเป็นโหมดมืด โหมดสว่าง หรือทำตามการตั้งค่าระบบ
Kotlin
googleMap.setMapColorScheme(MapColorScheme.DARK) googleMap.setMapColorScheme(MapColorScheme.LIGHT) googleMap.setMapColorScheme(MapColorScheme.FOLLOW_SYSTEM)
Java
googleMap.setMapColorScheme(MapColorScheme.DARK); googleMap.setMapColorScheme(MapColorScheme.LIGHT); googleMap.setMapColorScheme(MapColorScheme.FOLLOW_SYSTEM);