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