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