H5地理定位、百度地图使用

1，H5地理定位

window.navigator.geolocation 是H5新增的地理位置服务，有以下三个API：

1.1 获取当前地理位置(获取位置是属于异步操作，结果在回调函数中)

navigator.geolocation.getCurrentPosition()获取当前地理位置，经度、纬度是在第一个回调函数参数的coords字段中获取。longitude是经度，latitude是纬度。如果用户阻止获取位置，会执行第二个回调函数，也就是失败的回调。

 navigator.geolocation.getCurrentPosition(function(result) {// 得到地理定位结果的前提：1，设备支持并开启定位功能 2，用户在网页弹窗授权允许console.log(1, result); //成功的结果h1.innerHTML = `当前位置的信息如下:<br>经度是:${result.coords.longitude}<br>纬度是：${result.coords.latitude}<br>海拔是：${result.coords.altitude}<br>方向是：${result.coords.heading}<br>速度是：${result.coords.speed}<br>`}, function(err) {// 如果用户阻止获取位置，会执行第二个回调函数，也就是失败的回调console.log(2, err); //失败的信息})

如果设备不支持定位或用户关闭了设备的定位功能，则不会调用回调函数

1.2 开启位置监听，跟踪位置变化，相当于计时器，每隔几秒获取一次位置

        var watchID = navigator.geolocation.watchPosition(function(result) {console.log(3, result.coords);h1.innerHTML = `当前位置的信息如下:<br>经度是:${result.coords.longitude}<br>纬度是：${result.coords.latitude}<br>海拔是：${result.coords.altitude}<br>方向是：${result.coords.heading}<br>速度是：${result.coords.speed}<br>`})

1.3 结束位置监视，定制计时器，类似于计时器的停止方式，开启监视时，同步返回值是id

       setTimeout(() => {navigator.geolocation.clearWatch(watchID); //一分钟之后，结束监视}, 60000);

2,百度地图的使用

2.1先设置禁止用户缩放网页

在head标签中含有name="viewport"的meta标签中content字段中听见user-scalable=no值，表示在移动端禁止用户缩放网页，可以缩放地图

 <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">

2.2 引入百度地图API文档

    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=你的密钥"></script>

上边的密钥需要到百度地图开发平台注册并且申请为个人开发者才拥有的密钥

2.3 创建百度地图的容器

         <div id="container"></div>

2.4 创建地图实例对象

        var map = new BMap.Map("container");

注意：方法里边放的是容器，如果API版本不一样实例对象就不一样，我这里引入的是3.0版本

2.5 设置中心点坐标

       var point = new BMap.Point(112.5285, 32.9907);

2.6 初始化地图，设置地图中心点和缩放级别

级别越小，地图越小

        map.centerAndZoom(point, 15);

2.7 开启鼠标滚轮缩放

        map.enableScrollWheelZoom(true);

2.8 绑定地图的点击事件

        map.addEventListener("click", function(e){// 拿到点击地图上这一点的经纬度// alert(e.point.lng + ", " + e.point.lat);// 让地图中心平滑移动到点击的点  map.panTo(new BMap.Point(e.point.lng, e.point.lat)); })

2.9 逆地址解析

逆地址解析：根据经度和纬度解析为汉字

// 创建地理编码实例, 并配置参数获取乡镇级数据   var myGeo = new BMap.Geocoder({extensions_town: true});// 根据坐标得到地址描述    myGeo.getLocation(center, function(result) {if (result) {console.log(result.address);}});

H5地理定位、百度地图使用相关推荐

android 百度地图h5,【分享】H5 地理信息定位+百度地图
[JavaScript] 纯文本查看复制代码 //创建和初始化地图函数: function initMap(longitude,latitude){ createMap(longitude,lati ...
微信H5页面嵌入百度地图---解决手机的webKit定位，ios系统对非https网站不提供支持问题
微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非https网站不提供支持问题参考文章: (1)微信H5页面嵌入百度地图---解决手机的webKit定位,ios系统对非http ...
关于app内嵌h5页面调用百度地图定位问题，为什么定位不准呢？
关于app内嵌h5页面调用百度地图定位问题,为什么定位不准呢?以下为代码. 百度地图:里面有3种定位方式(a:浏览器定位,b:IP定位,c:定位SDK辅助定位),我选择第3种,是需要app那块添加些什 ...
java 微信百度地图_[Java教程]H5微信通过百度地图API实现导航方式二
[Java教程]H5微信通过百度地图API实现导航方式二 0 2017-08-01 23:53:20 要有服务器才行哦 body, html {width: 100%;height: 100%;mar ...
android 百度地图拖动定位,百度地图获取定位，实现拖动marker定位，返回具体的位置名...
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑"; ...
H5新特性百度地图SDK--API引入、地图控件、地理编码与逆地理编码、地图标注、路径规划（基于2.0）
一.API基本使用 1.1 大致流程打开,百度地图官网登录或者注册一个百度账号,并完成相关验证登陆并申请成为开发者在百度地图开发平台的首页选择控制台,在控制台中创建应用创建好应用以后就能在控 ...
H5 如何唤起百度地图 App
最近接手了一个需求,要求混合式开发,前端做好 h5 后将页面嵌入到 ios 和 android 中,需要用到百度地图的地图导航.具体功能点如下: 如果手机端(ios, android)安装了百度地图, ...
地理定位(高德地图官方文档)
地理定位 HTML5提供的地理定位相关API可以使得网页获取客户端设备所在的地理位置(经纬度),从而给与用户更好的应用体验. 定位的基础原理 IP定位运营商基站定位 GPS卫星定位 HTML5提供了 ...
百度地图android室内定位,百度地图4.0正式发布，主打免费语音导航、室内定位、实时公交和生活搜索 (视频)...
自2010年10月百度地图在塞班平台上线了第一个版本以后,陆续登陆了Android和iPhone平台,据百度地图团队介绍,其最新的用户数已达7000万.今天,百度地图4.0 正式发布(iPhone版 ...