บทแนะนำนี้จะแสดงวิธีเพิ่มแผนที่ด้วยการจัดรูปแบบที่กำหนดเองให้กับ Android ของคุณ แอป บทแนะนำใช้โหมดกลางคืนเป็นตัวอย่างของการจัดรูปแบบที่กำหนดเอง
ด้วยตัวเลือกรูปแบบ คุณสามารถปรับแต่งการน��เสนอแผนที่มาตรฐานของ Google โดยเปลี่ยนการแสดงภาพของฟีเจอร์ต่างๆ เช่น ถนน สวนสาธารณะ ธุรกิจ และจุดที่น่าสนใจอื่นๆ ซึ่งหมายความว่าคุณสามารถเน้นย้ำ ส่วนประกอบบางอย่างของแผนที่ หรือทำให้แผนที่ส่งเสริมรูปแบบ แอป
การจัดรูปแบบใช้ได้เฉพาะในแผนที่ประเภท normal
เท่านั้น การจัดรูปแบบไม่มีผลต่อ
แผนที่ในอาคาร
รับโค้ด
โคลนหรือดาวน์โหลดที่เก็บตัวอย่างสำหรับ Google Maps Android API v2 จาก GitHub
ตั้งค่าโปรเจ็กต์การพัฒนา
ทำตามขั้นตอนต่อไปนี้เพื่อสร้างโปรเจ็กต์บทแนะนำใน Android Studio
- ดาวน์โหลดและติดตั้ง Android Studio
- เพิ่มแพ็กเกจบริการ Google Play ใน Android Studio
- โคลนหรือดาวน์โหลดที่เก็บตัวอย่างสำหรับ Google Maps Android API v2 หากคุณไม่ได้ทำสิ่งนั้นเมื่อคุณเริ่มอ่านบทแนะนำนี้
นำเข้าโปรเจ็กต์บทแนะนำโดยทำดังนี้
- ใน 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 ลงในแอป
- แก้ไขไฟล์
gradle.properties
ของโปรเจ็กต์ วางคีย์ API ลงในค่าของพร็อพเพอร์ตี้
GOOGLE_MAPS_API_KEY
วันและเวลา คุณสร้างแอป Gradle จะคัดลอกคีย์ API ลงใน Android ของแอป ไฟล์ ManifestGOOGLE_MAPS_API_KEY=PASTE-YOUR-API-KEY-HERE
สร้างและเรียกใช้แอป
- เชื่อมต่ออุปกรณ์ Android กับคอมพิวเตอร์ ทำตาม วิธีการเปิดใช้ตัวเลือกของนักพัฒนาซอฟต์แวร์บน Android ของคุณ อุปกรณ์และกำหนดค่าระบบให้ตรวจหาอุปกรณ์ (หรือคุณสามารถ ให้ใช้ โปรแกรมจัดการอุปกรณ์เสมือน (AVD) ของ Android เพื่อกำหนดค่าระบบเสมือน อุปกรณ์ เมื่อเลือกโปรแกรมจำลอง โปรดเลือกรูปภาพที่มี Google API ดูรายละเอียดเพิ่มเติมได้ที่ คู่มือเริ่มต้นใช้งาน)
- ใน Android Studio ให้คลิกตัวเลือกเมนูเรียกใช้ (หรือไอคอนปุ่มเล่น) เลือกอุปกรณ์ตามข้อความแจ้ง
Android Studio เรียกใช้ Gradle เพื่อสร้างแอป แล้วเรียกใช้แอปบน อุปกรณ์หรือในโปรแกรมจำลอง คุณควรจะเห็นแผนที่พร้อมโหมดมืด (โหมดกลางคืน) การจัดรูปแบบคล้ายกับรูปภาพในหน้านี้
การแก้ปัญหา:
- หากคุณไม่เห็นแผนที่ ให้ตรวจสอบว่าคุณมีคีย์ API และเพิ่มลงใน ตามที่อธิบายไว้ข้างต้น ตรวจสอบการเข้าสู่ระบบ Android Android Monitor ของ Studio เพื่อดูข้อความแสดงข้อผิดพลาดเกี่ยวกับคีย์ API
- ใช้เครื่องมือแก้ไขข้อบกพร่องของ Android Studio เพื่อดูบันทึกและแก้ไขข้อบกพร่อง แอปนั้น
ทำความเข้าใจโค้ด
ส่วนนี้ของบทแนะนำจะอธิบายส่วนที่สำคัญที่สุดของ 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
แผนที่ที่มีการจัดรูปแบบจะใช้สองแนวคิดในการปรับใช้สีและการเปลี่ยนแปลงลักษณะอื่นๆ กับ แผนที่:
- ตัวเลือกจะระบุองค์ประกอบทางภูมิศาสตร์ที่คุณสามารถ
รูปแบบบนแผนที่ ซึ่งรวมถึงถนน สวนสาธารณะ แหล่งน้ำ และ
รวมถึงป้ายกำกับด้วย ตัวเลือกประกอบด้วยฟีเจอร์
และ องค์ประกอบ ซึ่งระบุเป็น
featureType
และ พร็อพเพอร์ตี้elementType
- เครื่องมือจัดแต่งทรงผมคือคุณสมบัติด้านสีและการมองเห็นที่คุณสามารถ นำไปใช้กับองค์ประกอบต่างๆ ของแผนที่ ซึ่งจะกำหนดสีที่แสดงโดยใช้ ชุดค่าผสมของโทนสี สี และความสว่าง/แกมมา
ดูข้อมูลอ้างอิงสไตล์สำหรับคำอธิบายโดยละเอียดเกี่ยวกับ ตัวเลือกการจัดรูปแบบ JSON
วิซาร์ดการจัดรูปแบบ Maps Platform
ใช้วิซาร์ดการจัดรูปแบบแพลตฟอร์ม Maps เป็นวิธีที่รวดเร็วในการสร้าง ออบเจ็กต์การจัดรูปแบบ JSON Maps SDK สำหรับ Android สนับสนุนรูปแบบเดียวกัน เป็น Maps JavaScript API
ขั้นตอนถัดไป
ดูวิธีซ่อนสถานที่บนแผนที่ด้วยการจัดรูปแบบ