เพิ่มแผนที่ที่มีการจัดรูปแบบ

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เลือกแพลตฟอร์ม: Android iOS JavaScript

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

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

การจัดรูปแบบใช้ได้กับแผนที่ประเภท normal เท่านั้น การจัดรูปแบบไม่ส่งผลต่อแผนที่ในอาคาร

รับโค้ด

โคลนหรือดาวน์โหลดที่เก็บ Google Maps Android API v2 ตัวอย่างจาก GitHub

ตั้งค่าโปรเจ็กต์การพัฒนา

ทําตามขั้นตอนเหล่านี้เพื่อสร้างโปรเจ็กต์บทแนะนําใน Android Studio

  1. ดาวน์โหลดและติดตั้ง Android Studio
  2. เพิ่มแพ็กเกจบริการ Google Play ลงใน Android Studio
  3. โคลนหรือดาวน์โหลดที่เก็บ Google Maps Android API v2 หากคุณไม่ได้ทําตอนเริ่มอ่านบทแนะนํานี้
  4. นําเข้าโปรเจ็กต์บทแนะนํา:

    • ใน Android Studio ให้เลือกไฟล์ > ใหม่ > นําเข้าโปรเจ็กต์
    • ไปยังตําแหน่งที่คุณบันทึกที่เก็บ Google Maps Android API v2 Sample หลังจากดาวน์โหลด
    • ค้นหาโปรเจ็กต์ StyledMaps ในสถานที่ตั้งนี้
      PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
    • เลือกไดเรกทอรีโปรเจ็กต์ แล้วคลิกตกลง ตอนนี้ Android Studio สร้างโปรเจ็กต์ของคุณโดยใช้เครื่องมือสร้าง Gradle แล้ว

รับคีย์ API และเปิดใช้ API ที่จําเป็น

หากต้องการดูบทแนะนํานี้ให้เสร็จสิ้น คุณต้องมีคีย์ Google API ที่ได้รับอนุญาตให้ใช้ Maps SDK สําหรับ Android

คลิกปุ่มด้านล่างเพื่อรับคีย์และเปิดใช้งาน API

รับคีย์

โปรดดูรายละเอียดเพิ่มเติมในคู่มือรับคีย์ API

เพิ่มคีย์ API ลงในแอป

  1. แก้ไขไฟล์ gradle.properties ของโปรเจ็กต์
  2. วางคีย์ API ลงในค่าของพร็อพเพอร์ตี้ GOOGLE_MAPS_API_KEY เมื่อคุณสร้างแอป Gradle จะคัดลอกคีย์ API ไปยังไฟล์ Manifest ของ Android ของแอป

    GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
    

สร้างและเรียกใช้แอป

  1. เชื่อมต่ออุปกรณ์ Android กับคอมพิวเตอร์ ทําตามวิธีการเพื่อเปิดใช้ตัวเลือกสําหรับนักพัฒนาแอปในอุปกรณ์ Android และกําหนดค่าระบบให้ตรวจจับอุปกรณ์ได้ (หรือคุณจะใช้โปรแกรมจัดการอุปกรณ์เสมือน (AVD) สําหรับ Android เพื่อกําหนดค่าอุปกรณ์เสมือนจริงก็ได้ เมื่อเลือกโปรแกรมจําลอง โปรดเลือกรูปภาพที่มี Google API โปรดดูรายละเอียดเพิ่มเติมที่หัวข้อคู่มือเริ่มต้นใช้งาน)
  2. ใน Android Studio ให้คลิกตัวเลือกเมนูเรียกใช้ (หรือไอคอนปุ่มเล่น) เลือกอุปกรณ์เมื่อได้รับข้อความแจ้ง

Android Studio จะเรียกใช้ Gradle เพื่อสร้างแอป จากนั้นเรียกใช้แอปในอุปกรณ์หรือในโปรแกรมจําลอง คุณควรเห็นแผนที่ที่มีการจัดรูปแบบสีเข้ม (โหมดกลางคืน) ซึ่งคล้ายกับรูปภาพในหน้านี้

การแก้ปัญหา:

ทําความเข้าใจโค้ด

ส่วนบทแนะนํานี้ในบทแนะนําจะอธิบายส่วนที่สําคัญที่สุดของแอป StyledMaps เพื่อช่วยให้คุณเข้าใจวิธีสร้างแอปที่คล้ายกัน

เพิ่มทรัพยากรที่มีออบเจ็กต์รูปแบบ JSON

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

ทรัพยากรดิบ

กําหนดทรัพยากรดิบใน /res/raw/style_json.json ซึ่งมีการประกาศรูปแบบ JSON สําหรับการจัดรูปแบบโหมดกลางคืน

ทรัพยากรสตริง

กําหนดทรัพยากรสตริงใน /res/values/style_strings.xml ซึ่งมีการประกาศรูปแบบ JSON สําหรับการจัดรูปแบบโหมดกลางคืน บทแนะนํานี้จะใช้ชื่อสตริง style_json ในไฟล์นี้ คุณต้องใช้แบ็กสแลชเพื่อหลีกเครื่องหมายคําพูด ดังนี้

ส่งออบเจ็กต์รูปแบบ JSON ไปยังแผนที่ของคุณ

หากต้องการจัดรูปแบบแผนที่ ให้เรียก GoogleMap.setMapStyle() ผ่านออบเจ็กต์ MapStyleOptions ที่มีการประกาศรูปแบบในรูปแบบ JSON

ทรัพยากรดิบ

ตัวอย่างโค้ดต่อไปนี้จะถือว่าโปรเจ็กต์ของคุณมีทรัพยากรดิบชื่อ style_json

// Copyright 2020 Google LLC
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

package com.example.styledmap;

import android.content.res.Resources;
import android.os.Bundle;
import android.util.Log;
import androidx.appcompat.app.AppCompatActivity;

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.MapStyleOptions;

/**
 * A styled map using JSON styles from a raw resource.
 */
public class MapsActivityRaw extends AppCompatActivity
        implements OnMapReadyCallback {

    private static final String TAG = MapsActivityRaw.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps_raw);

        // Get the SupportMapFragment and register for the callback
        // when the map is ready for use.
        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready for use.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {

        try {
            // Customise the styling of the base map using a JSON object defined
            // in a raw resource file.
            boolean success = googleMap.setMapStyle(
                    MapStyleOptions.loadRawResourceStyle(
                            this, R.raw.style_json));

            if (!success) {
                Log.e(TAG, "Style parsing failed.");
            }
        } catch (Resources.NotFoundException e) {
            Log.e(TAG, "Can't find style. Error: ", e);
        }
        // Position the map's camera near Sydney, Australia.
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
    }
}

เลย์เอาต์ (activity_maps_raw.xml) จะมีลักษณะดังนี้

ทรัพยากรสตริง

ตัวอย่างโค้ดต่อไปนี้จะถือว่าโปรเจ็กต์ของคุณมีทรัพยากรสตริงชื่อ style_json

package com.example.styledmap;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.Log;

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.MapStyleOptions;

/**
 * A styled map using JSON styles from a string resource.
 */
public class MapsActivityString extends AppCompatActivity
        implements OnMapReadyCallback {

    private static final String TAG = MapsActivityString.class.getSimpleName();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Retrieve the content view that renders the map.
        setContentView(R.layout.activity_maps_string);

        // Get the SupportMapFragment and register for the callback
        // when the map is ready for use.
        SupportMapFragment mapFragment =
                (SupportMapFragment) getSupportFragmentManager()
                        .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    /**
     * Manipulates the map when it's available.
     * The API invokes this callback when the map is ready for use.
     */
    @Override
    public void onMapReady(GoogleMap googleMap) {

        // Customise the styling of the base map using a JSON object defined
        // in a string resource file. First create a MapStyleOptions object
        // from the JSON styles string, then pass this to the setMapStyle
        // method of the GoogleMap object.
        boolean success = googleMap.setMapStyle(new MapStyleOptions(getResources()
                .getString(R.string.style_json)));

        if (!success) {
            Log.e(TAG, "Style parsing failed.");
        }
        // Position the map's camera near Sydney, Australia.
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(new LatLng(-34, 151)));
    }
}

เลย์เอาต์ (activity_maps_string.xml) จะมีลักษณะดังนี้

ข้อมูลเพิ่มเติมเกี่ยวกับการประกาศรูปแบบ JSON

แผนที่ที่มีสไตล์ใช้แนวคิด 2 อย่างในการใช้สีและการเปลี่ยนแปลงสไตล์อื่นๆ กับแผนที่

  • ตัวเลือก ระบุองค์ประกอบทางภูมิศาสตร์ที่คุณจัดรูปแบบบนแผนที่ได้ ถนนเหล่านี้มีถนน สวนสาธารณะ แหล่งน้ํา และอื่นๆ รวมถึงป้ายกํากับของพวกเขา ตัวเลือกประกอบด้วยฟีเจอร์และองค์ประกอบ ซึ่งระบุเป็นพร็อพเพอร์ตี้ featureType และ elementType
  • Stylers เป็นพร็อพเพอร์ตี้สีและระดับการเข้าถึงที่คุณนําไปใช้กับองค์ประกอบแผนที่ได้ พวกเขากําหนดสีที่แสดงผ่านการผสมผสานค่าสีสัน สี และความสว่าง/แกมมา

ดูคําอธิบายโดยละเอียดเกี่ยวกับตัวเลือกการจัดรูปแบบ JSON ในข้อมูลอ้างอิงรูปแบบ

วิซาร์ดการจัดรูปแบบแพลตฟอร์ม Maps

ใช้วิซาร์ดการจัดรูปแบบแผนที่ของ Maps เป็นวิธีที่รวดเร็วในการสร้างออบเจ็กต์การจัดรูปแบบ JSON Maps SDK สําหรับ Android รองรับการประกาศรูปแบบเดียวกับ Maps JavaScript API

ขั้นตอนถัดไป

ดูวิธีซ่อนฟีเจอร์บนแผนที่ด้วยการจัดรูปแบบ