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

แนวทางปฏิบัติแนะนำสำหรับ 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() ในลักษณะที่ไม่ได้มาตรฐาน

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

การเพิ่มประสิทธิภาพภายใน

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

แนวทางปฏิบัติแนะนำสำหรับ 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;
}