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 += ` <p>经度：${longitude} </p> 24 <p>纬度 ${latitude}</p> 25 <p>位置精度 ${accuracy}</p> 26 <p> 海拔： ${altitude} </p> 27 <p>海拔位置精度： ${altitudeAccuracy} </p> 28 <p>速度： ${speed} </p> 29 <p>方向： ${heading}</p> 30 <p>时间戳： ${timestamp}</p>` 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 }
地图开放平台：百度地图API,高德地图API,腾讯地图API
个人比较喜欢高德 文档相对详细 可以看懂 学习起来比较好理解
高德地图api 五分钟上手教程
1. 注册成为开发者 ： 申请秘钥 （需要进入）
2. 创建应用 获取key值 和 秘钥
3. 直接引入 js 脚本的形式： 引入js api 文件
<script src = 'https://webapi.amap.com/maps?v=2.0&key=您申请的key值'></script>
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:'<h1>点标记的内容</h1>' 13 content: text, // 这一部分也是用来标记提示的 可有可无 和 map以及icon是同样的操作 14 // 点标记的位置 15 anchor: 'top-center', // 设置锚点方位 16 }) 17 18 map.add(marker)
1.让多个地理点标记显示出来案例 与上面的样式无关：
html：
<div id="container"></div> // 需要给这个盒子设置宽高
js：
1 <script src='https://webapi.amap.com/maps?v=2.0&key=fba13be7e4cd4c02ccbceed96eb165cf'></script> // 这个是引入的第三方链接 2 <script src="./js/capitals.js"></script> // 这个js文件是从高德地图api里面拷贝过来的多个地理点标记的对象 eg： 北京 上海 南京... 3 <script> 4 let map = new AMap.Map('container', { 5 center: [113.54377, 34.802228], 6 zoom: 5 7 }) 8 9 capitals.forEach(function (item, index) { 10 let marker = new AMap.Marker({ 11 position: item.center, // 让每个显示的城市 这个center是拷贝的center不是map里面的center 12 map: map, 13 icon: './image/f.png', 14 title: item.name // 这个name也是拷贝过来的name 15 }) 16 }) 17 18 </script>
1.地图控件显示：
html:
<div id="container" style="width: 500px; height: 500px; "></div>
js:
1 <script src='https://webapi.amap.com/maps?v=2.0&key=fba13be7e4cd4c02ccbceed96eb165cf'></script> 2 <script> 3 let map = new AMap.Map('container', { 4 center: [113.54377, 34.802228], 5 zoom: 16 6 }) 7 8 // 同时引入工具条插件，比例尺插件和鹰眼插件 9 AMap.plugin([ 10 'AMap.ToolBar', 11 'AMap.Scale', 12 'AMap.HawkEye', 13 'AMap.MapType', 14 'AMap.Geolocation', 15 ], function () { 16 // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件 17 map.addControl(new AMap.ToolBar()); 18 19 // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺 20 map.addControl(new AMap.Scale()); 21 22 // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图 23 map.addControl(new AMap.HawkEye({ isOpen: true })); 24 25 // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制 26 map.addControl(new AMap.MapType()); 27 28 // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置 29 map.addControl(new AMap.Geolocation()); 30 });
