获取地理位置-Geolocation
来源:互联网 发布:电商销售数据分析 编辑:程序博客网 时间:2024/05/19 23:27
获取地理位置
HTML规范中,增加了获取用户地理位置信息的API。但基于保护用户隐私的机制,需先得到用户明确许可,才能获取位置信息。
1.API简介
navigator.geolocation.getCurrentPosition(successCallback,errorCallback,options) 获取当前地理信息
navigator.geolocation.watchPosition(successCallback,errorCallback,options) 重复获取当前地理信息
(1)当成功获取地理信息后,会调用successCallback,并返回一个包含位置信息的对象position
position.coords.latitude 纬度
position.coords.longitude 经度
(2)当获取地理信息失败后,会调用errorCallback,并返回错误信息error
(3)可选参数options对象可以调整位置信息数据收集方式
timeout 超时设置,单位为ms
2.实例
百度地图配合地理位置
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的密钥"></script> <title>地图展示</title></head><body> <div id="allmap"></div></body></html><script type="text/javascript"> navigator.geolocation.getCurrentPosition(function(pos){ /*console.log('获取地理位置成功'); 在成功的回调函数里面接受一个pos对象,这个对象存放的是当前用户的地理位置(经度+纬度)*/ alert(pos); // 纬度 var lat = pos.coords.latitude; // 经度 var longs = pos.coords.longitude; console.log('当前的位置为经度:' + longs + '纬度为:' + lat); // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMap.Point(longs, lat), 11); // 初始化地图,设置中心点坐标和地图级别 map.addControl(new BMap.MapTypeControl()); //添加地图类型控件 map.setCurrentCity("北京"); // 设置地图显示的城市 此项必须设置 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 },function(error){ alert('fail'); /*在失败的回调函数里面接受一个error对象,这个对象里面存放的就是错误的信息*/ console.log('获取地理位置失败') console.log(error); },{ // 超时设置 单位是ms //timeout : 5000 })</script>
代码及相关文件详见GitHub主页 百度地图配合地理位置-geolocation
https://github.com/Jianxq12/ITcast/tree/master/H5C3
阅读全文
0 0
- HTML5 Geolocation获取地理位置
- H5+GeoLocation获取地理位置
- 获取地理位置-Geolocation
- Html5 Geolocation获取地理位置信息
- Html5 Geolocation获取地理位置信息
- 使用navigator对象的geolocation获取地理位置
- Geolocation地理位置
- Geolocation地理位置
- HTML5 Geolocation API (地理位置应用程序接口)获取地理位置
- 使用navigator.geolocation来获取用户的地理位置信息
- 使用HTML5-geolocation以及 IP 获取地理位置信息
- HTML5 Geolocation 地理位置 - 6
- [读书笔记]地理位置Geolocation API
- navigator.geolocation API 地理位置
- Geolocation——地理位置
- Html5 系列之:地理位置Geolocation
- HTML5地理位置定位 Geolocation API
- 浏览器地理位置(Geolocation)API 简介
- C#.NET常见问题(FAQ)-TabControl如何隐藏和显示页面
- C#.NET常见问题(FAQ)-如何捕捉窗体关闭的事件,弹窗确认是否退出
- 管理的合法性(笔记)
- C#.NET常见问题(FAQ)-abstract抽象类如何理解
- C#.NET常见问题(FAQ)-delegate委托链如何使用
- 获取地理位置-Geolocation
- C#.NET常见问题(FAQ)-get set属性有什么意义
- C#.NET常见问题(FAQ)-如何给Listbox添加右键菜单
- java基础——java I/O学习笔记3
- C#.NET常见问题(FAQ)-interface接口如何理解
- 【算法】动态规划笔记-----柳婼 の blog
- C#.NET常见问题(FAQ)-如何让listView如何选中一行
- C#.NET常见问题(FAQ)-如何让Listbox支持多选
- continue语句控制循环