การอ้างอิงรูปแบบสําหรับ Maps SDK สําหรับ iOS

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

ตัวเลือกสไตล์ช่วยให้คุณปรับแต่งการนำเสนอสไตล์แผนที่มาตรฐานของ 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"
}

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

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

สี 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 (สตริงเลขฐาน 16 ของ 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, or simplified) จะระบุว่าองค์ประกอบจะปรากฏบนแผนที่หรือไม่และปรากฏอย่างไร การมองเห็นแบบ simplified จะนำฟีเจอร์สไตล์บางอย่างออกจากฟีเจอร์ที่ได้รับผลกระทบ เช่น ถนนจะแสดงเป็นเส้นที่บางลงโดยไม่มีเส้นขอบ ขณะที่สวนสาธารณะจะไม่มีข้อความป้ายกำกับ แต่ยังคงมีไอคอนป้ายกำกับ
  • color (สตริงเลขฐาน 16 ของ RGB ในรูปแบบ #RRGGBB) จะตั้งค่าสีของฟีเจอร์
  • weight (ค่าจำนวนเต็มที่มากกว่าหรือเท่ากับ 0) จะตั้งค่า ความหนาของฟีเจอร์เป็นพิกเซล การตั้งค่าความหนาเป็นค่าสูงอาจ ทำให้เกิดการตัดใกล้กับเส้นขอบไทล์

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

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

โมเดลสีพื้นฐาน ความอิ่มตัว ความสว่าง

แผนที่สไตล์คุณจะใช้โมเดล สีพื้นฐาน ความอิ่มตัว ความสว่าง (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 ที่มีอยู่