geolocation属性 H5新增地理定位
geolocation用来获取用户的地理位置信息 属于navigato下的一个属性
geolocation的相关方法： Geolocation.getCurrentPosition() ： 确定设备的位置并返回一个携带位置信息的 Position 对象。 getCurrentPosition(success, error, option); 第一个参数：是一个函数， 获取位置信息成功的函数， 函数的参数 position 就是 位置信息对象 第二个参数： 是一个函数， 获取位置信息失败的函数， 函数的参数 error是 失败的具体信息 第三个参数： 是一个对象， 获取位置信息的相关配置项Geolocation.watchPosition() ：注册一个位置改变监听器，每当设备位置改变时，返回一个 long 类型的该监听器的ID值。
Geolocation.clearWatch() ：取消由 watchPosition()注册的位置监听器。 位置信息对象 position ： 里边有一个属性 coords ， 该接口表示设备在地球上的位置和海拔，以及计算这些属性的精确度 1. 纬度 latitude 1. 经度 longitude 2. 海拔高度 altitude (en-US) 3. 位置精度 accuracy 4. 海拔精确度 altitudeAccuracy (en-US) 4. 速度 speed 5. 方向 heading 6. 时间戳 timestamp 返回一个时间戳DOMTimeStamp， 这个时间戳表示获取到的位置的时间。 PositionError 接口表示当定位设备位置时发生错误的原因。
PositionError.code (en-US) 只读 返回无符号的、简短的错误码。下列值是可能的： 值 相关联的常量 描述 1 PERMISSION_DENIED 地理位置信息的获取失败，因为该页面没有获取地理位置信息的权限。 2 POSITION_UNAVAILABLE 地理位置获取失败，因为至少有一个内部位置源返回一个内部错误。 3 TIMEOUT 获取地理位置超时，通过定义PositionOptions.timeout 来设置获取地理位置的超时时 PositionError.message (en-US) 只读 返回一个开发者可以理解的 DOMString 来描述错误的详细信息。 案例1： html：
1 <button class="btn">获取位置信息button> 2 <div class="container"> 3 div> 4 <p class="x">失败原因： p>
js：
1 let container = document.querySelector('.container'); 2 let x = document.querySelector('.x'); 3 let btn = document.querySelector('.btn'); 4 // console.log(window.navigator.geolocation); 5 btn.onclick = function () { 6 getPosition() 7 } 8 function getPosition() { 9 let html = ''; 10 // 获取用户的地理位置信息 11 window.navigator.geolocation.getCurrentPosition(function (position) { 12 // console.log(position); 13 // 获取位置信息时， 有些获取不到的 14 let longitude = position.coords.longitude; // 经度 15 let latitude = position.coords.latitude; // 纬度 16 let accuracy = position.coords.accuracy; // 位置精度 17 let altitudeAccuracy = position.coords.altitudeAccuracy; // 海拔位置精度 18 let altitude = position.coords.altitude; // 海拔 null 19 let speed = position.coords.speed; // 速度 null 20 let heading = position.coords.heading; // 方向 21 let timestamp = position.timestamp; // 时间戳 22 23 html += `地图开放平台：百度地图API,高德地图API,腾讯地图API 个人比较喜欢高德 文档相对详细 可以看懂 学习起来比较好理解 高德地图api 五分钟上手教程 1. 注册成为开发者 ： 申请秘钥 （需要进入） 2. 创建应用 获取key值 和 秘钥 3. 直接引入 js 脚本的形式： 引入js api 文件经度：${longitude}
24纬度 ${latitude}
25位置精度 ${accuracy}
26海拔： ${altitude}
27海拔位置精度： ${altitudeAccuracy}
28速度： ${speed}
29方向： ${heading}
30时间戳： ${timestamp}
` 31 container.innerHTML = html; 32 33 34 }, function (error) { 35 console.log(error); 36 // PositionError 接口表示当定位设备位置时发生错误的原因。 37 // error.message 失败信息 38 switch (error.code) { 39 case error.PERMISSION_DENIED: 40 x.innerHTML += "User denied the request for Geolocation. 用户拒绝获取位置信息"; 41 break; 42 case error.POSITION_UNAVAILABLE: 43 x.innerHTML += "Location information is unavailable. 位置信息不可用 " 44 break; 45 case error.TIMEOUT: 46 x.innerHTML += "The request to get user location timed out. 请求超时" 47 break; 48 default: 49 x.innerHTML += "An unknown error occurred. 未知错误信息" 50 break; 51 } 52 }, { 53 // 布尔值用来表明应用是否使用其最高精度来表示结果 true ，同时设备能够提供一个更精确的位置，那么设备就会使用这个位置。注意，这会导致较慢的响应时间或者增加电量消耗（比如对于支持gps的移动设备来说） 如果值为false ，设备会通过更快响应以及/或者使用更少的电量等方法来尽可能的节约资源 54 enableHighAccuracyL:false, // 默认值 false 55 // timeout 的值是一个正的 long 值。它表明的是设备必须在多长时间（单位毫秒）内返回一个位置。默认值是 Infinity，意思是获取到一个位置之后， getCurrentPosition() 才会返回一个值。 56 timeout: 5000 , // 5s 57 // 是一个正的 long 值。它表明可以返回多长时间（即最长年龄，单位毫秒）内的可获取的缓存位置。如果设置为 0, 说明设备不能使用一个缓存位置，而且必须去获取一个真实的当前位置。如果设置为 Infinity ，那么不管设置的最长年龄是多少，设备都必须返回一个缓存位置。默认值：0。 58 maximumAge: 0, 59 }) 60 }
4. 创建指定大小的地图容器。 需要设置宽和高 用来容纳地图大小
<div id="container">div> // 必须通过id盒子才能显示出来5. 创建地图实例化对象 // 第一个参数是 地图容器的id名 ，第二个参数 地图的相关配置项 js：
1 let map = new AMap.Map('container',{ 2 // 定义地图的中心点坐标，可以在高德地图api中开发支持中的坐标拾取点中获得经纬度坐标 3 center:[114.840524,34.065278], 4 // 地图缩放级别 5 zoom:16, 6 })
6.创建地理点标记 必须要有上面步骤才能执行下面的步骤：
js：
1 //获取点标记的html对象
let text = document.querySelector('.text')
2 // 创建点标记 3 let marker = new AMap.Marker({ 4 // 点标记的坐标 5 position: [113.54377, 34.802228], 6 // 要显示该marker的地图对象 7 // map:map //没有在服务器上面打开的话会显示一直加载不出来的图片 服务器就是通过右键在浏览器中打开这个选项打开 8 // 自定义点标记图标 9 icon: './image/f.png', 10 title: '河南省电子商务产业园', 11 // 自定义点标记的内容 html 字符串或者 html 对象 12 // content:'点标记的内容
' 13 content: text, // 这一部分也是用来标记提示的 可有可无 和 map以及icon是同样的操作 14 // 点标记的位置 15 anchor: 'top-center', // 设置锚点方位 16 }) 17 18 map.add(marker)
1.让多个地理点标记显示出来案例 与上面的样式无关：
html：
<div id="container">div> // 需要给这个盒子设置宽高
js：
1 // 这个是引入的第三方链接 2 // 这个js文件是从高德地图api里面拷贝过来的多个地理点标记的对象 eg： 北京 上海 南京... 3
1.地图控件显示：
html:
<div id="container" style="width: 500px; height: 500px; ">div>
js:
1 2