Places UI Kit: ไลบรารีที่พร้อมใช้งานซึ่งช่วยให้นักพัฒนาซอฟต์แวร์ปรับแต่งและควบคุมได้ ลองใช้ดู แล้วแชร์ความคิดเห็นเกี่ยวกับประสบการณ์การใช้ UI Kit

Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

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

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

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

หากต้องการประสบการณ์การจัดรูปแบบที่ครอบคลุมมากขึ้น คุณสามารถใช้การจัดรูปแบบ JSON กับการจัดรูปแบบแผนที่ในระบบคลาวด์แทน ซึ่งมีรายการฟีเจอร์แผนที่ที่ครอบคลุมมากขึ้นและตัวเลือกการปรับแต่งที่หลากหลายกว่า สคีมา JSON ของการจัดรูปแบบแผนที่ในระบบคลาวด์ไม่เข้ากันได้แบบย้อนหลังกับการประกาศสไตล์ JSON ที่ฝังไว้ ซึ่งหมายความว่าคุณไม่สามารถใช้ JSON การจัดรูปแบบแผนที่ในระบบคลาวด์ใน Maps JavaScript API ได้โดยตรง อย่างไรก็ตาม คุณสามารถนำเข้าการประกาศสไตล์ JSON ที่ฝังไว้ไปยังสคีมา JSON ของการจัดรูปแบบแผนที่ในระบบคลาวด์ได้

ตัวอย่าง

การประกาศสไตล์ JSON ต่อไปนี้จะเปลี่ยนองค์ประกอบทั้งหมดในแผนที่เป็นสีเทา จากนั้นจะเปลี่ยนสีเรขาคณิตของถนนสายหลักเป็นสีน้ำเงิน และซ่อนป้ายกำกับภูมิทัศน์ทั้งหมด

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

หากต้องการใช้การประกาศสไตล์ JSON กับแผนที่ ให้ส่งอาร์เรย์สไตล์ไปยังพร็อพเพอร์ตี้ MapOptions.styles เมื่อสร้างแผนที่หรือเรียกใช้ Map.setOptions() ดูตัวอย่างที่สมบูรณ์ซึ่งแสดงวิธีใช้การจัดรูปแบบ JSON ในแอปได้ที่การเลือกแผนที่ที่มีการจัดสไตล์

ออบเจ็กต์ JSON

การประกาศสไตล์ JSON ประกอบด้วยองค์ประกอบต่อไปนี้

featureType (ไม่บังคับ) - ฟีเจอร์ที่จะเลือกสำหรับการแก้ไขรูปแบบนี้ องค์ประกอบคือลักษณะทางภูมิศาสตร์บนแผนที่ ซึ่งรวมถึงถนน สวนสาธารณะ แหล่งน้ำ และอื่นๆ หากไม่ระบุฟีเจอร์ ระบบจะเลือกฟีเจอร์ทั้งหมด
elementType (ไม่บังคับ) - พร็อพเพอร์ตี้ของฟีเจอร์ที่ระบุที่จะเลือก องค์ประกอบคือส่วนย่อยของฟีเจอร์ ซึ่งรวมถึงป้ายกำกับและเรขาคณิต หากคุณไม่ระบุองค์ประกอบ ระบบจะเลือกองค์ประกอบทั้งหมดของฟีเจอร์
stylers - กฎที่จะใช้กับองค์ประกอบและฟีเจอร์ที่เลือก Styler จะระบุสี ระดับการมองเห็น และน้ำหนักขององค์ประกอบ คุณสามารถใช้ตัวจัดรูปแบบอย่างน้อย 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"
}

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

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

สีข้อความป้ายกำกับ fill และ stroke จะเปลี่ยนไปตามระดับการซูม กำหนดทั้ง fill และ stroke เสมอเพื่อให้ประสบการณ์การใช้งานสอดคล้องกันในทุกระดับการซูม

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

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

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

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

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

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

การแก้ไขแกมมาจะปรับเปลี่ยนความสว่างในขอบเขตสี โดยทั่วไปจะใช้เพื่อเพิ่มหรือลดคอนทราสต์ นอกจากนี้ โมเดล 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 ที่มีอยู่