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