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

เลือกแพลตฟอร์ม แอนดรอยด์ iOS

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

ภาพรวม

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

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

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

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

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) และส่งในการตั้งค่า

แปลแผนที่

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

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

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

ตั้งค่าเลเยอร์การเข้าชม

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

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);

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

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

Kotlin

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

Java

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

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