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

หน้านี้ได้รับการแปลโดย Cloud Translation API

การซ่อนฟีเจอร์แผนที่ด้วยการจัดรูปแบบ

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

นอกจากการเปลี่ยนรูปแบบของจุดสนใจบนแผนที่แล้ว คุณยังซ่อนสถานที่ทั้งหมดได้ ตัวอย่างนี้แสดงวิธีซ่อนจุดที่น่าสนใจทางธุรกิจ (POI) และไอคอนขนส่งสาธารณะบนแผนที่

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

ส่งออบเจ็กต์รูปแบบ JSON ไปยังแผนที่ของคุณ

หากต้องการจัดรูปแบบแผนที่ ให้เรียกใช้ GoogleMap.setMapStyle() ผ่านออบเจ็กต์ MapStyleOptions ที่มีการประกาศรูปแบบของคุณในรูปแบบ JSON คุณโหลด 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)));
    }
}

กำหนดทรัพยากรดิบใน /res/raw/style_json.json ที่มีการประกาศรูปแบบ JSON ต่อไปนี้เพื่อซ่อนจุดที่น่าสนใจทางธุรกิจ (POI)

แสดง/ซ่อน JSON

[
  {
    "featureType": "poi.business",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]

การประกาศรูปแบบต่อไปนี้จะซ่อนไอคอนจุดที่น่าสนใจและไอคอนขนส่งสาธารณะ

แสดง/ซ่อน JSON

[
  {
    "featureType": "poi.business",
    "elementType": "all",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]

เลย์เอาต์ (activity_maps.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.mapstyles.MapsActivityRaw"
    map:cameraZoom="13" />

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

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

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

แสดง/ซ่อน JSON

<resources>
  <string name="style_json">
  [
    {
      \"featureType\": \"poi.business\",
      \"elementType\": \"all\",
      \"stylers\": [
        {
          \"visibility\": \"off\"
        }
      ]
    }
  ]
  </string>
</resources>

แสดง/ซ่อน JSON

<resources>
  <string name="style_json">
  [
    {
      \"featureType\": \"poi.business\",
      \"elementType\": \"all\",
      \"stylers\": [
        {
          \"visibility\": \"off\"
        }
      ]
    },
    {
      \"featureType\": \"transit\",
      \"elementType\": \"labels.icon\",
      \"stylers\": [
        {
          \"visibility\": \"off\"
        }
      ]
    }
  ]
  </string>
</resources>

เลย์เอาต์ (activity_maps.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.mapstyles.MapsActivityString"
    map:cameraZoom="13" />

การประกาศรูปแบบ JSON

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

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

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

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

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

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

ตัวอย่างโค้ดแบบเต็ม

ที่เก็บ ApiDemos ใน GitHub มีตัวอย่างที่สาธิตการใช้งานการจัดรูปแบบ