การอ้างอิงรูปแบบสําหรับ 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 จะเลือกเฉพาะไอคอนที่แสดงในป้ายกํากับ&#39 ฟีเจอร์
  • 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) จะกําหนดน้ําหนักของฟีเจอร์ในหน่วยพิกเซล การตั้งค่าน้ําหนักให้มีค่าสูงอาจส่งผลให้มีการตัดคลิปใกล้กับขอบของชิ้นส่วนแผนที่

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

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

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

แผนที่ที่มีการจัดรูปแบบจะใช้โมเดล Hue, ความอิ่มตัว, ความสว่าง (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 ที่มีอยู่