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);
                }
            });