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