กําหนดค่าแผนที่

หัวข้อนี้อธิบายวิธีกำหนดค่าแผนที่ที่เพิ่มลงในแอป Android โดยใช้ Maps SDK สำหรับ Android

ภาพรวม

หลังจากเพิ่มแผนที่ลงในแอปแล้ว คุณจะกำหนดการตั้งค่าเริ่มต้นและรันไทม์ของแผนที่ได้ การตั้งค่าเริ่มต้นต้องได้รับการกําหนดค่าตามว่าคุณได้เพิ่มคอนเทนเนอร์แผนที่ (SupportMapFragment หรือ MapView) แบบคงที่หรือแบบไดนามิก หากเพิ่มคอนเทนเนอร์แผนที่แบบคงที่ คุณจะกำหนดการตั้งค่าแผนที่เริ่มต้นได้ในไฟล์เลย์เอาต์ หากเพิ่มแบบไดนามิก คุณจะกำหนดการตั้งค่าเริ่มต้นได้ใน OnCreate callback ด้วยออบเจ็กต์ 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 จะกําหนดค่าโปรเจ็กต์และเพิ่มแผนที่พื้นฐานโดยอัตโนมัติ ระบบจะใช้ข้อมูลโค้ดเป็นคอนเทนเนอร์แผนที่และเพิ่มแบบคงที่ โปรดดูรายละเอียดที่หัวข้อเริ่มต้นใช้งาน

• กําหนดค่าโปรเจ็กต์ด้วยตนเองสําหรับ 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 ได้โดยทำดังนี้

val options = GoogleMapOptions()

      

GoogleMapOptions options = new GoogleMapOptions();

      

จากนั้นกําหนดค่าดังนี้

options.mapType(GoogleMap.MAP_TYPE_SATELLITE)
    .compassEnabled(false)
    .rotateGesturesEnabled(false)
    .tiltGesturesEnabled(false)

      

options.mapType(GoogleMap.MAP_TYPE_SATELLITE)
    .compassEnabled(false)
    .rotateGesturesEnabled(false)
    .tiltGesturesEnabled(false);

      

หากต้องการใช้ตัวเลือกเหล่านี้เมื่อสร้างแผนที่ ให้ทำอย่างใดอย่างหนึ่งต่อไปนี้

• หากคุณใช้ SupportMapFragment ให้ใช้ SupportMapFragment.newInstance(GoogleMapOptions options) วิธีเริ่มต้นแบบคงที่เพื่อสร้างส่วนย่อยและส่งในการตั้งค่า
• หากใช้ MapView ให้ใช้คอนสตรัคเตอร์ MapView(Context, GoogleMapOptions) และส่งการตั้งค่า

แปลแผนที่

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

defaultConfig {
    resConfigs "en", "fr", "es", "zh", "de", "ja", "ru", "ko", "pt", "in"
}

อ่านเพิ่มเติมเกี่ยวกับการแปลแอป Android

ตั้งค่าเลเยอร์การจราจร

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

ตั้งค่าประเภทแผนที่

หากต้องการตั้งค่าประเภทแผนที่ ให้เรียกใช้เมธอด setMapType เช่น หากต้องการแสดงแผนที่ดาวเทียม ให้ทำดังนี้

// Sets the map type to be "hybrid"
map.mapType = GoogleMap.MAP_TYPE_HYBRID

      

// 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 แม้ว่าระบบจะไม่รองรับในอาคาร isIndoorEnabled() จะยังคงแสดงค่าที่ตั้งไว้ผ่าน setIndoorEnabled() ต่อไป เช่นเดียวกับที่ทำอยู่ในปัจจุบัน โดยค่าเริ่มต้น setIndoorEnabled คือ true หมายเหตุประจำรุ่นจะแจ้งให้คุณทราบเมื่อการรองรับพื้นที่ในอาคารใช้งานไม่ได้ในแผนที่ประเภทดังกล่าว

ข้อมูลสรุปเกี่ยวกับฟังก์ชันการทำงานของแผนที่ในอาคารใน API มีดังนี้

• คุณปิดใช้แผนที่ในอาคารได้โดยโทรไปที่ GoogleMap.setIndoorEnabled(false) แผนที่ในอาคารจะเปิดใช้อยู่โดยค่าเริ่มต้น แผนที่ในอาคารจะแสดงในแผนที่เดียวในแต่ละครั้ง โดยค่าเริ่มต้น แผนที่นี้จะเป็นแผนที่แรกที่เพิ่มลงในแอป หากต้องการแสดงแผนที่ในอาคารบนแผนที่อื่น ให้ปิดใช้แผนที่ในแผนที่แรก แล้วเรียกใช้ setIndoorEnabled(true) ในแผนที่ที่ 2
• หากต้องการปิดใช้เครื่องมือเลือกระดับเริ่มต้น (เครื่องมือเลือกพื้น) ให้เรียกใช้ GoogleMap.getUiSettings().setIndoorLevelPickerEnabled(false) โปรดดูรายละเอียดเพิ่มเติมที่หัวข้อการโต้ตอบกับแผนที่
• OnIndoorStateChangeListener — กำหนด Listeners ที่ตรวจจับเมื่ออาคารอยู่ในโฟกัส หรือมีการเปิดใช้งานชั้นในอาคาร โปรดดูรายละเอียดที่หัวข้อการโต้ตอบกับแผนที่
• getFocusedBuilding — ดึงข้อมูลอาคารที่อยู่ในโฟกัส จากนั้นค้นหาระดับที่ใช้งานอยู่โดยเรียกใช้ IndoorBuilding.getActiveLevelIndex()
• การจัดสไตล์แผนที่ฐานจะไม่ส่งผลต่อแผนที่ในอาคาร

ตั้งค่าการเสริมพื้นที่ในแผนที่

วิดีโอนี้แสดงตัวอย่างการเว้นวรรคแผนที่

แผนที่ Google ได้รับการออกแบบให้เต็มพื้นที่ทั้งภูมิภาคที่ระบุโดยองค์ประกอบคอนเทนเนอร์ ซึ่งมักจะเป็น MapView หรือ SupportMapFragment ลักษณะหลายประการของลักษณะที่แผนที่ปรากฏและทํางานจะกําหนดโดยขนาดของคอนเทนเนอร์ ดังนี้

• เป้าหมายของกล้องจะแสดงตรงกลางของพื้นที่ที่มีระยะห่างจากขอบ
• การควบคุมแผนที่จะวางตามขอบของแผนที่
• ข้อมูลทางกฎหมาย เช่น ข้อความระบุลิขสิทธิ์หรือโลโก้ Google จะปรากฏที่ขอบด้านล่างของแผนที่

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

• การเคลื่อนไหวของกล้องผ่านการเรียก API หรือการกดปุ่ม (เช่น เข็มทิศ ปุ่มตำแหน่งของฉัน ปุ่มซูม) จะสัมพันธ์กับพื้นที่ที่มีระยะห่างจากกัน
• เมธอด getCameraPosition จะแสดงผลตรงกลางของส่วนที่เพิ่มระยะขอบ
• เมธอด Projection และ getVisibleRegion จะแสดงผลพื้นที่ที่เพิ่มค่าให้เต็ม
• ตัวควบคุม UI จะเลื่อนออกจากขอบของคอนเทนเนอร์ตามจำนวนพิกเซลที่ระบุ

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

รูปแบบสีของแผนที่

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

โดยค่าเริ่มต้น แผนที่จะใช้โหมดแสง ค่าการตั้งค่าระบบปัจจุบันจะอิงตามการตั้งค่าอุปกรณ์สำหรับ UI_NIGHT_MODE_MASK

mapFragment = SupportMapFragment.newInstance(GoogleMapOptions().mapColorScheme(MapColorScheme.DARK).mapId(mapId2))

mapFragment = SupportMapFragment.newInstance(new GoogleMapOptions().mapColorScheme(MapColorScheme.DARK).mapId(mapId2));

คุณสลับรูปแบบสีได้โดยใช้วิธี GoogleMap.setMapColorScheme() เพื่อตั้งค่าสไตล์ปัจจุบันเป็นโหมดมืด โหมดสว่าง หรือตามการตั้งค่าของระบบ

googleMap.setMapColorScheme(MapColorScheme.DARK)
googleMap.setMapColorScheme(MapColorScheme.LIGHT)
googleMap.setMapColorScheme(MapColorScheme.FOLLOW_SYSTEM)

googleMap.setMapColorScheme(MapColorScheme.DARK);
googleMap.setMapColorScheme(MapColorScheme.LIGHT);
googleMap.setMapColorScheme(MapColorScheme.FOLLOW_SYSTEM);

กำหนดค่าสีพื้นหลัง

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

private val googleMapOptions: GoogleMapOptions =
    GoogleMapOptions().backgroundColor(Color.argb(255, 255, 0, 0));

private GoogleMapOptions options = new GoogleMapOptions().backgroundColor(Color.argb(255, 255, 0, 0));

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