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

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

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

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

  • Prototype: ลบล้าง 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 ขัดแย้งกับ JavaScript API ของ Maps เนื่องจาก 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 ใช้การอ้างอิงประเภทนี้ คำแนะนำในการลบล้าง box-sizing ของเราอาจเป็นวิธีแก้ปัญหาได้

การลบล้าง box-sizing ของ CSS

การลบล้าง box-sizing ของ 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;
}