HTML5 GPS定位&百度地图API

MOZHERV 2016-04-17

展开全文

这几天再研究地理定位，做了一些手记，和大家分享一下~

我们有时会有这样的开发需求：获取到当前用户的位置，然后为用户提供一些服务。

此时可以采用两种定位方式，一种是用GPS的定位，然后将定位到的经纬度传递到百度地图的API接口当中。另一种方法是利用百度API接口，使用IP地址定位，然后使用IP地址获取到的经纬度，传递到百度地图API接口中。

自己尝试使用了这两种方式进行定位。相对来说，IP地址定位，偏差比较大。GPS定位虽然还可以，但是也不足够精确。产生比较大偏差的原因有可能是以下几点造成的：

1、GPS一打开就进行了定位。当GPS没有搜到足够的卫星，或者信号不好时数据是不对的。

2、没有做GPS坐标到百度坐标的转换——这个原因也是不精确的主要原因

那么在拿到GPS定位的经纬度之后，为了让定位精确，我们需要进行“纠偏”。此时也就是所谓的“坐标转换”。坐标转换的方法有两种，一种是调用外部网站提供的纠偏方法，另外一种是使用百度自己的API。

方法1：外部网站纠偏方法

可以访问http:///网站，然后申请测试key，按照它给出的链接既可以获取到纠偏后的经纬度。

方法2：利用百度自己的API

不多说，直接上代码：

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=申请到的百度的密钥"></script>
	<title>GPS转百度</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
	// 百度地图API功能
	//GPS坐标
	var xx = 116.397428;
	var yy = 39.90923;
	var gpsPoint = new BMap.Point(xx,yy);

	//地图初始化
	var bm = new BMap.Map("allmap");
	bm.centerAndZoom(gpsPoint, 15);
	bm.addControl(new BMap.NavigationControl());

	//坐标转换完之后的回调函数
	//此处显示的就是纠偏后的经纬度
	translateCallback = function (point){
		var marker = new BMap.Marker(point);
		bm.addOverlay(marker);
		bm.setCenter(point);
	}
	BMap.Convertor.translate(gpsPoint,0,translateCallback);     //真实经纬度转成百度坐标
</script>