HTML5 地理位置

在本教程中，您将学习如何使用 HTML5 地理定位功能来检测用户的位置。

什么是地理位置？

HTML5 地理定位功能可让您找出网站访问者当前位置的地理坐标（纬度和经度数字）。

此功能有助于为网站访问者提供更好的浏览体验。例如，您可以返回物理上靠近用户位置的搜索结果。

查找访客坐标

使用 HTML5 地理定位 API 获取站点访问者的位置信息相当简单。它利用打包到 navigator.geolocation 对象中的三种方法 — getCurrentPosition(), watchPosition() 和 clearWatch()。

以下是显示您当前位置的简单地理定位示例。但是，首先你需要同意让浏览器告诉网络服务器你的位置。

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Current Position</title>
<script>
    function showPosition() {
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
                document.getElementById("result").innerHTML = positionInfo;
            });
        } else {
            alert("Sorry, your browser does not support HTML5 geolocation.");
        }
    }
</script>
</head>
<body>
    <div id="result">
        <!--Position information will be inserted here-->
    </div>
    <button type="button" onclick="showPosition();">Show Position</button>
</body>
</html>

注意： 除非访问者明确许可，否则网络浏览器不会与网页共享访问者位置。地理定位标准规定，为每个需要位置数据的网站获取用户许可是一项官方规则。

处理错误和拒绝

可能存在用户不想与您共享其位置数据的情况。为了应对这种情况，您可以在调用 getCurrentLocation() 函数时提供两个函数。

如果您的地理定位尝试成功，则调用第一个函数，如果您的地理定位尝试以失败告终，则调用第二个函数。让我们看一个例子：

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Handling Geolocation Errors</title>
<script>
    // 设置全局变量
    var result;
    
    function showPosition() {
        // 存储页面显示结果的元素
        result = document.getElementById("result");
        
        // 如果地理位置可用，请尝试获取访问者的位置
        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(successCallback, errorCallback);
            result.innerHTML = "Getting the position information...";
        } else {
            alert("Sorry, your browser does not support HTML5 geolocation.");
        }
    };
    
    // 定义成功尝试的回调函数
    function successCallback(position) {
        result.innerHTML = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
    }
    
    // 定义失败尝试的回调函数
    function errorCallback(error) {
        if(error.code == 1) {
            result.innerHTML = "You've decided not to share your position, but it's OK. We won't ask you again.";
        } else if(error.code == 2) {
            result.innerHTML = "The network is down or the positioning service can't be reached.";
        } else if(error.code == 3) {
            result.innerHTML = "The attempt timed out before it could get the location data.";
        } else {
            result.innerHTML = "Geolocation failed due to unknown error.";
        }
    }
</script>
</head>
<body>
    <div id="result">
        <!--位置信息将在此处插入-->
    </div>
    <button type="button" onclick="showPosition();">Show Position</button>
</body>
</html>

在谷歌地图上显示位置

您可以使用地理位置数据做一些非常有趣的事情，例如在 Google 地图上显示用户位置。以下示例将根据通过 HTML5 地理定位功能检索到的纬度和经度数据显示您在 Google 地图上的当前位置。

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using the Google Maps</title>
<script>
    function showPosition() {
        navigator.geolocation.getCurrentPosition(showMap);
    }
    
    function showMap(position) {
        // 获取位置数据
        var latlong = position.coords.latitude + "," + position.coords.longitude;
        
        // 设置谷歌地图源地址
        var mapLink = "https://maps.googleapis.com/maps/api/staticmap?center="+latlong+"&zoom=16&size=400x300&output=embed";
        
        // 创建和插入谷歌地图
        document.getElementById("embedMap").innerHTML = "<img alt='Map Holder' src='"+ mapLink +"'>";
    }
</script>
</head>
<body>
    <button type="button" onclick="showPosition();">Show My Position on Google Map</button>
    <div id="embedMap">
        <!--谷歌地图将嵌入此处-->
    </div>
</body>
</html>

上面的示例将使用静态图像简单地显示 Google 地图上的位置。但是，您也可以通过拖动、放大/缩小和您在现实生活中遇到的其他功能创建交互式 Google 地图。让我们看一下下面的例子：

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using the Google Maps</title>
<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script>
function showPosition() {
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showMap, showError);
    } else {
        alert("Sorry, your browser does not support HTML5 geolocation.");
    }
}
 
// 定义成功尝试的回调函数
function showMap(position) {
    // 获取位置数据
    lat = position.coords.latitude;
    long = position.coords.longitude;
    var latlong = new google.maps.LatLng(lat, long);
    
    var myOptions = {
        center: latlong,
        zoom: 16,
        mapTypeControl: true,
        navigationControlOptions: {
            style:google.maps.NavigationControlStyle.SMALL
        }
    }
    
    var map = new google.maps.Map(document.getElementById("embedMap"), myOptions);
    var marker = new google.maps.Marker({ position:latlong, map:map, title:"You are here!" });
}
 
// 定义失败尝试的回调函数
function showError(error) {
    if(error.code == 1) {
        result.innerHTML = "You've decided not to share your position, but it's OK. We won't ask you again.";
    } else if(error.code == 2) {
        result.innerHTML = "The network is down or the positioning service can't be reached.";
    } else if(error.code == 3) {
        result.innerHTML = "The attempt timed out before it could get the location data.";
    } else {
        result.innerHTML = "Geolocation failed due to unknown error.";
    }
}
</script>
</head>
<body>
    <button type="button" onclick="showPosition();">Show My Position on Google Map</button>
    <div id="embedMap" style="width: 400px; height: 300px;">
        <!--Google map will be embedded here-->
    </div>
</body>
</html>

请查看以下 URL 以了解有关 Google Maps Javascript API 的更多信息： https://developers.google.com/maps/documentation/javascript/reference。

监控访客的动向

到目前为止，我们使用的所有示例都依赖于 getCurrentPosition() 方法。然而，geolocation 对象有另一个方法 watchPosition() 允许您通过在位置变化时返回更新的位置来跟踪访问者的移动。

watchPosition() 具有与 getCurrentPosition() 相同的输入参数。但是watchPosition()可能会多次触发success函数 — 当它第一次获得位置时，再次，每当它检测到新位置时。让我们看看这是如何工作的：

示例

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Watching Position</title>
<script>
    // 设置全局变量
    var watchID;

    function showPosition() {
        if(navigator.geolocation) {
            watchID = navigator.geolocation.watchPosition(successCallback);
        } else {
            alert("Sorry, your browser does not support HTML5 geolocation.");
        }
    }

    function successCallback(position) {
        toggleWatchBtn.innerHTML = "Stop Watching";
        
        // 在做任何事情之前检查位置是否已更改
        if(prevLat != position.coords.latitude || prevLong != position.coords.longitude){
            
            // 设置以前的位置
            var prevLat = position.coords.latitude;
            var prevLong = position.coords.longitude;
            
            // 获取当前位置
            var positionInfo = "Your current position is (" + "Latitude: " + position.coords.latitude + ", " + "Longitude: " + position.coords.longitude + ")";
            document.getElementById("result").innerHTML = positionInfo;
            
        }
        
    }

    function startWatch() {
        var result = document.getElementById("result");
        
        var toggleWatchBtn = document.getElementById("toggleWatchBtn");
        
        toggleWatchBtn.onclick = function() {
            if(watchID) {
                toggleWatchBtn.innerHTML = "Start Watching";
                navigator.geolocation.clearWatch(watchID);
                watchID = false;
            } else {
                toggleWatchBtn.innerHTML = "Aquiring Geo Location...";
                showPosition();
            }
        }
    }
    
    // 初始化整个系统（上图）
    window.onload = startWatch;
</script>
</head>
<body>
    <button type="button" id="toggleWatchBtn">Start Watching</button>
    <div id="result">
        <!--位置信息将在此处插入-->
    </div>   
</body>
</html>

HTML5 地理位置

什么是地理位置？

查找访客坐标

示例

处理错误和拒绝

示例

在谷歌地图上显示位置

示例

示例

监控访客的动向

示例

关于我们

联系方式

互动工具