H5 API 地理定位
地理定位在日常生活中应用比较广泛，例如，互联网打车、在线地图等。在HTML 5的规范中，增加了获取用户地理位置信息的接口Geolocation，开发者可以通过经纬度来获取用户的地理位置信息，Geolocation接口的特点如下。
- Geolocation接口封装了获取位置信息的技术细节。
- 开发者不需要关心信息的来源，只需关注如何使用即可，这极大地简化了开发的难度。
- 目前，该接口已经得到了大部分浏览器的支持，如Firefox、IE 9、Opera、Safari和Chrome等。
- 对于拥有GPS的设备，定位会更加准确，如iPhone和Android手机等。
navigator.geolocation对象提供了getCurrentPosition()方法来获取当前地理位置。
其中，navigator是浏览器的内置对象。
当getCurrentPosition()方法被调用时，会发起一个异步请求，浏览器会去调用底层的硬件来更新当前的位置信息。
position对象中的coords属性包含的信息如表所示。
| 属性名 | 描述 |
| latitude | 十进制表示的纬度坐标 |
| longitude | 十进制表示的经度坐标 |
| accuracy | 当前经纬度信息的精度（单位米） |
| altitude | 海拔高度（单位米） |
| altitudeAccuracy | 当前海拔高度的精度 |
| heading | 当前设备的朝向（以弧度为单位），从正北开始计算 |
获取当前位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p id="demo">获得您的坐标：</p> <button onclick="getLocation()">试一下</button> <script> var x = document.getElementById('demo'); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError); } else { x.innerHTML = '当前浏览器不支持地理定位'; } } // 获取定位成功，显示位置信息 function showPosition(position) { x.innerHTML = 'Latitude(纬度): ' + position.coords.latitude + // 纬度 '<br>Longitude(经度): ' + position.coords.longitude; // 经度 } // 获取定位失败，显示错误信息 function showError(error) { switch (error.code) { case error.PERMISSION_DENIED: x.innerHTML = '用户拒绝地理定位请求'; break; } } </script> </body> </html>
为了查看获取定位后的效果，我们可以手动设置一个虚拟的位置，单击开发者工具右上角的“︙”按钮，选择“More tools”-“Sensors”(传感器)，然后在Geolocation对应的下拉菜单中选择“Shanghai”
调用百度全景地图
百度地图开放平台 | 百度地图API SDK | 地图开发 (https://lbsyun.baidu.com/)
<!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="//api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <title>地图展示</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); // 创建Map实例 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别 //添加地图类型控件 map.addControl(new BMap.MapTypeControl({ mapTypes:[ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]})); map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 </script>
自己去申请密钥，并替换在上述代码中
