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

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