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

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

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

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

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

ตัวอย่าง

การประกาศสไตล์ 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 - กฎที่จะใช้กับองค์ประกอบและฟีเจอร์ที่เลือก สไตล์เลอร์ระบุสี ระดับการมองเห็น และน้ำหนักขององค์ประกอบ คุณใช้สไตล์เลอร์อย่างน้อย 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"
}

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

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

• 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) จะกำหนดน้ำหนักขององค์ประกอบเป็นพิกเซล การตั้งค่าน้ำหนักเป็นค่าสูงอาจส่งผลให้มีการตัดออกบริเวณขอบของการ์ด

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

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

รูปแบบสี ความอิ่มตัว และความสว่าง

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

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

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

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

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

วงล้อสี RGB

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

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