ภาพรวม
บทแนะนำนี้จะแสดงวิธีแสดงตำแหน่งทางภูมิศาสตร์ของอุปกรณ์บนแผนที่ Google โดยใช้ฟีเจอร์ตำแหน่งทางภูมิศาสตร์ HTML5 ของเบราว์เซอร์ร่วมกับ Maps JavaScript API สถานที่ตั้งทางภูมิศาสตร์จะแสดงต่อเมื่อผู้ใช้อนุญาตให้แชร์ตำแหน่งเท่านั้น
เมื่อผู้ใช้ทริกเกอร์คำขอตำแหน่งทางภูมิศาสตร์ ผู้ใช้จะได้รับข้อความแจ้งจากเบราว์เซอร์เพื่อขอความยินยอมให้เข้าถึงข้อมูลตำแหน่งของอุปกรณ์ หากส่งคำขอไม่สำเร็จ อาจเป็นเพราะสิทธิ์เข้าถึงตำแหน่งถูกปฏิเสธ หรืออุปกรณ์ระบุตำแหน่งไม่ได้ ฟีเจอร์นี้ใช้ได้เฉพาะในบริบทที่ปลอดภัย (HTTPS) ในเบราว์เซอร์ที่รองรับบางส่วนหรือทั้งหมดเท่านั้น
ด้านล่างเป็นแผนที่ที่สามารถระบุตำแหน่งปัจจุบันของอุปกรณ์ของผู้ใช้
ตัวอย่างด้านล่างแสดงรหัสทั้งหมดที่คุณต้องสร้างแผนที่นี้
TypeScript
// Note: This example requires that you consent to location sharing when // prompted by your browser. If you see the error "The Geolocation service // failed.", it means you probably did not give permission for the browser to // locate you. let map: google.maps.Map, infoWindow: google.maps.InfoWindow; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { center: { lat: -34.397, lng: 150.644 }, zoom: 6, }); infoWindow = new google.maps.InfoWindow(); const locationButton = document.createElement("button"); locationButton.textContent = "Pan to Current Location"; locationButton.classList.add("custom-map-control-button"); map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton); locationButton.addEventListener("click", () => { // Try HTML5 geolocation. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position: GeolocationPosition) => { const pos = { lat: position.coords.latitude, lng: position.coords.longitude, }; infoWindow.setPosition(pos); infoWindow.setContent("Location found."); infoWindow.open(map); map.setCenter(pos); }, () => { handleLocationError(true, infoWindow, map.getCenter()!); } ); } else { // Browser doesn't support Geolocation handleLocationError(false, infoWindow, map.getCenter()!); } }); } function handleLocationError( browserHasGeolocation: boolean, infoWindow: google.maps.InfoWindow, pos: google.maps.LatLng ) { infoWindow.setPosition(pos); infoWindow.setContent( browserHasGeolocation ? "Error: The Geolocation service failed." : "Error: Your browser doesn't support geolocation." ); infoWindow.open(map); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// Note: This example requires that you consent to location sharing when // prompted by your browser. If you see the error "The Geolocation service // failed.", it means you probably did not give permission for the browser to // locate you. let map, infoWindow; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { lat: -34.397, lng: 150.644 }, zoom: 6, }); infoWindow = new google.maps.InfoWindow(); const locationButton = document.createElement("button"); locationButton.textContent = "Pan to Current Location"; locationButton.classList.add("custom-map-control-button"); map.controls[google.maps.ControlPosition.TOP_CENTER].push(locationButton); locationButton.addEventListener("click", () => { // Try HTML5 geolocation. if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position) => { const pos = { lat: position.coords.latitude, lng: position.coords.longitude, }; infoWindow.setPosition(pos); infoWindow.setContent("Location found."); infoWindow.open(map); map.setCenter(pos); }, () => { handleLocationError(true, infoWindow, map.getCenter()); }, ); } else { // Browser doesn't support Geolocation handleLocationError(false, infoWindow, map.getCenter()); } }); } function handleLocationError(browserHasGeolocation, infoWindow, pos) { infoWindow.setPosition(pos); infoWindow.setContent( browserHasGeolocation ? "Error: The Geolocation service failed." : "Error: Your browser doesn't support geolocation.", ); infoWindow.open(map); } window.initMap = initMap;
ลองใช้ตัวอย่าง
ตำแหน่งทางภูมิศาสตร์คืออะไร
ตำแหน่งทางภูมิศาสตร์หมายถึงการระบุตำแหน่งทางภูมิศาสตร์ของอุปกรณ์คอมพิวเตอร์โดยใช้กลไกการเก็บรวบรวมข้อมูลที่หลากหลาย โดยทั่วไป บริการตำแหน่งทางภูมิศาสตร์ส่วนใหญ่จะใช้ที่อยู่การกำหนดเส้นทางเครือข่ายหรือชิป GPS ภายในเพื่อระบุตำแหน่งนี้ ตำแหน่งทางภูมิศาสตร์เป็น API เฉพาะอุปกรณ์ ซึ่งหมายความว่าเบราว์เซอร์หรืออุปกรณ์ต้องรองรับตำแหน่งทางภูมิศาสตร์จึงจะใช้ผ่านเว็บแอปพลิเคชันได้
มาตรฐานตำแหน่งทางภูมิศาสตร์ของ W3C
แอปพลิเคชันที่ต้องการใช้ตำแหน่งทางภูมิศาสตร์ต้องรองรับมาตรฐานตำแหน่งทางภูมิศาสตร์ของ W3C โปรดสังเกตว่าโค้ดตัวอย่างด้านบนระบุตำแหน่งของอุปกรณ์ผ่าน W3C navigator.geolocation
API
บางครั้งเว็บไซต์ใช้ที่อยู่ IP เพื่อตรวจหาตำแหน่งของอุปกรณ์ แต่อาจเป็นเพียงค่าประมาณคร่าวๆ ของตำแหน่งดังกล่าว API มาตรฐาน W3C ได้รับการสนับสนุนอย่างสมบูรณ์และถูกต้องที่สุด ดังนั้นจึงควรให้ความสำคัญกับ API เหล่านี้มากกว่าวิธีอื่นๆ ในการระบุตำแหน่งทางภูมิศาสตร์