วิธีการรวมตำแหน่งทางภูมิศาสตร์เข้ากับ PWA . ของคุณ

สมมติว่าผู้ใช้ใช้เบราว์เซอร์ที่รองรับ คุณสามารถให้ PWA ของคุณตรวจหาตำแหน่งของผู้ใช้ได้อย่างง่ายดายโดยใช้ Geolocation API หรือให้เฉพาะเจาะจงมากขึ้น โดยใช้อ็อบเจ็กต์ navigator.geolocation ภายใน นี่คือวิธีการดำเนินการอย่างถูกต้องใน PWA ของคุณ:

ข้อกำหนดเบื้องต้น

• ความรู้ JavaScript และ HTML ที่มั่นคง
• PWA ที่ใช้งานได้ผ่าน HTTPS (ทำตามบทช่วยสอน PWA ของเราเพื่อสร้าง)

ตำแหน่งทางภูมิศาสตร์ในการดำเนินการ

คุณคงไม่ใช่คนแปลกหน้าสำหรับการระบุตำแหน่งทางภูมิศาสตร์ในตอนนี้ เมื่อได้รับอนุญาตจากคุณ เว็บไซต์ที่มีการผสานรวมตำแหน่งทางภูมิศาสตร์จะสามารถเข้าถึงตำแหน่งของคุณ โดยใช้ข้อมูลที่เกี่ยวข้องในพื้นที่ของคุณ หรือเพียงแค่แสดงตำแหน่งของคุณบนแผนที่

วิธีรวมตำแหน่งทางภูมิศาสตร์เข้ากับ PWA . ของคุณ

พื้นฐาน

อันดับแรก เราต้องเข้าใจกลไกเบื้องหลังวัตถุ navigator.geolocation ออบเจ็กต์ navigator เป็นออบเจ็กต์คอนเทนเนอร์ซึ่งมี Web API จำนวนมากที่พร้อมให้บริการแก่เรา ภายในคอนเทนเนอร์ navigator คือออบเจ็กต์ geolocation ซึ่งมีสามวิธีดังต่อไปนี้:

• getCurrentPosition()
• watchPosition()
• clearWatch()

ใช้ getCurrentPosition() เพื่อรับตำแหน่งของผู้ใช้

จุดประสงค์ของวิธีแรก getCurrentPosition() ควรเป็นคำอธิบายที่ชัดเจนสำหรับคุณ ซึ่งจะดึงตำแหน่งของอุปกรณ์ของผู้ใช้

 navigator.geolocation.getCurrentPosition(() => {})

ตำแหน่งที่ดึงออกมามีอยู่ใน coords และ timestamp โดย coords เป็นออบเจกต์ของ Coordinates โดยค่าเริ่มต้น อ็อบเจ็กต์ Coordinates ถูกกำหนดโดยคุณสมบัติเหล่านี้:

• accuracy ต้องแม่นยำของตำแหน่งเป็นเมตร
• altitude ความสูงของตำแหน่ง
• accuracy ต้องแม่นยำของความสูงของตำแหน่งเป็นเมตร
• heading ที่อุปกรณ์กำลังมุ่งหน้าไป แสดงเป็นองศา (0 = เหนือ, ตะวันออก = 90, ใต้ = 180, ตะวันตก = 270)
• latitude ละติจูดของตำแหน่ง
• longitude ลองจิจูดของตำแหน่ง
• speed ความเร็วที่อุปกรณ์เคลื่อนที่ แสดงเป็นเมตร/วินาที

อย่างที่คุณอาจเดาได้ อุปกรณ์ที่ไม่มีฮาร์ดแวร์การติดตามที่เหมาะสมจะไม่ได้รับประโยชน์อย่างเต็มที่จาก API นี้ ดังนั้นจะคืนค่าบางค่าเท่านั้นและปล่อยให้ค่าอื่นๆ null ตัวอย่างเช่น บนคอมพิวเตอร์เดสก์ท็อป เราสามารถรับได้เฉพาะค่า longitude latitude และ accuracy ในขณะที่ค่าอื่นๆ ที่ร้องขอ ( heading , speed ) จะกลับมา null

watchPosition() — การดึงข้อมูลตำแหน่งของผู้ใช้เป็นระยะ

แม้ว่าวิธีการดังกล่าวส่วนใหญ่จะใช้เพื่อดึงข้อมูลตำแหน่งของผู้ใช้ แต่ก็ไม่มีประโยชน์สำหรับแอปที่ต้องอาศัยตำแหน่งที่แน่นอนของผู้ใช้ เนื่องจากเป็นที่ทราบกันดีว่าผู้ใช้ของคุณต้องเดินทางบ่อยๆ นี่คือเวลาที่เราต้องการ watchPosition() ของ navigator.geolocation ซึ่งจะลงทะเบียนฟังก์ชันเรียกกลับสำหรับการอัปเดตตำแหน่งของผู้ใช้เป็นระยะ

 navigator.geolocation.watchPosition (ตำแหน่ง => {
    console.log (ตำแหน่ง)
})

เมธอด watchPosition ส่งคืน id ธุรกรรมที่ไม่ซ้ำซึ่งสามารถใช้เพื่อหยุดรับการอัปเดตตำแหน่ง การใช้ id เฉพาะและเมธอด navigator.geolocation.clearWatch() ทำให้เราหยุดดูตำแหน่งได้:

 const id = navigator.geolocation.watchPosition (ตำแหน่ง => {
    console.log (ตำแหน่ง)
})

//หยุดดูหลังจาก 10 วินาที
setTimeout(() => {
  navigator.geolocation.clearWatch(id)
}, 10 * 1,000)

การจัดการข้อผิดพลาด

มันอาจจะยุ่งเหยิงในไม่ช้าเมื่อคุณไม่ได้ตั้งค่าฟังก์ชันที่เหมาะสมเพื่อจัดการกับข้อผิดพลาดทั้งหมด หากต้องการแสดงข้อผิดพลาดในบล็อกที่มนุษย์สามารถอ่านได้ คุณต้องเพิ่มโค้ดต่อไปนี้ลงในฟังก์ชันของคุณในการแสดงตำแหน่ง:

 ฟังก์ชั่น locationError (ข้อผิดพลาด) {
    สวิตช์ (รหัสข้อผิดพลาด) {
        ข้อผิดพลาดของกรณี PERMISSION_DENIED:
            ส่งคืน "ผู้ใช้ปฏิเสธคำขอระบุตำแหน่งทางภูมิศาสตร์";
        ข้อผิดพลาดของเคส POSITION_UNAVAILABLE:
            ส่งคืน "ข้อมูลตำแหน่งไม่พร้อมใช้งานในขณะนี้";
        ข้อผิดพลาดของกรณี TIMEOUT:
            ส่งคืน "คำขอตำแหน่งผู้ใช้หมดเวลา";
        ข้อผิดพลาดของกรณี UNKNOWN_ERROR:
            ส่งคืน "เกิดข้อผิดพลาดที่ไม่รู้จัก";
    }
}

นอกจากนี้ คุณสามารถทดสอบสิ่งนี้ในคอนโซล:

 navigator.geolocation.getCurrentPosition (ตำแหน่ง => {
  console.log (ตำแหน่ง)
} ข้อผิดพลาด => {
	console.error (ข้อผิดพลาด)
})

สิ่งนี้จะส่งคืนคุณสมบัติของ code โดย 1 หมายถึงการอนุญาตของผู้ใช้ถูกปฏิเสธ 2 หมายถึงตำแหน่งผู้ใช้ไม่พร้อมใช้งานในขณะนี้ และ 3 หมายถึงคำขอหมดเวลา

เกินพื้นฐาน

การเข้าใจพื้นฐานเป็นสิ่งหนึ่ง แต่คุณสามารถพยายามทำให้ดีขึ้นได้เสมอ ต่อไปนี้คือวิธีที่คุณสามารถปรับปรุงฟังก์ชันตำแหน่งทางภูมิศาสตร์ของคุณเพิ่มเติม

หมดเวลาเมื่อค้นหาพิกัด

ในกรณีที่ผู้ใช้ของคุณมีสภาวะเครือข่ายที่ซบเซา สามารถใช้ระยะหมดเวลาเพื่อระบุว่าการดำเนินการได้หมดอายุลง ในการเพิ่มการหมดเวลา เราจำเป็นต้องเพิ่มพารามิเตอร์ตัวที่สาม ซึ่งมีคุณสมบัติดังต่อไปนี้:

• timeout จำนวนมิลลิวินาทีก่อนที่การดำเนินการจะหมดอายุ
• maxiumAge อายุสูงสุดของตำแหน่งที่แคชโดยเบราว์เซอร์ วัดเป็นมิลลิวินาที
• enableHighAccuracy ตัวเลือกจริง/เท็จที่อธิบายตนเองได้ ซึ่งอาจใช้เวลาและทรัพยากรมากขึ้นเพื่อดึงตำแหน่งที่แม่นยำยิ่งขึ้น

 navigator.geolocation.getCurrentPosition (ตำแหน่ง => {
  console.log (ตำแหน่ง)
} ข้อผิดพลาด => {
	console.error (ข้อผิดพลาด)
}, {
  หมดเวลา: 2000,
  อายุสูงสุด: 20000
  enableHighAccuracy: จริง
})

การแสดงตำแหน่งผู้ใช้บน Google Maps

เมื่อใช้ Google Maps API เราสามารถแสดงตำแหน่งของผู้ใช้บน Google Map

 <script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

สำหรับการสาธิต Google Map API บนเว็บ เราขอแนะนำคู่มือนี้จาก Google: แสดงตำแหน่งผู้ใช้หรืออุปกรณ์บนแผนที่ ในคู่มือนี้ คุณจะพบ HTML พื้นฐานที่ผสานรวมกับ Google Maps API

อีกทางหนึ่ง ใช้ react-geolocated สำหรับ React-based PWA . ของคุณ

ในกรณีที่คุณไม่รู้สึกตัว การ react-geolocated ก็เป็นวิธีที่ยอดเยี่ยมในการรวมตำแหน่งทางภูมิศาสตร์เข้ากับแอปที่ใช้ React ของคุณในวิธีที่รวดเร็วและง่ายดาย เพียงติดตั้งโมดูล ที่ด้านบนของ PWA ที่คุณมีอยู่โดยใช้:

 npm ติดตั้ง react-geolocated --save

หลังจากนั้น ให้ทำตามขั้นตอนที่ระบุไว้ในลิงก์ GitHub อย่างเป็นทางการ และคุณควรมี PWA ที่ใช้งานได้พร้อมตำแหน่งทางภูมิศาสตร์ในตัวสำหรับตัวคุณเอง

บทสรุป

และนั่นคือขั้นตอนการรวมตำแหน่งทางภูมิศาสตร์ของ กปภ. ของคุณ หากคุณพบว่ามันยากในส่วนใดส่วนหนึ่งของบทช่วยสอน อย่าลังเลที่จะถามคำถามด้านล่างนี้!

สำหรับผู้ค้า Magento ที่กำลังมองหาโซลูชันที่เชื่อถือได้ เราขอเสนอโซลูชัน Magento PWA ที่สมบูรณ์และคุ้มค่าสำหรับธุรกิจของคุณ