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

เลือกแพลตฟอร์ม: Android iOS

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

ภาพรวม

ภาพหน้าจอแผนที่เมืองเกียวโตพร้อมการตั้งค่าแผนที่ หลังจากเพิ่มแผนที่ลงในแอปแล้ว คุณจะกำหนดการตั้งค่ารันไทม์เริ่มต้นและรันไทม์ของแผนที่ได้ การตั้งค่าเริ่มต้นต้องได้รับการกำหนดค่าโดยอิงจากว่าคุณเพิ่มคอนเทนเนอร์แผนที่ (SupportMapFragment หรือ MapView) แบบคงที่หรือแบบไดนามิก ถ้าเพิ่มคอนเทนเนอร์แผนที่แบบคงที่แล้ว คุณสามารถกำหนดค่าการตั้งค่าแผนที่เริ่มต้นในไฟล์เค้าโครงได้ หากมีการเพิ่มแบบไดนามิก คุณจะกําหนดการตั้งค่าเริ่มต้นใน Callback ของ OnCreate ได้ด้วยออบเจ็กต์ GoogleMapOptions

ดูรายละเอียดเกี่ยวกับการเพิ่มคอนเทนเนอร์แผนที่ได้ที่เพิ่มแผนที่

การตั้งค่าแผนที่เบื้องต้นมีดังนี้

ขณะรันไทม์ คุณจะกำหนดการตั้งค่าเหล่านี้และการตั้งค่าการเพิ่มบางอย่างได้โดยการอัปเดตออบเจ็กต์ 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 จะปรากฏ ที่ขอบด้านล่างของแผนที่

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

  • การเคลื่อนที่ของกล้องผ่านการเรียก 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);