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

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

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

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

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

รับโค้ด

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

สร้างโครงการพัฒนา

ทําตามขั้นตอนต่อไปนี้เพื่อสร้างโครงการบทแนะนําใน Android Studio

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

  4. นําเข้าโครงการบทแนะนํา:

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

แผนที่ที่มีการจัดรูปแบบจะใช้แนวคิดสองข้อเพื่อใช้สีและการเปลี่ยนแปลงลักษณะอื่นๆ กับแผนที่

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

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

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

สร้างรูปแบบที่กําหนดเองสําหรับ Google Maps Platform API

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

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

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