แนวทางปฏิบัติแนะนำ

แนวทางปฏิบัติแนะนำสำหรับ JS

Maps JavaScript API ใช้งานได้กับสภาพแวดล้อม ECMAScript และ W3C DOM มาตรฐานเท่านั้น ซึ่งหมายความว่าการแก้ไขหรือลบล้างลักษณะการทํางานของคลาสและออบเจ็กต์ในตัวที่เบราว์เซอร์ให้มาอาจทําให้ Maps JavaScript API ใช้งานไม่ได้ บางครั้งไลบรารีอื่นๆ อาจขัดแย้งกับ Maps JavaScript API ได้โดยการเปลี่ยนลักษณะการทำงานของเบราว์เซอร์เพื่อไม่ให้เป็นสภาพแวดล้อม ECMAScript มาตรฐานอีกต่อไป Maps JavaScript API ใช้ร่วมกับไลบรารีเหล่านั้นไม่ได้

ไลบรารีที่ทราบว่าใช้ร่วมกับ Maps JavaScript API ไม่ได้

  • โปรโตไทป์: ลบล้าง Array.from() และ Element.prototype.remove() ด้วยวิธีที่ไม่เป็นไปตามมาตรฐาน
  • MooTools (เวอร์ชันเก่า): ลบล้าง Array.from() ด้วยวิธีที่ไม่ใช่มาตรฐาน
  • DateJS (เวอร์ชันเก่า): ลบล้าง Date.now() ในลักษณะที่ไม่ใช่มาตรฐาน

บางครั้งคุณอาจแก้ไขไลบรารีที่เข้ากันไม่ได้เพื่อนำการลบล้างที่ไม่เป็นมาตรฐานออกได้

แนวทางปฏิบัติแนะนำสำหรับ CSS

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

เฟรมเวิร์ก CSS และคอมโพเนนต์การจัดรูปแบบ JavaScript มักใช้การรีเซ็ต CSS หรือตัวแปลงค่าเพื่อจัดการความแตกต่างของการแสดงผลระหว่างเบราว์เซอร์ เฟรมเวิร์กมักใช้องค์ประกอบ box-sizing เพื่อปรับขนาดระยะขอบและเส้นขอบขององค์ประกอบหน้าเว็บ ซึ่งมักจะเกี่ยวข้องกับการเปลี่ยนลักษณะการทำงานของเบราว์เซอร์เริ่มต้นจากการใช้ content-box เป็น border-box

การรีเซ็ต CSS ประเภทนี้อาจทําให้ CSS ขัดแย้งกับ Maps JavaScript API เนื่องจาก API ไม่รองรับการเปลี่ยนแปลงสไตล์ชีต User Agent นอกจากนี้ การขัดแย้งของ CSS อาจเกิดขึ้นได้หากเฟรมเวิร์กหรือคอมโพเนนต์อ้างอิงคลาส CSS หรือองค์ประกอบ DOM ของ Maps JavaScript API

เรามีคำแนะนำหลายประการที่ควรพิจารณาเพื่อหลีกเลี่ยงความขัดแย้งเหล่านี้

ลักษณะเฉพาะ

ระบบจะใช้ CSS ที่ฝังและลิงก์กับแผนที่ก่อนสไตล์ Google Maps หากกำหนดสไตล์หน้าเว็บทั้งหมดใน CSS ที่ฝังหรือลิงก์ไว้ ให้ทำตามกฎความเฉพาะเจาะจงเพื่อให้แน่ใจว่ามีการใช้สไตล์ที่ถูกต้องกับแผนที่

รูปแบบของหน้าเว็บจะเขียนทับองค์ประกอบ CSS ทั่วไป เช่น img, button และ a ได้ สถานการณ์ที่พบบ่อยที่สุดอย่างหนึ่งคือเมื่อตั้งค่าแอตทริบิวต์ max-width ขององค์ประกอบ img เป็น 100 เปอร์เซ็นต์ ซึ่งอาจทำให้องค์ประกอบแผนที่บิดเบี้ยวหรือซ่อนอยู่ โดยเฉพาะในกรณีที่คุณใช้InfoWindow

หากต้องการแก้ไขปัญหานี้ ให้อัปเดตองค์ประกอบ img สำหรับแผนที่เพื่อให้ระบบตั้งค่าแอตทริบิวต์ max-width เป็น none เช่น

#map img
{
    max-width : none;
}

ชื่อชั้นเรียน

อย่าอ้างอิงชื่อคลาสและองค์ประกอบ DOM ภายในของ Maps JavaScript API เราไม่รองรับการดำเนินการนี้และอาจทำให้เกิดการเปลี่ยนแปลงที่ส่งผลเสียในเว็บไซต์ของคุณโดยไม่แจ้งให้ทราบ เราขอแนะนำให้คุณสร้างคลาส CSS ของคุณเองเป็นคอนเทนเนอร์สําหรับแผนที่แทน

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

การลบล้างขนาดกล่อง CSS

การลบล้างขนาดกล่อง CSS เป็นวิธีแก้ปัญหาที่เป็นไปได้สำหรับความขัดแย้งของการจัดสไตล์แผนที่ ซึ่งจะเป็นประโยชน์อย่างยิ่งหากคุณใช้เฟรมเวิร์ก CSS หรือคอมโพเนนต์การจัดรูปแบบ JavaScript ตัวอย่างเช่น หากตั้งค่า box-sizing เป็น border-box ให้ลองทำดังนี้

  • สร้างการลบล้าง box-sizing ที่กำหนดองค์ประกอบ <html> เป็น border-box
  • ใช้ box-sizing: inherit สำหรับองค์ประกอบทั้งหมดที่ไม่ใช่แผนที่
  • สร้างคอนเทนเนอร์แผนที่ที่กำหนดเองซึ่งรีเซ็ตองค์ประกอบ box-sizing เป็น initial

ตัวอย่าง CSS

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.container-map {
  box-sizing: initial;
}