หัวข้อนี้จะอธิบายวิธีกำหนดค่าแผนที่ที่เพิ่มลงในแอป Android โดยใช้ Maps SDK สำหรับ Android
ภาพรวม
หลังจากที่เพิ่มแผนที่ลงในแอปแล้ว คุณจะกำหนดการตั้งค่าเริ่มต้นและรันไทม์ของแผนที่ได้ ต้องกำหนดการตั้งค่าเริ่มต้นโดยขึ้นอยู่กับว่าคุณเพิ่มคอนเทนเนอร์แผนที่ (SupportMapFragment
หรือ MapView
) แบบคงที่หรือแบบไดนามิก หากมีการเพิ่มคอนเทนเนอร์แผนที่แบบคงที่
คุณกำหนดการตั้งค่าแผนที่เริ่มต้นในไฟล์เลย์เอาต์ได้
หากมีการเพิ่มแบบไดนามิก คุณจะกำหนดการตั้งค่าเริ่มต้นในโค้ดเรียกกลับ OnCreate
ด้วยออบเจ็กต์ GoogleMapOptions
ได้
ดูรายละเอียดเกี่ยวกับการเพิ่มคอนเทนเนอร์แผนที่ได้ที่หัวข้อเพิ่มแผนที่
การตั้งค่าแผนที่เบื้องต้นมีดังนี้
- ตำแหน่งของกล้อง ซึ่งรวมถึงตำแหน่ง การซูม ทิศทางการถือ และการเอียง ดูรายละเอียดเกี่ยวกับตำแหน่งของกล้องได้ที่กล้องและมุมมอง
- ประเภทแผนที่
- คอมโพเนนต์ UI ที่จะแสดง เช่น ปุ่มซูมและเข็มทิศ
- ท่าทางสัมผัสสำหรับเปิดใช้
- เปิดใช้โหมด Lite อยู่หรือไม่
ระหว่างรันไทม์ คุณจะกำหนดการตั้งค่าเหล่านี้และการตั้งค่าเพิ่มเติมบางอย่างได้โดยการอัปเดตออบเจ็กต์ GoogleMap
ในโค้ดเรียกกลับ 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 จะกำหนดค่าโปรเจ็กต์ของคุณโดยอัตโนมัติและเพิ่มแผนที่พื้นฐาน ส่วนย่อยจะถูกนำมาใช้เป็น คอนเทนเนอร์แผนที่และเพิ่มแบบคงที่ โปรดดูรายละเอียดที่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
หากต้องการใช้แอตทริบิวต์ที่กำหนดเองเหล่านี้ภายในไฟล์เลย์เอาต์ แอตทริบิวต์ดังกล่าวต้องมีการประกาศเนมสเปซต่อไปนี้ คุณจะเลือกเนมสเปซใดก็ได้ ซึ่ง
ไม่จำเป็นต้องเป็น 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: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)
เพื่อสร้าง Fragment และส่งในการตั้งค่า - หากคุณใช้
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)
โดยค่าเริ่มต้น แผนที่ในอาคารจะเปิดใช้งาน แผนที่ในอาคารจะแสดงบนแผนที่ครั้งละ 1 รายการ โดยค่าเริ่มต้น นี่เป็นแผนที่แรกที่เพิ่มลงในแอปของคุณ หากต้องการแสดงแผนที่ในอาคารในแผนที่อื่น ให้ปิดใช้แผนที่นั้นในแผนที่แรก จากนั้นเรียกใช้setIndoorEnabled(true)
ในแผนที่ที่ 2 - หากต้องการปิดใช้เครื่องมือเลือกระดับเริ่มต้น (เครื่องมือเลือกชั้น) ให้โทร
GoogleMap.getUiSettings().setIndoorLevelPickerEnabled(false)
โปรดดูรายละเอียดเพิ่มเติมที่การโต้ตอบกับแผนที่ OnIndoorStateChangeListener
— กำหนด Listener ที่ตรวจจับเมื่ออาคารเป็นจุดโฟกัส หรือระดับเปิดใช้งานในอาคาร โปรดดูรายละเอียดที่การโต้ตอบกับแผนที่getFocusedBuilding
— เรียกข้อมูลอาคารที่โฟกัสอยู่ จากนั้นคุณจะดูระดับที่ใช้งานอยู่ได้โดยเรียกใช้IndoorBuilding.getActiveLevelIndex()
- การจัดรูปแบบแผนที่ฐานไม่มีผลต่อแผนที่ในอาคาร
ตั้งค่าระยะห่างจากขอบของแผนที่
วิดีโอนี้แสดงตัวอย่างระยะห่างจากขอบของแผนที่
แผนที่ของ Google ได้รับการออกแบบมาให้แสดงเต็มพื้นที่ทั้งภูมิภาคที่กำหนดโดยองค์ประกอบคอนเทนเนอร์ของภูมิภาคนั้นๆ ซึ่งโดยทั่วไปจะเป็น MapView
หรือ SupportMapFragment
ขนาดคอนเทนเนอร์เป็นตัวกำหนดลักษณะของแผนที่และลักษณะการทำงานในหลายๆ ด้าน ได้แก่
- เป้าหมายของกล้องจะแสดงถึงกึ่งกลางของบริเวณที่มีแผ่นบุนวม
- ตัวควบคุมแผนที่จะมีตำแหน่งสัมพันธ์กับขอบของแผนที่
- ข้อมูลทางกฎหมาย เช่น คำชี้แจงลิขสิทธิ์หรือโลโก้ Google จะปรากฏที่ขอบด้านล่างของแผนที่
คุณสามารถเพิ่มระยะห่างจากขอบรอบๆ ขอบของแผนที่ได้โดยใช้ GoogleMap
setPadding()
แผนที่จะแสดงต่อทั้งคอนเทนเนอร์ แต่การวางตำแหน่งข้อความและการควบคุม ท่าทางสัมผัสในแผนที่ และการเคลื่อนที่ของกล้องจะทํางานเสมือนว่าถูกวางไว้ในพื้นที่ขนาดเล็กลง ซึ่งส่งผลให้เกิดการเปลี่ยนแปลงต่อไปนี้
- การเคลื่อนที่ของกล้องผ่านการเรียก API หรือการกดปุ่ม (เช่น เข็มทิศ ตำแหน่งของฉัน ปุ่มซูม) จะสัมพันธ์กับพื้นที่ที่มีเบาะรอง
- เมธอด
getCameraPosition
จะแสดงผลตรงกลางของส่วนที่มีการบุนวม - เมธอด
Projection
และgetVisibleRegion
จะแสดงผลบริเวณที่มีการเสริมด้วย - การควบคุม UI จะออฟเซ็ตจากขอบของคอนเทนเนอร์ตามจำนวนพิกเซลที่ระบุ
ระยะห่างจากขอบอาจมีประโยชน์เมื่อออกแบบ UI ที่ทับซ้อนกับบางส่วนของแผนที่ ในภาพต่อไปนี้ แผนที่ได้รับการเสริมตามขอบด้านบนและขวา ตัวควบคุมแผนที่ที่มองเห็นได้และข้อความทางกฎหมายจะแสดงอยู่ตามขอบของบริเวณที่มีเบาะโดยแสดงเป็นสีเขียว ขณะที่แผนที่จะแสดงต่อทั้งคอนเทนเนอร์ ซึ่งแสดงเป็นสีน้ำเงิน ในตัวอย่างนี้ คุณสามารถลอยเมนู ทางด้านขวาของแผนที่โดยไม่บดบังการควบคุมแผนที่