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

แนวทางปฏิบัติแนะนำสำหรับ 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 หรือ Normalizer เพื่อจัดการความแตกต่างในการแสดงผลระหว่างเบราว์เซอร์ เฟรมเวิร์กมักจะใช้องค์ประกอบ 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 ใช้การอ้างอิงประเภทนี้ คำแนะนำการลบล้าง 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;
}