浏览器js定位(百度地图与高德地图)

最近项目中使用到了浏览器端定位记录下来
目前已知有两种方式实现定位
1.H5自带定位,可以获取到当前的gps坐标,然后使用第三方工具(百度,高德等)转换坐标即可获取当前的地理位置信息,具体代码网上很多,但我试了下,不知道是什么原因,我本地不能使用这种定位方式,可能是谷歌浏览器只支持https连接的浏览器定位造成的
2.使用第三方工具提供的定位工具定位,主要考察了两种工具,百度与高德
百度:


//定位代码:
var geolocation = new BMap.Geolocation();
$scope.getLocation = function() {
   $scope.gisInfo = "正在定位中...";
   geolocation.getCurrentPosition(
           // 获取位置信息成功
      function(position) {
           if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                   // 根据坐标得到地址描述
        $scope.gisLoc = position.point.lng+","+position.point.lat;
        getGeo(position.point.lng, position.point.lat);
            } else {
                 $scope.gisInfo = "定位失败";
           }
       }, {
          // 指示浏览器获取高精度的位置,默认为false
          enableHighAccuracy : true,
          // 指定获取地理位置的超时时间,默认不限时,单位为毫秒
          // timeout: 5000,
          // 最长有效期(30S),在重复获取地理位置时,此参数指定多久再次获取位置
          maximumAge : 30 * 1000
                            });
                    }

   $scope.getLocation();

    /**
     * 根据坐标得到地址描述
     *
     * @param longitude
     * @param latitude
     * @returns
     */
     function getGeo(longitude, latitude) {
       var myGeo = new BMap.Geocoder();
       myGeo.getLocation(new BMap.Point(longitude, latitude),
          function(result) {
              if (result) {
                  fulladdress = result.addressComponents.city
                                        + result.addressComponents.district
                                        + result.addressComponents.street;
           $scope.gisInfo = "";
           $scope.gis = fulladdress;
           } else {
           $scope.gisInfo = "地址解析失败";
           }
        });
  }

百度定位主要使用getCurrentPosition()即可获取当前位置信息,使用后发现百度地图在手机上定位是很准确,但是在pc端定位时很不准确,因此在pc端使用高德地图地位(高德地图上手机上优先使用浏览器定位,pc端优先使用ip地址定位,百度地图不清楚但可能是这个原因造成)

高德定位:

        

var geolocation = new BMap.Geolocation();

    function getLocation() {
        //初始化高德地图插件,注意 iCenter可以不对应html中的控件,但必须有值
        var mapObj = new AMap.Map('iCenter');
        //加载定位插件
        mapObj.plugin('AMap.Geolocation', function () {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位,默认:true
                timeout: 10000,          //超过10秒后停止定位,默认:无穷大
                maximumAge: 0,           //定位结果缓存0毫秒,默认:0
                convert: true,           //自动偏移坐标,偏移后的坐标为高德坐标,默认:true
            });
            mapObj.addControl(geolocation);
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
            //AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
        });
    }

    function onComplete(data) {
        if ("SUCCESS" == data.info) {
            //高德地图转百度地图坐标
            //因为系统中使用的均是百度的坐标,此处需要将高德坐标转换成百度坐标
            var ggPoint = new BMap.Point(data.position.lng, data.position.lat);
            var convertor = new BMap.Convertor();
            var pointArr = [];
            pointArr.push(ggPoint);
            //坐标转换方法的意义可以查询 http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition
            convertor.translate(pointArr, 3, 5, function (data) {
                if (data.status === 0) {
                    $scope.gisLoc = data.points[0].lng + "," + data.points[0].lat;
                }
            })
            fulladdress = data.formattedAddress;
            $scope.gis = fulladdress;
            $scope.gisInfo = "";
        } else {
            $scope.gisInfo = "地址解析失败";
        }
    }
    getLocation();

高德地图在pc端定位还是蛮准确的

你可能感兴趣的:(js)