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