【前端】【H5 API】地理定位（获取经纬度）

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	当前设备的朝向(以弧度为单位)，从正北开始计算

获取当前位置

    
    
    
    



    
获得您的坐标：
    试一下
    

为了查看获取定位后的效果，我们可以手动设置一个虚拟的位置，单击开发者工具右上角的“︙”按钮，选择“More tools”-“Sensors”(传感器)，然后在Geolocation对应的下拉菜单中选择“Shanghai”

调用百度全景地图

百度地图开放平台 | 百度地图API SDK | 地图开发 (https://lbsyun.baidu.com/)

自己去申请密钥，并替换在上述代码中

制作地图名片

百度地图名片 (http://api.map.baidu.com/mapCard/)