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

เลือกแพลตฟอร์ม แอนดรอยด์ iOS JavaScript

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

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

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

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

รับโค้ด

โคลนหรือดาวน์โหลดที่เก็บตัวอย่างสำหรับ 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 ลงใน Android ของแอป ไฟล์ Manifest

   GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
   

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

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

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

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

• หากคุณไม่เห็นแผนที่ ให้ตรวจสอบว่าคุณมีคีย์ API และเพิ่มลงใน ตามที่อธิบายไว้ข้างต้น ตรวจสอบการเข้าสู่ระบบ Android Android Monitor ของ 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

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

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

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

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

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

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

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

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