webview中嵌套html实现精准定位（百度地图、高德地图、腾讯地图、H5原生定位）js对比

最新推荐文章于 2024-08-07 09:41:56 发布

zbmzbm00

最新推荐文章于 2024-08-07 09:41:56 发布

阅读量1.5w

点赞数 4

分类专栏：前端技术

本文链接：https://blog.csdn.net/zbmzbm00/article/details/82660774

版权

前端技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在实现一个功能，就是在安卓手机和苹果手机嵌入html代码，实现精准定位，我为此对比几种定位的方法。我要的是精准定位，就是误差在100米左右的功能，类似与外卖app那种定位精确度

首先是原生h5定位

if(browser.versions.android){
        var options={
            enableHighAccuracy:true,
            maximumAge:1000,
            timeout:5000
        }
        if(navigator.geolocation){
            //浏览器支持geolocation
            navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
        }else{
            //浏览器不支持geolocation
            errGoIndex('您的浏览器不支持地理位置定位');
        }

h5定位如果高精度开启为true的话，默认会开启gps,基本定位是很精准的，但是呢必须要授权，但是有个问题是在ios10系统之上的时候,由于苹果对安全这块要求更严格了，所以必须支持https才能使用h5定位，所以呢我们暂时无法全部替换到https请求，所以此方法暂时无法使用。

使用百度地图定位

	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.331398,39.897445);
	map.centerAndZoom(point,12);

	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r){
		if(this.getStatus() == BMAP_STATUS_SUCCESS){
			var mk = new BMap.Marker(r.point);
			map.addOverlay(mk);
			map.panTo(r.point);
			alert('您的位置：'+r.point.lng+','+r.point.lat);
		}
		else {
			alert('failed'+this.getStatus());
		}        
	},{enableHighAccuracy: true})

这里使用的是百度浏览器定位功能，因为原生态h5定位也是使用浏览器定位，所以定位也是比较准确的，但是呢经过测试，只在苹果上定位是很准确的，但是呢在安卓上定位不准确，所以该方法也无法使用。

腾讯地图定位

  var geolocation = new qq.maps.Geolocation("KQYBZ-Z5G3P-RLDDI-VI3T4-WPKXK-R7B4G", "myapp");
        if (geolocation) {
            var options = {timeout: 15000};
            geolocation.getLocation(onSuccess, showErr, options);
        } else {
            errGoIndex("定位尚未加载");
        }

腾讯地图默认支持h5定位，所以他们推出了以上代码，经过测试使用，我们在苹果上定位很准确，有时候呢在安卓上的定位也准确，有时候不准确，这也是它的弊端吧，但是呢，它不用请求是https，这一点还是很方便的。

高德地图定位

 /***************************************
     由于Chrome、IOS10等已不再支持非安全域的浏览器定位请求，为保证定位成功率和精度，请尽快升级您的站点到HTTPS。
     ***************************************/
    var map, geolocation;
    //加载地图，调用浏览器定位服务
    map = new AMap.Map('container', {
        resizeEnable: true
    });
    map.plugin('AMap.Geolocation', function () {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true,//是否使用高精度定位，默认:true
            timeout: 15000,          //超过15秒后停止定位，默认：无穷大
            buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
            zoomToAccuracy: false,      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            buttonPosition: 'RB'
        });
        map.addControl(geolocation);
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', onSuccess);//返回定位信息
        AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
    });

经过很多的定位代码和不同的定位测试，发现了高德的定位还是很准确的，无论是安卓还是苹果端都是很完美的精确定位，主要是因为高德定位采用了原生h5定位加上浏览器和ip定位多种组合，所以保证了定位的准确性,后面经过多次测试发现，在安卓部分手机定位会失败的情况，很不稳定，目前还不知道原因。

最后附上一张定位图：