ข้อมูลอ้างอิงเกี่ยวกับสไตล์สําหรับ Maps JavaScript API

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

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

หากต้องการอัปเดตรูปแบบเดียวกันในหลายแอป ให้ดูที่ การปรับแต่งในระบบคลาวด์ ซึ่งมีให้บริการในคอนโซล Google Cloud และต้องใช้รหัสแผนที่ อย่ารวมการปรับแต่งในระบบคลาวด์และการจัดรูปแบบที่ฮาร์ดโค้ด ไว้ในแอปเดียวกัน

เพื่อหลีกเลี่ยงความขัดแย้งที่อาจเกิดขึ้น

หากต้องการประสบการณ์การจัดรูปแบบที่ครอบคลุมมากขึ้น คุณสามารถใช้การจัดรูปแบบ JSON กับการจัดรูปแบบแผนที่ในระบบคลาวด์แทนได้ ซึ่งมีรายการองค์ประกอบในแผนที่ที่ครอบคลุมมากขึ้นและตัวเลือกการปรับแต่งที่มากขึ้น สคีมา JSON ของการจัดรูปแบบแผนที่ในระบบคลาวด์ไม่ เข้ากันได้แบบย้อนหลังกับการประกาศรูปแบบ JSON แบบฝัง ซึ่งหมายความว่าคุณไม่สามารถใช้ JSON การจัดรูปแบบแผนที่ในระบบคลาวด์ใน Maps JavaScript API ได้โดยตรง อย่างไรก็ตาม คุณสามารถนำเข้าการประกาศรูปแบบ JSON ที่ฝังไว้ลงในสคีมา JSON ของการจัดรูปแบบแผนที่ในระบบคลาวด์ได้

ตัวอย่าง

การประกาศรูปแบบ 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

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

ข้อมูลโค้ด 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 styler แบบสัมบูรณ์หากทำได้

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

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

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

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

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

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

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

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

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

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

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

วงล้อสี RGB

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

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