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

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

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

ภาพรวม

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

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

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

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

  • 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 — กำหนดผู้ฟังที่ ที่ตรวจจับเมื่ออาคารมีโฟกัส หรือมีการเปิดใช้งานระดับ ในอาคาร โปรดดูรายละเอียดที่การโต้ตอบกับแผนที่
  • 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);