การอ้างอิงรูปแบบสำหรับ Maps JavaScript API

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