移动端html5如何定位?
话不多说我们直接贴代码,首先我们针对我们的安卓手机进行定位,安卓手机我们直接可以调用html5的定位,但是如果要想定位准确我们需要用百度地图进行经纬度转换
1,html5定位
var options={
enableHighAccuracy:true,//开启高精度
maximumAge:1000
}
if(navigator.geolocation){
//浏览器支持geolocation
navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
}else{
//浏览器不支持geolocation
errGoIndex('您的浏览器不支持地理位置定位');
}
//失败时
function onError(error){
status=true;
switch(error.code){
case error.PERMISSION_DENIED:
errGoIndex("定位失败,用户拒绝请求地理定位");
break;
case error.POSITION_UNAVAILABLE:
errGoIndex("定位失败,位置信息是不可用");
break;
case error.TIMEOUT:
errGoIndex("定位失败,请求获取用户位置超时");
break;
case error.UNKNOWN_ERROR:
errGoIndex("定位失败,定位系统失效");
break;
}
}
2,成功时我们进行百度地图经纬度转换
function onSuccess(position){
//经度
var longitude = position.coords.longitude;
//纬度
var latitude = position.coords.latitude;
//坐标转换完之后的回调函数
translateCallback = function (data){
if(data.status === 0) {
var marker = new BMap.Marker(data.points[0]);
bm.addOverlay(marker);
var label = new BMap.Label("转换后的百度标注(正确)",{offset:new BMap.Size(20,-10)});
marker.setLabel(label); //添加百度label
bm.setCenter(data.points[0]);
}
}
setTimeout(function(){
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr, 3, 5, translateCallback)
}, 1000);
}
转换为我们的百度地图的经纬度,然后我们可以利用我们的百度地图api进行精确的定位
3,很多人遇到苹果手机上html5无法定位的问题,主要是ios10以上的版ipone对我们的安全作了更高的限制,所有的http请求都不能定位,这时候我们就不能使用我们的html5进行定位了,我当时也是花了九牛二虎之力才找到替换他的方法,就是利用我们的腾讯地图api进行定位,经过试验定位很准确。
var geolocation = new qq.maps.Geolocation("自己的注册码", "myapp");
if (geolocation) {
var options = {timeout: 20000};
geolocation.getLocation(onSuccess, showErr, options);
} else {
errGoIndex("定位尚未加载");
}
然而这一步如果是使用我们的百度地图,我们发现我们获得经纬度获得的地点不准确,其实我们还需要进行将腾讯地图转化为百度地图的操作,这样我们获得定位信息就相当准确了。