ionic百度地图轨迹实现方式

因为项目可能需要移动轨迹的展示，学习了这方面的知识。百度与高德地图轨迹的方式实现方式都差不多。今天就讲一下百度地图的轨迹展示方式吧。（随便提一下虽然我是集成在移动端，但是下面的也是适用在pc端的）。
轨迹的展示都是经纬度点的集合，用线连接起来的。
首先要实现轨迹就需要在百度地图开发平台注册账号，创建项目取得地图的ak，然后在项目中引用地图api。一切都准备好了，那讲下代码的实现方式。当时我也遇到坑，我直接把服务端给的数据展示出来，这样就出现了问题，页面展示的轨迹偏差很大。为什么会导致这个问题呢，最后发现我没有把经纬度坐标转换成百度坐标。看了下百度地图api是使用convertor.translate方法转换坐标的，这样问题又来了，转换坐标分为单个转换和批量转换。转换坐标百度地图有次数限制，所以我选择了批量转换坐标，批量转换每次也只能转10个。这样的话只能用递归的方式实现了。贴出递归的实现方式：

	/*
	 * jquery坐标转换(递归)
	 */
	function conver(points) {
		var defer = $.Deferred();
		if(Array.isArray(points)) {
			_convertor(points, [], function(outPoints) {
				defer.resolve(outPoints);
			});
		} else {
			defer.reject('必须传入数组转换对象');
		}
		return defer;
	}
	/**
	 * angular坐标转换（递归）
	 * @param points
	 */
	function convertor(points) {
		var defer = $q.defer();
		if(angular.isArray(points)) {
			_convertor(angular.copy(points), [], function(outPoints) {
				defer.resolve(outPoints);
			});
		} else {
			defer.reject('必须传入数组转换对象');
		}
		return defer.promise;
	}
	/**
	 *批量转换
	 */
	function _convertor(points, outPoints, onSuccess) {
		if(!outPoints) outPoints = [];
		var _points = [],
			convertor = new BMap.Convertor();
		if(points.length > 10) {
			_points = points.slice(0, 10);
			points = points.slice(10, points.length);
		} else {
			_points = points.slice(0, points.length);
			points = [];
		}
		convertor.translate(_points, 1, 5, function(data) {
			if(data.status === 0) {
				outPoints = outPoints.concat(data.points);
				return points.length > 0 ? _convertor(points, outPoints, onSuccess) : onSuccess(outPoints);
			}
		});
	};

递归的调用方法lglist是请求的经纬度数组。

conver(lglist).then(function(tp) {
	loadMap(tp);//tp是转换后的经纬度
	}, function(errorMsg) {
	});

地图的调用：Polyline方法是绘制地图轨迹的方法

	/*
	 * 加载地图
	 * @param:百度经纬度
	 */
	function loadMap(point) {
		//百度地图API功能
		var map = new BMap.Map("allmap"); //创建Map实例
		map.centerAndZoom(point[point.length - 1], 15); //初始化地图,设置中心点坐标和地图级别
		var polyline = new BMap.Polyline(
			point, { strokeColor: "red", strokeWeight: 6, strokeOpacity: 0.6 });
		map.addOverlay(polyline);
		var m1 = new BMap.Marker(point[0]);
		var m2 = new BMap.Marker(point[point.length - 1]);
		map.addOverlay(m1);
		map.addOverlay(m2);
		var lab1 = new BMap.Label("起点", { position: point[0] });
		var lab2 = new BMap.Label("您的位置", { position: point[point.length - 1] });
		map.addOverlay(lab1);
		map.addOverlay(lab2);
		map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
	}