การเริ่มต้นใช้งาน

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

หากต้องการใช้การจัดรูปแบบตามข้อมูลสำหรับขอบเขต คุณต้องสร้างรหัสแผนที่ จากนั้นคุณต้องสร้างสไตล์แผนที่ใหม่ เลือกเลเยอร์ฟีเจอร์ขอบเขตที่ต้องการ และเชื่อมโยงสไตล์กับรหัสแผนที่

สร้างรหัสแผนที่

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

ภาพหน้าจอของคอนโซล Google Cloud

สร้างรูปแบบแผนที่ใหม่

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

เลือกฟีเจอร์เลเยอร์

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

จัดการเลเยอร์ฟีเจอร์

  1. ในคอนโซล Google Cloud ให้ไปที่หน้าสไตล์แผนที่

  2. เลือกโปรเจ็กต์หากได้รับข้อความแจ้ง

  3. เลือกรูปแบบแผนที่

  4. คลิกเมนูแบบเลื่อนลงเลเยอร์ฟีเจอร์เพื่อเพิ่มหรือนำเลเยอร์ออก

  5. คลิกบันทึกเพื่อบันทึกการเปลี่ยนแปลงและทำให้การเปลี่ยนแปลงพร้อมใช้งานในแผนที่

ภาพหน้าจอแสดง เมนูแบบเลื่อนลง

อัปเดตโค้ดการเริ่มต้นแผนที่

ขั้นตอนนี้กำหนดให้ต้องเชื่อมโยงรหัสแผนที่กับรูปแบบที่เปิดใช้เลเยอร์ฟีเจอร์อย่างน้อย 1 รายการ หากต้องการยืนยันว่าตั้งค่ารหัสแผนที่อย่างถูกต้องใน Cloud Console แล้ว ให้ตรวจสอบวิธีกำหนดค่ารหัสในส่วนการจัดการ Maps

Swift

// A map ID using a style with one or more feature layers enabled

let mapID = GMSMapID(identifier: "YOUR_MAP_ID")
let camera = GMSCameraPosition(latitude: 40, longitude: -80, zoom: 7)
let options = GMSMapViewOptions()
options.camera = camera
options.mapID = mapID
let mapView = GMSMapView(options: options)

Objective-C

// A map ID using a style with one or more feature layers enabled

GMSMapID *mapID = [GMSMapID mapIDWithIdentifier:@"MAP_ID"];
GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:40 longitude:-80 zoom:7];
GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
options.camera = camera;
options.mapID = mapID;
GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];

เพิ่มเลเยอร์ฟีเจอร์ลงในแผนที่

หากต้องการรับการอ้างอิงไปยังเลเยอร์ของฟีเจอร์ในแผนที่ ให้เรียกใช้ mapView.featureLayer(of:) เมื่อแผนที่เริ่มต้น

Swift

let layer = mapView.featureLayer(of: .locality)

Objective-C

GMSFeatureLayer *layer = [mapView featureLayerOfFeatureType:GMSFeatureTypeLocality];

ตรวจสอบความสามารถของแผนที่

การจัดรูปแบบตามข้อมูลสำหรับขอบเขตต้องใช้ความสามารถที่เปิดใช้ใน คอนโซล Google Cloud และเชื่อมโยงกับรหัสแผนที่ เนื่องจากรหัสแผนที่มีการเปลี่ยนแปลง คุณจึงเรียกใช้ mapView.mapCapabilities ใน GMSMapView เพื่อตรวจสอบว่าความสามารถบางอย่าง (เช่น การจัดรูปแบบตามข้อมูล) พร้อมใช้งานหรือไม่ก่อนที่จะเรียกใช้

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

Swift

class SampleViewController: UIViewController {

  private lazy var mapView: GMSMapView = {
    let options = GMSMapViewOptions()
    options.mapID = GMSMapID(identifier: "YOUR_MAP_ID")
    options.camera = GMSCameraPosition(latitude: 40, longitude: -80, zoom: 7)
    return GMSMapView(options: options)
  }()

  override func loadView() {
    self.view = mapView
    mapView.delegate = self
  }
}

extension SampleViewController: GMSMapViewDelegate {
  func mapView(_ mapView: GMSMapView, didChange mapCapabilities: GMSMapCapabilityFlags) {
    if (!mapCapabilities.contains(.dataDrivenStyling)) {
      // Data-driven styling is *not* available, add a fallback.
      // Existing feature layers are also unavailable.
    }
  }
}

Objective-C

@interface SampleViewController: UIViewController <GMSMapViewDelegate>
@end

@implementation SampleViewController
- (void)loadView {
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:40 longitude:-80 zoom:7];
  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = camera;
  options.mapID = [GMSMapID mapIDWithIdentifier:@"MAP_ID"];
  GMSMapView *mapView = [[GMSMapView alloc] initWithOptions:options];
  mapView.delegate = self;
  self.view = mapView;
}

- (void)mapView:(GMSMapView *)mapView didChangeMapCapabilities:(GMSMapCapabilityFlags)mapCapabilities {
  if (!(mapCapabilities & GMSMapCapabilityFlagsDataDrivenStyling)) {
    // Data-driven styling is *not* available, add a fallback.
    // Existing feature layers are also unavailable.
  }
}
@end