ปรับแต่งการนำเสนอแผนที่ของ Google มาตรฐานโดยใช้สไตล์ของคุณเองเมื่อใช้ Maps Static API คุณเปลี่ยนการแสดงภาพของฟีเจอร์ต่างๆ ได้ เช่น ถนน สวนสาธารณะ พื้นที่ที่สร้างขึ้น และสถานที่น่าสนใจอื่นๆ เปลี่ยนสีหรือสไตล์เพื่อเน้นเนื้อหาบางอย่าง ส่งเสริมเนื้อหาแวดล้อมในหน้า หรือซ่อนลักษณะเด่นได้โดยสิ้นเชิง
ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงแผนที่เมืองบรุกลิน สหรัฐอเมริกา โดยใช้สีของถนนท้องถิ่นเป็นสีเขียวสดใสและพื้นที่พักอาศัยเป็นสีดำ และยังปรับค่าความสว่างของป้ายกํากับเพื่อให้ดูโดดเด่นขึ้นในพื้นหลังสีเข้ม โปรดทราบว่าตัวอย่างที่ใช้งานได้นี้ใช้การเข้ารหัส URL:
https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15¢er=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY&signature=YOUR_SIGNATURE
![แผนที่เมืองบรุกลินที่มีการจัดรูปแบบ](https://developers.google.cn/static/maps/documentation/maps-static/images/brooklyn-map.png?authuser=5&hl=th)
ตัวอย่างต่อไปนี้ใช้การดําเนินการจัดรูปแบบและการลดความซับซ้อนเพื่อประมาณการรูปลักษณ์ของแผนที่ถนนในสหรัฐอเมริกา
https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12¢er=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY&signature=DITIGAL_SIGNATURE
![US Road Atlas Map Style](https://developers.google.cn/static/maps/documentation/maps-static/images/us-road-atlas-map.png?authuser=5&hl=th)
ไวยากรณ์ของรูปแบบ
หากต้องการสร้างแมปที่มีสไตล์ที่กำหนดเอง ให้ใส่พารามิเตอร์ style
อย่างน้อย 1 รายการใน URL ของคำขอ
การประกาศ style
แต่ละรายการอาจมีอาร์กิวเมนต์ต่อไปนี้ ซึ่งคั่นด้วยอักขระไปป์ ("|
")
feature
(ไม่บังคับ) ระบุฟีเจอร์ให้เลือก สำหรับการแก้ไขสไตล์นี้ ฟีเจอร์ต่างๆ รวมถึงสิ่งต่างๆ บนแผนที่ เช่น ถนน สวนสาธารณะ หรือจุดสนใจอื่นๆ หากไม่มีอาร์กิวเมนต์feature
รูปแบบที่ระบุจะมีผลกับฟีเจอร์ทั้งหมดelement
(ไม่บังคับ) ระบุองค์ประกอบของฟีเจอร์ที่ระบุเพื่อเลือกการแก้ไขสไตล์นี้ องค์ประกอบคือลักษณะของจุดสนใจ เช่น เรขาคณิตหรือป้ายกำกับ หากไม่มีอาร์กิวเมนต์element
สไตล์จะใช้กับองค์ประกอบทั้งหมดของฟีเจอร์ที่ระบุ- ชุดกฎรูปแบบ (บังคับ) ที่จะใช้กับฟีเจอร์และองค์ประกอบที่ระบุ API จะใช้กฎตามลำดับที่ปรากฏในการประกาศ
style
คุณจะรวมกฎได้ไม่จำกัดจำนวนภายในข้อจำกัดความยาว URL ปกติของ Maps Static API
style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument
ฟีเจอร์
การประกาศ style
ต่อไปนี้กำหนดสีถนนทุกเส้นบนแผนที่
style=feature:road|color:0xffffff
การเลือกฟีเจอร์ที่พบบ่อยบางส่วนมีดังนี้
feature:all
(ค่าเริ่มต้น) เลือกสถานที่ทั้งหมดของแผนที่feature:road
เลือกถนนทั้งหมดบนแผนที่feature:road.local
เลือกถนนท้องถิ่นทั้งหมด
สถานที่หรือประเภทของฟีเจอร์เป็นลักษณะทางภูมิศาสตร์บนแผนที่ ซึ่งรวมถึงถนน สวนสาธารณะ แหล่งน้ำ ธุรกิจ และอื่นๆ
ฟีเจอร์จะสร้างแผนผังหมวดหมู่โดยมี 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
เลือกแหล่งน้ำ
องค์ประกอบ
การประกาศ style
ต่อไปนี้เป็นสีป้ายกำกับสำหรับถนนท้องถิ่นทั้งหมด
style=feature:road.local|element:labels|color:0xffffff
องค์ประกอบคือส่วนย่อยของจุดสนใจ ตัวอย่างเช่น ถนนประกอบด้วยเส้นกราฟิก (เรขาคณิต) บนแผนที่และข้อความที่แสดงถึงชื่อ (ป้ายกำกับ)
องค์ประกอบต่อไปนี้พร้อมใช้งาน แต่โปรดทราบว่าบางฟีเจอร์อาจไม่รองรับองค์ประกอบบางอย่าง บางองค์ประกอบ หรือทั้งหมด
all
(ค่าเริ่มต้น) เลือกองค์ประกอบทั้งหมดของฟีเจอร์ที่ระบุgeometry
เลือกองค์ประกอบทางเรขาคณิตทั้งหมดของฟีเจอร์ที่ระบุgeometry.fill
เลือกเฉพาะการเติมรูปเรขาคณิตของฟีเจอร์geometry.stroke
เลือกเฉพาะเส้นโครงร่างของเรขาคณิตของฟีเจอร์
labels
เลือกป้ายกำกับข้อความที่เกี่ยวข้องกับฟีเจอร์ที่ระบุlabels.icon
เลือกเฉพาะไอคอนที่แสดงในป้ายกำกับของฟีเจอร์labels.text
เลือกเฉพาะข้อความของป้ายกำกับlabels.text.fill
เลือกสีเติมของป้ายกำกับเท่านั้น โดยปกติแล้ว สีเติมของป้ายกำกับจะแสดงเป็นเส้นกรอบสีที่ล้อมรอบข้อความในป้ายกำกับlabels.text.stroke
เลือกเฉพาะเส้นโครงร่างของข้อความของป้ายกำกับ
กฎรูปแบบ
กฎรูปแบบคือตัวเลือกการจัดรูปแบบซึ่งจะใช้กับฟีเจอร์และองค์ประกอบที่ระบุภายในการประกาศ style
แต่ละรายการ
การประกาศ style
ต่อไปนี้ใช้กฎรูปแบบ 2 ข้อกับถนนในแผนที่ กฎข้อแรกใส่สีให้กับถนน กฎข้อที่ 2 ทำให้การแสดงถนนง่ายขึ้น จึงมีเส้นที่บางลงโดยไม่มีขอบมากเกินไป
style=feature:road|color:0xffffff|visibility:simplified
การประกาศ style
แต่ละรายการต้องมีการดำเนินการอย่างน้อย 1 รายการ
ที่คั่นด้วยอักขระไปป์ ("|
") การดำเนินการแต่ละรายการจะระบุค่าอาร์กิวเมนต์โดยใช้อักขระโคลอน (":
") และการดำเนินการทั้งหมดจะมีผลกับการเลือกในลำดับที่คุณระบุ
ระบบรองรับตัวเลือกรูปแบบต่อไปนี้
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
ที่มีอยู่