總覽
本教學課程說明如何使用瀏覽器的 HTML5 地理位置功能以及 Maps JavaScript API,在 Google 地圖上顯示使用者或裝置的地理位置 (請注意,使用者必須啟用位置資訊分享功能,地理位置才會顯示)。
下方是可識別您目前位置的地圖。
下方範例顯示建立這張地圖所需的完整程式碼。
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
屬性判斷使用者的位置。
部分瀏覽器會使用 IP 位址來偵測使用者的位置,但可能只能推測出概略位置。W3C 是最簡單也最能受到完整支援的做法,因此與其他地理位置方法相比,應優先使用。