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

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

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

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

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

หากต้องการอัปเดตสไตล์เดียวกันในแอปหลายแอป ให้ดูการปรับแต่งระบบคลาวด์ ซึ่งมีอยู่ใน Google Cloud Console และต้องใช้รหัสแผนที่ อย่ารวมการปรับแต่งในระบบคลาวด์กับการจัดสไตล์แบบฮาร์ดโค้ดไว้ในแอปเดียวกัน

เพื่อหลีกเลี่ยงความขัดแย้งที่อาจเกิดขึ้น

รับโค้ด

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

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

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

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

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

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

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

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

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

เพิ่มทรัพยากรที่มีออบเจ็กต์สไตล์ JSON

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

หมายเหตุ: แอปตัวอย่างที่คุณดาวน์โหลดจาก GitHub ใช้ทรัพยากรดิบ

ทรัพยากรดิบ

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

แสดง/ซ่อน JSON

[
  {
    "featureType": "all",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#242f3e"
      }
    ]
  },
  {
    "featureType": "all",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "lightness": -80
      }
    ]
  },
  {
    "featureType": "administrative",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#746855"
      }
    ]
  },
  {
    "featureType": "administrative.locality",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#d59563"
      }
    ]
  },
  {
    "featureType": "poi",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#d59563"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#263c3f"
      }
    ]
  },
  {
    "featureType": "poi.park",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#6b9a76"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#2b3544"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#9ca5b3"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#38414e"
      }
    ]
  },
  {
    "featureType": "road.arterial",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#212a37"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#746855"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#1f2835"
      }
    ]
  },
  {
    "featureType": "road.highway",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#f3d19c"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "geometry.fill",
    "stylers": [
      {
        "color": "#38414e"
      }
    ]
  },
  {
    "featureType": "road.local",
    "elementType": "geometry.stroke",
    "stylers": [
      {
        "color": "#212a37"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#2f3948"
      }
    ]
  },
  {
    "featureType": "transit.station",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#d59563"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [
      {
        "color": "#17263c"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.fill",
    "stylers": [
      {
        "color": "#515c6d"
      }
    ]
  },
  {
    "featureType": "water",
    "elementType": "labels.text.stroke",
    "stylers": [
      {
        "lightness": -20
      }
    ]
  }
]

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

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

แสดง/ซ่อน JSON

<resources>
  <string name="style_json">
  [
    {
      \"featureType\": \"all\",
      \"elementType\": \"geometry\",
      \"stylers\": [
        {
          \"color\": \"#242f3e\"
        }
      ]
    },
    {
      \"featureType\": \"all\",
      \"elementType\": \"labels.text.stroke\",
      \"stylers\": [
        {
          \"lightness\": -80
        }
      ]
    },
    {
      \"featureType\": \"administrative\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#746855\"
        }
      ]
    },
    {
      \"featureType\": \"administrative.locality\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#d59563\"
        }
      ]
    },
    {
      \"featureType\": \"poi\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#d59563\"
        }
      ]
    },
    {
      \"featureType\": \"poi.park\",
      \"elementType\": \"geometry\",
      \"stylers\": [
        {
          \"color\": \"#263c3f\"
        }
      ]
    },
    {
      \"featureType\": \"poi.park\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#6b9a76\"
        }
      ]
    },
    {
      \"featureType\": \"road\",
      \"elementType\": \"geometry.fill\",
      \"stylers\": [
        {
          \"color\": \"#2b3544\"
        }
      ]
    },
    {
      \"featureType\": \"road\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#9ca5b3\"
        }
      ]
    },
    {
      \"featureType\": \"road.arterial\",
      \"elementType\": \"geometry.fill\",
      \"stylers\": [
        {
          \"color\": \"#38414e\"
        }
      ]
    },
    {
      \"featureType\": \"road.arterial\",
      \"elementType\": \"geometry.stroke\",
      \"stylers\": [
        {
          \"color\": \"#212a37\"
        }
      ]
    },
    {
      \"featureType\": \"road.highway\",
      \"elementType\": \"geometry.fill\",
      \"stylers\": [
        {
          \"color\": \"#746855\"
        }
      ]
    },
    {
      \"featureType\": \"road.highway\",
      \"elementType\": \"geometry.stroke\",
      \"stylers\": [
        {
          \"color\": \"#1f2835\"
        }
      ]
    },
    {
      \"featureType\": \"road.highway\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#f3d19c\"
        }
      ]
    },
    {
      \"featureType\": \"road.local\",
      \"elementType\": \"geometry.fill\",
      \"stylers\": [
        {
          \"color\": \"#38414e\"
        }
      ]
    },
    {
      \"featureType\": \"road.local\",
      \"elementType\": \"geometry.stroke\",
      \"stylers\": [
        {
          \"color\": \"#212a37\"
        }
      ]
    },
    {
      \"featureType\": \"transit\",
      \"elementType\": \"geometry\",
      \"stylers\": [
        {
          \"color\": \"#2f3948\"
        }
      ]
    },
    {
      \"featureType\": \"transit.station\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#d59563\"
        }
      ]
    },
    {
      \"featureType\": \"water\",
      \"elementType\": \"geometry\",
      \"stylers\": [
        {
          \"color\": \"#17263c\"
        }
      ]
    },
    {
      \"featureType\": \"water\",
      \"elementType\": \"labels.text.fill\",
      \"stylers\": [
        {
          \"color\": \"#515c6d\"
        }
      ]
    },
    {
      \"featureType\": \"water\",
      \"elementType\": \"labels.text.stroke\",
      \"stylers\": [
        {
          \"lightness\": -20
        }
      ]
    }
  ]
  </string>
</resources>

ส่งออบเจ็กต์สไตล์ 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) จะมีลักษณะดังนี้

แสดง/ซ่อนไฟล์เลย์เอาต์

<!--
 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.
-->

<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:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.styledmap.MapsActivityRaw"
    map:cameraZoom="10" />

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

ตัวอย่างโค้ดต่อไปนี้จะสมมติว่าโปรเจ็กต์ของคุณมีทรัพยากรสตริงชื่อ 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) มีลักษณะดังนี้

แสดง/ซ่อนไฟล์เลย์เอาต์

<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:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.styledmap.MapsActivityString"
    map:cameraZoom="10" />

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

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

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

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

วิซาร์ดการจัดรูปแบบ Maps Platform

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

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

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

ดูวิธีซ่อนองค์ประกอบบนแผนที่ด้วยการจัดสไตล์