最近项目中使用到了浏览器端定位记录下来
目前已知有两种方式实现定位
1.H5自带定位,可以获取到当前的gps坐标,然后使用第三方工具(百度,高德等)转换坐标即可获取当前的地理位置信息,具体代码网上很多,但我试了下,不知道是什么原因,我本地不能使用这种定位方式,可能是谷歌浏览器只支持https连接的浏览器定位造成的
2.使用第三方工具提供的定位工具定位,主要考察了两种工具,百度与高德
百度:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=....."></script>
//定位代码:
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地址定位,百度地图不清楚但可能是这个原因造成)
高德定位:
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=..."></script>
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端定位还是蛮准确的