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

แนวทางปฏิบัติแนะนำสำหรับ 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 ภายในของ JavaScript Maps 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;
}