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

深碍√TFBOYSˉ_ 2023-10-17 22:12 106阅读 0赞

该定位功能是使用百度地图的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;

});       
    	    }   
    	});