H5获取用户位置信息，以及相关的坑

---

h5如何获取用户定位信息

为了安全稳定一些，使用百度地图

第一步: 创建应用

登录百度开发者平台，创建应用

第二步

输入应用名称，选择浏览器端，完成之后，提交返回我的应用，会看到和上面一张图一样的，有一个AK，

第三步：在项目中创建Bmap.js

export default {
    init: function (){
    	const AK = "你的AK";
    	const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak="+ AK +"&s=1&callback=onBMapCallback";
    	return new Promise((resolve, reject) => {
    	// 如果已加载直接返回
    	if(typeof BMap !== "undefined") {
    		resolve(BMap);
    		return true;
    	}
    	// 百度地图异步加载回调处理
    	window.onBMapCallback = function () {
    		resolve(BMap);
    	};
    	const getCurrentCityName = function () {
    		return new Promise(function (resolve, reject) {
    		let myCity = new BMap.LocalCity()
   			myCity.get(function (result) {
    			resolve(result.name)
    		})
    	})
    }
    // 插入script脚本
    let scriptNode = document.createElement("script");
    	scriptNode.setAttribute("type", "text/javascript");
    	scriptNode.setAttribute("src", BMap_URL);
    	document.body.appendChild(scriptNode);
    });
  }
}

第四步：在需要的文件中引入，在monted中调用 getCurrentCity

import getUserLocation from "@/utils/Bmap.js"

  //开启定位
    const getCurrentCity = ()=>{
            getUserLocation.init().then(BMap=>{
                const geolocation=new BMap.Geolocation();
                geolocation.getCurrentPosition(
                function getinfo(position){
                    console.log(position)//这里就会获取到用户的经纬度信息
                }
                );
            })
    }

效果图

问题1：用户拒绝之后依然可以拿到位置信息

上面写完的时候，当用户拒绝，我们依然可以获取到定位，但是信息不是很准确
但是我们可以更加刚才获取到的信息的position.accuracy这个值进行判断
如果用户拒绝了position.accuracy这个值为null，如果不拒绝是有值的，亲测可用哈哈哈

  //开启定位
    const getCurrentCity = ()=>{
            getUserLocation.init().then(BMap=>{
                const geolocation=new BMap.Geolocation();
                geolocation.getCurrentPosition(
                function getinfo(position){
                   if(position.accuracy){
                    //具体操作
                    }else{
                        Toast("用户拒绝获取定位");
                    }
                }
                );
            })
    }

问题2：app缓存用户信息，两次之后不在调起位置授权弹窗

关于这个问题，百度官方给的回答也是没有办法的，因为ios 会缓存用户授权信息，所以两次之后就不会在吊起这个授权弹窗，
但是安卓会每次吊起

http://www.skyfox.org/html5-geolocation-safari-user-permission-prompt.html
这篇文章的解决方案是：
（设置）Settings -> （通用）Genera -> （重置） Reset-> （重置定位于隐私）Reset Location & Privacy.
（设置）Settings ->( 隐私）Privacy 开启 Location Services.

但是我测试不好使，只能卸载重装

问题2转自 Lvan-Zhang

根据经纬度获取citycode等信息

//vue.config 中定义接口BdMap===http://api.map.baidu.com
	           Api.get('/BdMap/reverse_geocoding/v3',{
                            ak:'你的ak ',
                            output:'json',
                            coordtype:'wgs84ll',
                            location:lat+','+lng
                        }).then(res=>{
                            console.log(res.result.cityCode;,'-----');
                        })