HTML5地图

HTML Geolocation API是用来定位用户的位置

定位用户位置

HTML Geolocation API是用来获取用户地理位置.

由于这会损害隐私，该位置是不可用的，除非用户批准它.

注：定位最准确的设备是GPS，如：iPhone

浏览器支持

表中的数字指定第一个版本的浏览器完全支持地理定位.

API
Geolocation 5.0 - 49.0 (http)
50.0 (https)		 9.0 3.5 5.0 16.0

注意：出于安全考虑，地理定位API将只能工作在安全的环境中，如HTTPS。如果你的网站在一个不安全的来源（如HTTP）来获得用户位置的请求将不提供该功能.

使用 HTML Geolocation

getCurrentPosition() 方法用于返回用户的位置.

下面的示例返回用户位置的经纬度:

<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>

让我试试

实例解析:

检查定位支持

  • 如果支持, 运行getCurrentPosition() 方法. 如果不支持，向用户显示消息
  • 如果getCurrentPosition()方法是成功的, 它返回一个左边对象，作为参数传递给函数showPosition
  • showPosition() 函数输出经纬度

上面的例子是一个非常基本的地理定位的脚本，没有错误处理。

处理错误和拒绝

getCurrentPosition() 方法的第二个参数，用来处理错误. 它指定了一个函数去执行，如果它未能获得用户的位置:

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}

让我试试

在地图上显示结果

若要在地图中显示结果，需要访问地图服务，如 Google Maps.

在下面的例子中，返回的纬度和经度用于显示在 Google Map上 (使用静态图片):

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
    "+latlon+"&zoom=14&size=400x300&sensor=false";

    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

让我试试

特定位置的信息

此页演示如何在地图上显示用户的位置.

地理位置也是非常有用的特定位置的信息, 像:

  • 最新的本地信息
  • 显示用户附近的兴趣点
  • 导航 (GPS)

getCurrentPosition() 方法 - 返回数据

getCurrentPosition() 当成功时，返回一个对象. 纬度，经度和精度属性总是返回. 如果可用，则返回其他属性:

属性 返回
coords.latitude 作为十进制数的纬度（总是返回）
coords.longitude 经度为十进制数（总是返回）
coords.accuracy 位置的准确性（总是返回）
coords.altitude 海拔在平均海平面以上的高度（如有返回）
coords.altitudeAccuracy 高度位置精度（如果有返回）
coords.heading 头顺时针方向从北（如果可用返回）
coords.speed 米/秒的速度（如果可用返回）
timestamp 响应的日期/时间（如果可用返回）

Geolocation 对象 - 其他方法

地理定位的对象也有其他一些方法:

  • watchPosition() - 返回用户当前位置，并继续返回更新位置，如用户移动（如GPS在汽车）.
  • clearWatch() - 停止watchposition()方法.

下面的例子显示了watchposition()方法。你需要一个精确的GPS设备来测试这个（像iPhone）:

<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>

让我试试