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

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

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

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

<script src="http://api.map.baidu.com/api?ak=你申请的AK码&v=2.0&services=false"></script>

最开始我是使用的下面这种写法借鉴的一个前辈的博客（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;

	        });       
	    }   
	});