地理位置
地理定位在日常生活中应用比较广泛,如互联网打车、在线地图等。
HTML5 增加了获取用户地理位置信息的接口 Geolocation,开发者可以通过经纬度来获取用户的地理位置信息。另外,百度等互联网公司也提供了地理定位的接口。
Geolocation 接口
Geolocation 接口是一个用来获取设备地理位置的可编程的对象,它可以让 Web 内容访问到设备的地理位置(经纬度),这将允许 Web 应用基于用户的地理位置提供定制的信息。
鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。
使用地理位置
获取当前位置
使用 getCurrentPosition() 方法来获取设备当前位置。
返回数据
若获取地理位置成功,则 getCurrentPosition() 方法将返回数据对象。对象可能包含的属性如下:
属性 | 描述 |
---|---|
coords.latitude | 以十进制度数表示纬度的双精度值。 |
coords.longitude | 以十进制度数表示经度的双精度值。 |
coords.accuracy | 表示纬度和经度属性精度的双精度值,单位为米。 |
coords.altitude | 表示该位置相对于海平面的高度的双经度值。 如果无法提供数据,则此值可以为空。 |
coords.altitudeAccuracy | 表示高度属性精度的双精度值,单位为米。 |
coords.heading | 表示设备运行方向的双精度值。 该值(以度为单位)表示设备离正北方向的距离。0° 表示正北方向,顺时针计算(即东为 90°,西为 270°)。 如果速度为 0,此值为 NaN;如果设备无法提供方向信息,则此值为空。 |
coords.speed | 表示设备运行速度的双精度值,单位为米/每秒。 |
timestamp | 获取到位置的时间(时间戳)。 |
异常处理
getCurrentPosition() 方法的第二个参数用于处理错误。它规定获取地理位置失败或用户拒绝定位时运行的函数。
可能返回的错误码:
值 | 相关联的常量 | 描述 |
---|---|---|
1 | PERMISSION_DENIED | 地理位置信息的获取失败,因为该页面没有获取地理位置信息的权限。 |
2 | POSITION_UNAVAILABLE | 地理位置获取失败,因为至少有一个内部位置源返回一个内部错误。 |
3 | TIMEOUT | 获取地理位置超时,通过定义 PositionOptions.timeout 来设置获取地理位置的超时时长。 |
百度地图 JavaScript API
百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持 PC 端和移动端基于浏览器的地图应用开发,且支持 HTML5 特性的地图开发。
百度地图 JavaScript API 支持 HTTP 和 HTTPS,免费对外开放,可直接使用。接口使用无次数限制。
官方开发文档:地图 JS API | 百度地图API SDK。
百度地图开发步骤
我们将以基础的地图展示和地图标注为例,来学习百度地图 JavaScript API 的使用方法。
申请开发密钥
点击链接进入控制台:登录百度帐号。
点击左侧菜单,依次进入:应用管理 → 我的应用,在页面中点击“创建应用”。
复制开放平台生成的访问应用的 AK:
加载 JavaScript API
新建开发页面,参考使用须知异步加载 JavaScript API,并填入你刚才申请到的 AK(密钥)
修改初始坐标位置
地图在加载时,需要通过脚本设置地图初始化时的中心点坐标位置,例如示例代码 mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11);
中的 121.491, 31.233
。如果需要修改该位置,可以通过坐标拾取器获取目标位置的坐标:
添加地图控件
初始化后的地图默认是不能进行缩放的,需要自行添加地图控件。
添加标注
可以使用 map.addOverlay
方法向地图添加标注,并且向地图中添加信息窗口。
示例代码: