概览
本教程介绍了如何使用浏览器的 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。这意味着,浏览器或设备必须支持地理定位,才能通过 Web 应用使用它。
W3C 地理定位标准
想要执行地理定位的应用必须支持 W3C 地理定位标准。请注意,上面的示例代码通过 W3C navigator.geolocation
属性来确定用户的位置。
某些浏览器利用 IP 地址来检测用户的位置。不过,这种方法只能粗略估算用户的位置。W3C 方法更简单,也得到了更全面的支持,因此其优先级应高于其他地理定位方法。