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

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

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

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

การจัดรูปแบบจะใช้ได้เฉพาะกับแผนที่ประเภท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 API สำหรับ Android v2
    • ค้นหาโปรเจ็กต์ StyledMap ในตําแหน่งนี้
      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 กับคอมพิวเตอร์ ทำตามinstructionsเพื่อเปิดใช้ตัวเลือกสำหรับนักพัฒนาซอฟต์แวร์ในอุปกรณ์ Android และกำหนดค่าระบบให้ตรวจจับอุปกรณ์ (หรือคุณจะใช้เครื่องมือจัดการอุปกรณ์เสมือน (AVD) ของ Android เพื่อกำหนดค่าอุปกรณ์เสมือนก็ได้ เมื่อเลือกโปรแกรมจำลอง โปรดตรวจสอบว่าคุณได้เลือกอิมเมจที่มี Google APIs โปรดดูรายละเอียดเพิ่มเติมในคู่มือเริ่มต้นใช้งาน)
  2. ใน Android Studio ให้คลิกตัวเลือกเมนูเรียกใช้ (หรือไอคอนปุ่มเล่น) เลือกอุปกรณ์ตามข้อความแจ้ง

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

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

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

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

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

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

วิซาร์ดการจัดรูปแบบแพลตฟอร์มแผนที่

สร้างสไตล์ที่กำหนดเองสำหรับ Google Maps Platform API

ใช้วิซาร์ดการจัดรูปแบบ Maps Platform เพื่อสร้างออบเจ็กต์สไตล์ JSON อย่างรวดเร็ว Maps SDK สำหรับ Android รองรับการประกาศรูปแบบเดียวกับ Maps JavaScript API

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

ดูวิธีซ่อนสถานที่บนแผนที่โดยใช้การจัดรูปแบบ