ภาพรวม
บทแนะนำนี้จะแสดงวิธีแสดงตำแหน่งทางภูมิศาสตร์ของอุปกรณ์บนแผนที่ของ 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 Geolocation โปรดทราบว่าโค้ดตัวอย่างด้านบนจะกำหนดตำแหน่งของอุปกรณ์ผ่าน API ของ W3C navigator.geolocation
บางครั้งเว็บไซต์ใช้ที่อยู่ IP เพื่อตรวจหาตำแหน่งของอุปกรณ์ แต่อาจเป็นเพียงการประมาณตำแหน่งคร่าวๆ ของตำแหน่งดังกล่าว API มาตรฐาน W3C เป็น API ที่รองรับอย่างเต็มรูปแบบและถูกต้องมากที่สุด ดังนั้นจึงควรจัดลำดับความสำคัญให้มากกว่าวิธีการค้นหาตำแหน่งทางภูมิศาสตร์แบบอื่นๆ