‫Google برای ترجمه محتوا به زبان ترجیحی شما از فناوری هوشواره استفاده می‌کند. ترجمه‌های هوشواره‌ای ممکن است اشتباه داشته باشند.

افزودن نقشه قابل‌طراحی

پلاتفرم را انتخاب کنید: Android iOS JavaScript

این آموزش به شما نشان می‌دهد که چگونه نقشه‌ای با سبک سفارشی به برنامه Android خود اضافه کنید. این آموزش از حالت شب به‌عنوان نمونه‌ای از سبک سفارشی استفاده می‌کند.

با گزینه‌های سبک می‌توانید ارائه سبک‌های استاندارد نقشه Google را سفارشی‌سازی کنید، نمایش بصری ویژگی‌هایی مانند جاده‌ها، پارک‌ها، کسب‌وکارها، و سایر نقاط جالب را تغییر دهید. این یعنی می‌توانید بر مؤلفه‌های خاصی از نقشه تأکید کنید یا نقشه را مکمل سبک برنامه‌تان کنید.

سبک‌بندی فقط روی نوع نقشه normal کار می‌کند. سبک‌بندی بر نقشه‌های داخلی تأثیر نمی‌گذارد.

برای تجربه سبک‌پردازی جامع‌تر، می‌توانید به‌جای آن از سبک‌پردازی JSON با سبک‌پردازی نقشه بااستفاده از فضای ابری استفاده کنید که فهرست گسترده‌تری از عارضه‌های نقشه و گزینه‌های سفارشی‌سازی بیشتری ارائه می‌دهد. طرح‌واره JSON سبک‌پردازی نقشه بااستفاده از فضای ابری با اعلامیه‌های سبک JSON جاسازی‌شده سازگار با نسخه قدیمی نیست. این یعنی JSON سبک‌پردازی نقشه بااستفاده از فضای ابری را نمی‌توان مستقیماً در «کیت توسعه نرم‌افزار Google Maps برای Android» استفاده کرد. بااین‌حال، می‌توانید اعلامیه‌های سبک JSON جاسازی‌شده را به طرح‌واره JSON سبک‌پردازی نقشه بااستفاده از فضای ابری وارد کنید.

دریافت کد

مخزن Google Maps Android API v2 Samples را از GitHub شبیه‌سازی یا بارگیری کنید.

راه‌اندازی پروژه توسعه

برای ایجاد پروژه آموزشی در Android Studio، این مراحل را دنبال کنید.

«استودیو Android» را بارگیری و نصب کنید.
بسته خدمات Google Play را به Android Studio اضافه کنید.
اگر هنگام شروع مطالعه این آموزش، مخزن نمونه‌های Google Maps Android API v2 را شبیه‌سازی یا بارگیری نکرده‌اید، این کار را انجام دهید.
وارد کردن پروژه آموزشی:
- در Android Studio، فایل > جدید > وارد کردن پروژه را انتخاب کنید.
- به مکانی بروید که Google Maps Android API v2 Samples repository را پس‌از بارگیری در آن ذخیره کرده‌اید.
- پروژه StyledMap را در این مکان پیدا کنید:
  PATH-TO-SAVED-REPO/android-samples/tutorials/StyledMap
- فهرست راهنمای پروژه را انتخاب کنید، سپس روی تأیید کلیک کنید. اکنون «استودیو Android» پروژه شما را بااستفاده از ابزار ساخت Gradle می‌سازد.

دریافت کلید میانای برنامه‌سازی کاربردی و فعال کردن میاناهای برنامه‌سازی کاربردی لازم

برای تکمیل این آموزش، به کلید Google API نیاز دارید که برای استفاده از کیت توسعه نرم‌افزار Google Maps برای Android مجاز باشد.

برای دریافت کلید و فعال کردن API، روی دکمه زیر کلیک کنید.

دریافت کلید

برای جزئیات بیشتر، راهنمای دریافت کلید میانای برنامه‌سازی کاربردی را ببینید.

کلید میانای برنامه‌سازی کاربردی را به برنامه‌تان اضافه کنید

فایل gradle.properties پروژه‌تان را ویرایش کنید.
کلید میانای برنامه‌سازی کاربردی خود را در مقدار ویژگی GOOGLE_MAPS_API_KEY جای‌گذاری کنید. وقتی برنامه‌تان را می‌سازید، Gradle کلید میانای برنامه‌سازی کاربردی را در مانیفست Android برنامه کپی می‌کند.
```
GOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
```

ساختن و اجرای برنامه

دستگاه Android را به رایانه وصل کنید. دستورالعمل‌ها را دنبال کنید تا گزینه‌های توسعه‌دهنده را در دستگاه Android خود فعال کنید و سیستم خود را برای شناسایی دستگاه پیکربندی کنید. (یا می‌توانید از مدیر دستگاه مجازی Android (AVD) برای پیکربندی دستگاه مجازی استفاده کنید. هنگام انتخاب شبیه‌ساز، مطمئن شوید تصویری را انتخاب می‌کنید که شامل Google APIs باشد. برای جزئیات بیشتر، به راهنمای شروع به کار مراجعه کنید.)
در Android Studio، روی گزینه منو اجرا (یا نماد دکمه پخش) کلیک کنید. دستگاهی را طبق درخواست انتخاب کنید.

Android Studio برای ساختن برنامه، Gradle را فراخوانی می‌کند و سپس برنامه را در دستگاه یا شبیه‌ساز اجرا می‌کند. باید نقشه‌ای با سبک تیره (حالت شب) ببینید، شبیه به تصویر موجود در این صفحه.

عیب‌یابی:

اگر نقشه‌ای نمی‌بینید، بررسی کنید که کلید میانای برنامه‌سازی کاربردی را دریافت کرده باشید و آن را به برنامه اضافه کرده باشید، همان‌طور که در بالا توضیح داده شد. برای پیام‌های خطا درباره کلید میانای برنامه‌سازی کاربردی، ورود به سیستم را در Android Monitor در Android Studio بررسی کنید.
از ابزارهای اشکال‌زدایی «استودیو Android» برای مشاهده گزارش‌ها و اشکال‌زدایی برنامه استفاده کنید.

درک کردن کد

این بخش از آموزش مهم‌ترین بخش‌های برنامه StyledMap را توضیح می‌دهد تا به شما کمک کند نحوه ساختن برنامه‌ای مشابه را درک کنید.

منبعی حاوی شیء سبک JSON اضافه کنید

منبعی را به پروژه توسعه‌تان اضافه کنید که حاوی اعلامیه‌های سبک شما در قالب JSON باشد. می‌توانید از منبع خام یا رشته استفاده کنید، همان‌طور که در مثال‌های زیر نشان داده شده است.

منبع خام

منبع خامی را در /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

ایجاد سبک‌های سفارشی برای میاناهای برنامه‌سازی کاربردی Google Maps Platform

از جادوگر سبک‌بندی پلاتفرم Maps به‌عنوان روشی سریع برای تولید شیء سبک‌بندی JSON استفاده کنید. کیت توسعه نرم‌افزار Google Maps برای Android از همان اعلان‌های سبکی پشتیبانی می‌کند که Maps JavaScript API پشتیبانی می‌کند.

مرحله بعدی

ببینید چگونه می‌توانید با سبک‌بندی ویژگی‌ها را در نقشه پنهان کنید.

افزودن نقشه قابل‌طراحی با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

دریافت کد

راه‌اندازی پروژه توسعه

دریافت کلید میانای برنامه‌سازی کاربردی و فعال کردن میاناهای برنامه‌سازی کاربردی لازم

کلید میانای برنامه‌سازی کاربردی را به برنامه‌تان اضافه کنید

ساختن و اجرای برنامه

درک کردن کد

منبعی حاوی شیء سبک JSON اضافه کنید

منبع خام

منبع رشته

شیء سبک JSON را به نقشه خود منتقل کنید

منبع خام

منبع رشته

اطلاعات بیشتر درباره اعلان‌های سبک JSON

دستیار سبک‌بندی پلاتفرم Maps

مرحله بعدی

افزودن نقشه قابل‌طراحی