การอ้างอิงรูปแบบสําหรับ Maps SDK สําหรับ Android

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

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

ตัวอย่าง

การประกาศรูปแบบ JSON ต่อไปนี้จะเปลี่ยนฟีเจอร์แผนที่ทั้งหมดเป็นสีเทา จากนั้น จะระบายสีเรขาคณิตของถนนสายหลักเป็นสีน้ำเงิน และซ่อนป้ายกำกับภูมิประเทศ ทั้งหมด

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

ออบเจ็กต์ JSON

การประกาศรูปแบบ JSON ประกอบด้วยองค์ประกอบต่อไปนี้

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

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

ส่วนที่เหลือของหน้านี้มีข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์ องค์ประกอบ และ ตัวจัดรูปแบบ

featureType

ข้อมูลโค้ด JSON ต่อไปนี้จะเลือกถนนทั้งหมดบนแผนที่

{
  "featureType": "road"
}

ฟีเจอร์หรือประเภทฟีเจอร์คือลักษณะทางภูมิศาสตร์บนแผนที่ ซึ่งรวมถึงถนน สวนสาธารณะ แหล่งน้ำ ธุรกิจ และอื่นๆ

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

ฟีเจอร์บางอย่างมีฟีเจอร์ย่อยที่คุณระบุโดยใช้สัญกรณ์จุด เช่น landscape.natural หรือ road.local หากคุณระบุเฉพาะฟีเจอร์หลัก เช่น road สไตล์ที่คุณระบุสำหรับฟีเจอร์หลักจะมีผลกับ ฟีเจอร์ย่อยทั้งหมด เช่น road.local และ road.highway

โปรดทราบว่าฟีเจอร์หลักอาจมีองค์ประกอบบางอย่างที่ไม่ได้รวมอยู่ในฟีเจอร์ย่อยทั้งหมด

ฟีเจอร์ต่อไปนี้พร้อมใช้งาน

  • all (ค่าเริ่มต้น) เลือกฟีเจอร์ทั้งหมด
  • administrative เลือกเขตบริหารทั้งหมด การจัดรูปแบบ จะส่งผลต่อป้ายกำกับของเขตบริหารเท่านั้น ไม่ใช่เส้นขอบหรือการเติมสี ทางภูมิศาสตร์
    • administrative.country เลือกประเทศ
    • administrative.land_parcel เลือกแปลงที่ดิน
    • administrative.locality เลือกเขต
    • administrative.neighborhood เลือกย่าน
    • administrative.province เลือกจังหวัด
  • landscape เลือกภาพทิวทัศน์ทั้งหมด
    • landscape.man_made เลือกองค์ประกอบที่มนุษย์สร้างขึ้น เช่น อาคารและ โครงสร้างอื่นๆ
    • landscape.natural เลือกองค์ประกอบทางธรรมชาติ เช่น ภูเขา แม่น้ำ ทะเลทราย และธารน้ำแข็ง
    • landscape.natural.landcover เลือกฟีเจอร์สิ่งปกคลุมดิน ซึ่งเป็นวัสดุทางกายภาพ ที่ปกคลุมพื้นผิวโลก เช่น ป่าไม้ ทุ่งหญ้า พื้นที่ชุ่มน้ำ และพื้นดินเปล่า
    • landscape.natural.terrain เลือกองค์ประกอบภูมิประเทศของพื้นผิวดิน เช่น ระดับความสูง ความลาดชัน และการวางแนว
  • poi เลือกจุดที่น่าสนใจทั้งหมด
    • poi.attraction เลือกสถานที่ท่องเที่ยว
    • poi.business เลือกธุรกิจ
    • poi.government เลือกอาคารสถานที่ราชการ
    • poi.medical เลือกบริการฉุกเฉิน ซึ่งรวมถึง โรงพยาบาล ร้านขายยา ตำรวจ แพทย์ และอื่นๆ
    • poi.park เลือกอุทยาน
    • poi.place_of_worship เลือกศาสนสถาน ซึ่งรวมถึง โบสถ์ วัด มัสยิด และอื่นๆ
    • poi.school เลือกโรงเรียน
    • poi.sports_complexเลือกศูนย์กีฬา
  • road เลือกถนนทั้งหมด
    • road.arterial เลือกถนนสายหลัก
    • road.highway เลือกทางหลวง
    • road.highway.controlled_access เลือกทางหลวงที่มี การควบคุมการเข้าถึง
    • road.local เลือกถนนในพื้นที่
  • transit เลือกสถานีและเส้นทางขนส่งสาธารณะทั้งหมด
    • transit.line เลือกเส้นทางขนส่งสาธารณะ
    • transit.station เลือกสถานีขนส่งทั้งหมด
    • transit.station.airport เลือกสนามบิน
    • transit.station.bus เลือกป้ายรถประจำทาง
    • transit.station.rail เลือกสถานีรถไฟ
  • water เลือกแหล่งน้ำ

elementType

ข้อมูลโค้ด JSON ต่อไปนี้จะเลือกป้ายกำกับสำหรับถนนในพื้นที่ทั้งหมด

{
  "featureType": "road.local",
  "elementType": "labels"
}

องค์ประกอบคือส่วนย่อยของฟีเจอร์ ตัวอย่างเช่น ถนนประกอบด้วยเส้นกราฟิก (เรขาคณิต) บนแผนที่ และข้อความที่ระบุชื่อ (ป้ายกำกับ)

องค์ประกอบต่อไปนี้พร้อมใช้งาน แต่โปรดทราบว่าฟีเจอร์หนึ่งๆ อาจรองรับองค์ประกอบบางส่วน บางส่วน หรือทั้งหมด

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

  • all (ค่าเริ่มต้น) เลือกองค์ประกอบทั้งหมดของฟีเจอร์ที่ระบุ
  • geometry จะเลือกองค์ประกอบทางเรขาคณิตทั้งหมดของฟีเจอร์ที่ระบุ
    • geometry.fill จะเลือกเฉพาะการเติมของรูปเรขาคณิตของฟีเจอร์
    • geometry.stroke จะเลือกเฉพาะเส้นของเรขาคณิตของฟีเจอร์
  • labels จะเลือกป้ายกำกับที่เป็นข้อความที่เชื่อมโยงกับฟีเจอร์ที่ระบุ
    • labels.icon จะเลือกเฉพาะไอคอนที่แสดงภายในป้ายกำกับของฟีเจอร์
    • labels.text จะเลือกเฉพาะข้อความของป้ายกำกับ
    • labels.text.fill จะเลือกเฉพาะสีเติมของป้ายกำกับ โดยปกติแล้วการเติมป้ายกำกับจะแสดงเป็นเส้นขอบสีที่ล้อมรอบข้อความป้ายกำกับ
    • labels.text.stroke จะเลือกเฉพาะเส้นขีดของข้อความป้ายกำกับ

stylers

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

ข้อมูลโค้ด JSON ต่อไปนี้แสดงฟีเจอร์เป็นสีเขียวสดโดยใช้ค่า RGB

"stylers": [
  { "color": "#99FF33" }
]

ข้อมูลโค้ดนี้จะนำความเข้มทั้งหมดออกจากสีของฟีเจอร์ ไม่ว่าสีเริ่มต้นจะเป็นสีใดก็ตาม ซึ่งจะทำให้ฟีเจอร์แสดงผลเป็นโทนสีเทา

"stylers": [
  { "saturation": -100 }
]

ข้อมูลโค้ดนี้จะซ่อนฟีเจอร์โดยสมบูรณ์

    "stylers": [
      { "visibility": "off" }
    ]

ระบบรองรับตัวเลือกรูปแบบต่อไปนี้

  • hue (สตริงเลขฐานสิบหก RGB ในรูปแบบ #RRGGBB) ระบุสีพื้นฐาน

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

  • lightness (ค่าทศนิยมระหว่าง -100 และ 100) ระบุการเปลี่ยนแปลงเปอร์เซ็นต์ความสว่างของ องค์ประกอบ ค่าลบจะเพิ่มความมืด (โดย -100 หมายถึงสีดำ) ขณะที่ค่าบวกจะเพิ่มความสว่าง (โดย +100 หมายถึงสีขาว)

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

  • saturation (ค่าทศนิยมระหว่าง -100 ถึง 100) ระบุเปอร์เซ็นต์การเปลี่ยนแปลงความเข้มของ สีพื้นฐานที่จะใช้กับองค์ประกอบ

    หมายเหตุ: ตัวเลือกนี้จะตั้งค่าความอิ่มตัวในขณะที่ยังคงค่าสีและความสว่าง ที่ระบุไว้ในสไตล์เริ่มต้นของ Google (หรือในตัวเลือกสไตล์อื่นๆ ที่คุณ กำหนดไว้ในแผนที่) สีที่ได้จะสัมพันธ์กับสไตล์ของ แผนที่ฐาน หาก Google ทำการเปลี่ยนแปลงสไตล์แผนที่ฐาน การเปลี่ยนแปลงดังกล่าว จะส่งผลต่อฟีเจอร์ของแผนที่ที่จัดรูปแบบด้วย saturation เราขอแนะนำให้ใช้ตัวจัดรูปแบบ color แบบสัมบูรณ์หากทำได้

  • gamma (ค่าทศนิยมระหว่าง 0.01 ถึง 10.0 โดย 1.0 ไม่มีการปรับ) ระบุ ปริมาณการปรับแกมมาที่จะใช้กับองค์ประกอบ การแก้ไขแกมมา จะปรับความสว่างของสีแบบไม่เชิงเส้นโดยไม่ส่งผลต่อ ค่าสีขาวหรือสีดำ โดยปกติแล้ว การแก้ไขแกมมาจะใช้เพื่อแก้ไข คอนทราสต์ขององค์ประกอบหลายรายการ เช่น คุณสามารถแก้ไขแกมมาเพื่อ เพิ่มหรือลดคอนทราสต์ระหว่างขอบและด้านในของ องค์ประกอบ

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

  • invert_lightness (if true) จะกลับความสว่างที่มีอยู่ ซึ่งมีประโยชน์ เช่น ในการเปลี่ยนไปใช้แผนที่สีเข้มที่มีข้อความสีขาวได้อย่างรวดเร็ว

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

  • visibility (on, off หรือ simplified) จะระบุว่าองค์ประกอบปรากฏบนแผนที่หรือไม่และอย่างไร simplifiedระดับการมองเห็นจะนำฟีเจอร์รูปแบบบางอย่าง ออกจากฟีเจอร์ที่ได้รับผลกระทบ เช่น ถนนจะได้รับการปรับให้เป็นเส้นที่บางลง โดยไม่มีเส้นขอบ ในขณะที่สวนสาธารณะจะไม่มีข้อความป้ายกำกับ แต่ยังคงมี ไอคอนป้ายกำกับ
  • color (สตริงเลขฐานสิบหก RGB ในรูปแบบ #RRGGBB) จะกำหนดสีของฟีเจอร์
  • weight (ค่าจำนวนเต็มที่มากกว่าหรือเท่ากับ 0) ตั้งค่า น้ำหนักของฟีเจอร์เป็นพิกเซล การตั้งค่าน้ำหนักให้มีค่าสูงอาจ ส่งผลให้เกิดการตัดใกล้กับขอบของไทล์

ระบบจะใช้กฎสไตล์ตามลำดับที่คุณระบุ อย่ารวมการดำเนินการหลายอย่างไว้ในการดำเนินการรูปแบบเดียว แต่ให้กำหนดการดำเนินการแต่ละอย่างเป็นรายการแยกกันในอาร์เรย์รูปแบบ

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

รูปแบบโทนสี ความอิ่มตัว ความสว่าง

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

การแก้ไขแกมมาจะปรับความสว่างในพื้นที่สี โดยทั่วไปจะใช้เพื่อเพิ่มหรือลดคอนทราสต์ นอกจากนี้ โมเดล HSL ยังกำหนดสี ภายในพื้นที่พิกัดที่ hue ระบุการวางแนว ภายในวงล้อสี ขณะที่ความอิ่มสีและความสว่างระบุแอมพลิจูด ตามแกนต่างๆ การวัดเฉดสีจะอยู่ในพื้นที่สี RGB ซึ่งคล้ายกับพื้นที่สี RGB ส่วนใหญ่ ยกเว้นเฉดสีขาวและ ดำ

รูปแบบโทนสี ความอิ่มตัว ความสว่าง

แม้ว่า hue จะใช้ค่าสีแบบเลขฐาน 16 ของ HTML แต่จะใช้ค่านี้ เพื่อกำหนดสีพื้นฐานเท่านั้น ซึ่งก็คือการวางแนวรอบวงล้อสี ไม่ใช่ความอิ่มตัวหรือความสว่าง ซึ่งจะ ระบุแยกกันเป็นการเปลี่ยนแปลงเปอร์เซ็นต์

เช่น คุณสามารถกำหนดเฉดสีสำหรับสีเขียวบริสุทธิ์เป็น hue:0x00ff00 หรือ hue:0x000100 เฉดสีทั้ง 2 เหมือนกัน ค่าทั้ง 2 ค่าชี้ไปยังสีเขียวบริสุทธิ์ในโมเดลสี HSL

วงล้อสี RGB

ค่า RGB hue ซึ่งประกอบด้วยสีแดง เขียว และน้ำเงินในสัดส่วนที่เท่ากัน ไม่ได้ระบุโทนสี เนื่องจากไม่มีค่าใดที่ระบุการวางแนวใน พื้นที่พิกัด HSL ตัวอย่างเช่น "#000000" (ดำ), "#FFFFFF" (ขาว) และเฉดสีเทาทั้งหมด หากต้องการระบุสีดำ ขาว หรือเทา คุณต้อง นำ saturation ทั้งหมดออก (ตั้งค่าเป็น -100) และ ปรับ lightness แทน

นอกจากนี้ เมื่อแก้ไขฟีเจอร์ที่มีอยู่ซึ่งมีรูปแบบสีอยู่แล้ว การเปลี่ยนค่า เช่น hue จะไม่เปลี่ยน saturation หรือ lightness ที่มีอยู่