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

เลือกแพลตฟอร์ม: 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 Android API 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 และกำหนดค่าระบบให้ตรวจหาอุปกรณ์ดังกล่าว (หรือจะใช้ Android Virtual Device Manager (AVD) Manager เพื่อกำหนดค่าอุปกรณ์เสมือนก็ได้) เมื่อเลือกโปรแกรมจำลอง โปรดตรวจสอบว่าคุณได้เลือกอิมเมจที่มี 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

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

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

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

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