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>

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

制作地图名片

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

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

Android百度定位获取经纬度
Android百度定位获取经纬度一.百度定位误差问题:参考一片文章 http://blog.csdn.net/shaoyezhangliwei/article/details/44830301 1. ...
android 高德地图定位获取经纬度
android 高德地图定位获取经纬度之前开发定位都是集成百度的,领导说要用高德的,没办法干吧,官方的文档太详细了看着真累. 我们得先去官网注册开发者账号,创建应用,填写自己项目的包名和SHA1, ...
Android系统定位获取经纬度
Android系统定位获取经纬度直接上代码 public class LocaltionUtil {private double latitude = 0.0;private double long ...
前端web用腾讯地图api根据地址获取经纬度
需求:使用腾讯地图,通过输入的地址获取经纬度 1.先引入腾讯地图,参考https://blog.csdn.net/l13620804253/article/details/117254651 2.要调 ...
reactnative 获取定位_【React Native】定位获取经纬度，当前城市等地址信息
最近做React Native时,需要用到城市定位的功能,React Native中文网的定位部分中也提供了相应的方法.主要用到的方法有: 这里只需要获取到经纬度,城市等信息,持续监听的函数就不需要了 ...
百度地图API调用实现获取经纬度以及标注
一.申请AK 百度搜索百度地图API,进入官网文档,按照官网文档提示注册百度账号并申请AK.申请AK 填写相关信息,应用名称随意.应用类型根据协议来选择. 二.编写代码根据官网的代码(入门引用和获取 ...
vue - vue使用腾讯api进行定位获取，绘制地图、标点、搜索、路线规划
章节目录 1,前言 2,准备 3,开始引入api 4,获取定位 5,绘制地图和标点 6,关键字搜索功能 7,驾车线路规划 8,两点经纬度的直线距离计算 9,使用过程中的一些常见问题 10,参考链接 1 ...
android定位获得经纬度,android 定位(获取经纬度)
直接上代码: 重要的是获取位置权限,否则是获取不到的!!! LocationManager lm = (LocationManager) getSystemService(Context.LO ...
微信小程序-地理授权-获取经纬度-权限相关流程总结
想要获取当前位置,大前提:1.微信允许访问位置信息,2.手机定位开启所以,我们进入小程序时,要获取位置,需要考虑权限问题. 怎样才能在每次进入都获取,并且大部分用户进入执行的代码更少?怎样避免每次 ...
iOS开发——定位获取经纬度
最近公司提供了一个学习iOS的机会,问我是否愿意学习iOS,还是继续只做android开发.我感觉非常幸运,能有此机会去学习iOS,当即说要学习iOS开发. 学习了几天啦,做了一个小demo实现了获取 ...

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

H5 API 地理定位

获取当前位置

调用百度全景地图

制作地图名片

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

最新文章

热门文章