微信公众号使用H5获取地理位置信息并定位

该定位功能是使用百度地图的API实现的。

首先需要在百度地图的开发平台中申请一个AK码。

然后再html中引入百度地图API

最开始我是使用的下面这种写法借鉴的一个前辈的博客(https://www.cnblogs.com/liuxiaofan/p/4864681.html):

 1 navigator.geolocation.getCurrentPosition(function (position) {
 2         var lat = position.coords.latitude;
 3         var lon = position.coords.longitude;
 4         var point = new BMap.Point(lon, lat);  // 创建坐标点
 5         // 根据坐标得到地址描述
 6         var myGeo = new BMap.Geocoder();
 7         myGeo.getLocation(point, function (result) {
 8             var city = result.addressComponents.city;
 9             $('body').html(city);
10         });
11     });

我自己是安卓手机测试是OK的能定位到区级。

上线后发现安卓可以定位,苹果不能,又查看网上资料发现navigator在IOS进行被限制,在IOS10版本中只有https协议的才能使用navigator否则定位失效。

如果你遇到这种情况,有两种解决方法:

1,将自己的网站升级成https协议的。

2,使用百度地图自己的Geolocation,具体如下

	var geolocation = new BMap.Geolocation();   
	geolocation.getCurrentPosition(function (r) {   
		
	    if (this.getStatus() == BMAP_STATUS_SUCCESS) {    
	        var mk = new BMap.Marker(r.point);    
	        currentLat = r.point.lat;    
	        currentLon = r.point.lng;     
	        
	        var pt = new BMap.Point(currentLon, currentLat);    
	        var geoc = new BMap.Geocoder();    
	        geoc.getLocation(pt, function (rs) {    
	            var addComp = rs.addressComponents;    
	            var city = addComp.city;  
	            location.href="/getPosition?cityName="+city;
	        });       
	    }   
	});  




你可能感兴趣的:(前端,h5前端定位,百度地图api,安卓IOS定位异常)