使用HTML5地理位置定位到城市的方法及注意事项

介绍

本文将简述一下如何通过HTML5和百度地图开放平台提供的API来实现对浏览器的定位，同时记录了遇到的问题和解决方案。实现效果为显示出用户所在的省市，即： XXX省 XXX市。

实现思路

利用HTML5 提供的API获取到用户的经纬度信息，再将用户的经纬度信息传到百度地图开放平台，百度地图开放平台根据提供的坐标信息返回当前的省市。

兼容性及依赖

兼容性：Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 都支持Geolocation（地理定位）.

依赖：不依赖于任何库和框架

HTML5 API

使用HTML5 Geolocation API的getCurrentPosition() 方法能够获取用户的经纬度信息。 getCurrentPosition()常用参数有两个，一个是成功时执行，一个时错误处理。如果getCurrentPosition()运行成功，则向第一个参数中规定的函数返回一个coordinates对象，用于提供位置信息。

coordinates对象属性如下：

属性	描述
coords.latitude	coords.latitude 十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔，海平面以上以米计
coords.altitudeAccuracy	位置的海拔精度
coords.heading	方向，从正北开始以度计
coords.speed	速度，以米/每秒计
timestamp	响应的日期/时间

其中，latitude、longitude 以及 accuracy 属性 是固定返回的属性，其他属性在可用状态下才会一起返回。

如果getCurrentPosition()运行失败，则向第二个参数中规定的函数返回一个error对象，用于提供错误信息。

属性	描述
code	1: PERMISSION_DENIED,用户不允许地理定位 2: POSITION_UNAVAILABLE,无法获取当前位置 3:TIMEOUT,操作超时
message	返回相应的错误信息

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    console.log("该浏览器不支持获取地理位置。");
  }
}

function showPosition(position) {
  console.log(
    "纬度: " + position.coords.latitude + " 经度: " + position.coords.longitude,
  );
}

function showError(error) {
  console.log(error);
}

坑：一旦用户拒绝，就再也调不起来授权面板了