记录一下在浏览器端利用微信地图定位接口和百度地图定位接口实现高精度定位的开发心得

地图定位是一个很要命的问题，目测下来在手机浏览器端基于微信生态的定位接口要精准情况好过直接用百度 LBS 等地图定位。百度地图好处是未获取到坐标会按 IP 走定位。

业务背景：后台通过百度地图拾取坐标，用户侧通过微信公众号进入H5端应用，利用微信自身的定位接口实现精准的定位坐标，并转化为百度坐标标准后提交后台计算距离。同时也要兼容下通过PC端微信版进入获取定位的问题。

所以看各自业务需求了。上代码投喂吧：

<div id="allmap" style="width:0px;height:0px;display:none;"></div>
<script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=百度AK值"></script>

<script type="text/javascript">
function isWechat() {
    return /MicroMessenger/i.test(window.navigator.userAgent);
}
//根据自己的消息组件封装吧
function _msg(txt,type,url){
    if (type==1){
        return alert(txt);
    }else{
        if (type==200 && url.length>5){
            setTimeout('location.href = "'+url+'"',3000);
            return alert(txt);
        }
        return alert(txt);
    }
}

function getLBS(){
	if (!isWechat()){
		console.log('开始走百度定位');
		_msg('正在LBS定位',0);	
		getBMap();
	}else{
		_msg('正在定位',0);	
		wx.ready(function () {
			wx.getLocation({
				type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
				success: function (res) {
					var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
					var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
					var speed = res.speed;
					var accuracy = res.accuracy; // 位置精度	
					//将腾讯、高德地图经纬度转换为百度地图经纬度
					let bd_lat;
					let bd_lon;
					let x_pi = 3.14159265358979324;
					let x = longitude, y = latitude;
					let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * x_pi);
					let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * x_pi);
					longitude = z * Math.cos(theta) + 0.0065;
					latitude = z * Math.sin(theta) + 0.006;
					
					var data = {"lat":latitude,"lng": longitude};
					console.log(data);	
					$.post("后端记录用户坐标地址的接口", {data:data}, function (res) {
						cache("lbs",true);
						markMap(longitude,latitude);
						_msg(res.message,res.status);						
					}, "json");
				},
				fail: function(err) {
					console.log('wx接口开始走百度定位');
					getBMap();
					//_msg("获取定位位置信息失败！",0);
				},
				cancel: function (res) {
					console.log('wx接口开始走百度定位');
					getBMap();
					//_msg('用户拒绝授权获取地理位置',0);
				}
			})
			console.log('wxread');
		})	
	}
}

function markMap(lng,lat){
    var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(116.331398,39.897445),19);
    map.enableScrollWheelZoom(true);
	map.clearOverlays(); 
	var new_point = new BMap.Point(lng,lat);
	var marker = new BMap.Marker(new_point);
	map.addOverlay(marker); 
	map.panTo(new_point); 
	getAddress(new_point); 
}

function getBMap(){
	var map = new BMap.Map("allmap");
	var lat='116.331398';
	var lng='39.897445';
	
	var point = new BMap.Point(lat,lng);
	map.centerAndZoom(point,18);
	var navigationControl = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT,type: BMAP_NAVIGATION_CONTROL_LARGE,enableGeolocation: true});
	map.addControl(navigationControl);
	var geolocation = new BMap.Geolocation();
	geolocation.enableSDKLocation();
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
			var mk = new BMap.Marker(r.point);
			map.centerAndZoom(mk,18);
			map.addOverlay(mk);
			map.panTo(r.point);
			getAddress(r.point);
			var data = {"lat":r.point.lat,"lng":r.point.lng};
			$.post("后端记录用户坐标地址的接口", {data:data}, function (res) {
				_msg(res.message,res.status);			
			}, "json"); 
			console.log('定位：'+r.point.lng+','+r.point.lat);
		}else {
			geolocation.getCurrentPosition(function(r){
				if(this.getStatus() == BMAP_STATUS_SUCCESS){
					var mk = new BMap.Marker(r.point);
					map.centerAndZoom(mk,18);
					map.addOverlay(mk);
					map.panTo(r.point);
					getAddress(r.point); 
					var data = {"lat":r.point.lat,"lng":r.point.lng};
					$.post("后端记录用户坐标地址的接口", {data:data}, function (res) {
						cache("lbs",true);
						_msg(res.message,res.status);
					}, "json");					
					console.log('SDK定位：'+r.point.lng+','+r.point.lat);
				}else {
					return _msg('无法获取您当前的定位信息,您将无法签到！错误码：'+this.getStatus(),0,'');
				}        
			});
		}
	});
	//获取地址信息，设置地址label
    function getAddress(point) {
        var gc = new BMap.Geocoder()
        gc.getLocation(point, function (rs) {
			var addComp = rs.addressComponents
			var address =
				addComp.province +
				addComp.city +
				addComp.district +
				addComp.street +
				addComp.streetNumber //获取地址
			console.log(address)
			_msg(address,0);
        })
    }
}