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

หัวข้อนี้จะอธิบายวิธีกำหนดค่าแผนที่ที่เพิ่มลงในแอป 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 ดังนี้

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) เพื่อสร้าง Fragment และส่งในการตั้งค่า
• หากคุณใช้ MapView ให้ใช้เครื่องมือสร้าง MapView(Context, GoogleMapOptions) และส่งในการตั้งค่า

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

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

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

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

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