标签:打印 20px over 需要 开启 convert console 方法 cat
在后台拿到数据后,需要将坐标转化为百度坐标进行标注打点,同时进行划线。
代码如下:
1.请求service拿到坐标数据
//设备定位
$scope.loadPosition = function () {
deviceService.Position($scope.coudition, function success(result, status) {
line=[];
if (status) {
if (result.data.length > 0) {
line.push(result.data[result.data.length-1]);
$scope.loadMap();
} else {
var myCity = new BMap.LocalCity();
myCity.get(setCenter);
}
}
});
};
$scope.loadPosition();
解析:$scope.loadMap()方法将坐标数据进行标注。代码如下
$scope.loadMap = function () {
var time = $translate.instant("devicePosition.location-time");
var device = $translate.instant("devicePosition.device");
var convertor = new BMap.Convertor();
var pointArr = [];
for (var i = 0; i < line.length; i++) {
var dateTime = $filter(‘date‘)(line[i].locationTime, ‘yyyy-MM-dd hh:mm:ss‘);
var Sn = line[i].deviceSn;
var piontTrr = [];
linePoint[i] = new BMap.Point(line[i].lng, line[i].lat);
piontTrr.push(linePoint[i]);
convertor.translate(piontTrr, 1, 5, function (data) {
if (data.status === 0) {
pointArr.push(data.points[0]);
var content = ‘<p style="width:100%;margin:0;line-height:20px;">‘ + device + ‘SN:‘ + Sn + ‘<br/>‘ + time + ‘:‘ + dateTime + ‘</p>‘;
addMarker(data.points[0], content); //标注坐标
}
});
}
console.log(pointArr);
//轨迹生成方法 polyline(pointArr); //让所有点在视野范围内 map.setViewport(pointArr);
};
解析:控制台pointArr打印为空,地图显示了标注,但是未画轨迹(折线)。
解决方法:采用定时器,将该异步问题解决
//解决坐标转化异步问题,采用定时器延迟执行方法
setTimeout(function () {
//doSomething
//轨迹生成方法
polyline(pointArr);
//让所有点在视野范围内
map.setViewport(pointArr);
},300);
附带完整代码:
//设备定位
$scope.loadPosition = function () {
deviceService.Position($scope.coudition, function success(result, status) {
line=[];
if (status) {
if (result.data.length > 0) {
line.push(result.data[result.data.length-1]);
$scope.loadMap();
} else {
var myCity = new BMap.LocalCity();
myCity.get(setCenter);
}
}
});
};
$scope.loadMap = function () {
var time = $translate.instant("devicePosition.location-time");
var device = $translate.instant("devicePosition.device");
var convertor = new BMap.Convertor();
var pointArr = [];
for (var i = 0; i < line.length; i++) {
var dateTime = $filter(‘date‘)(line[i].locationTime, ‘yyyy-MM-dd hh:mm:ss‘);
var Sn = line[i].deviceSn;
var piontTrr = [];
linePoint[i] = new BMap.Point(line[i].lng, line[i].lat);
piontTrr.push(linePoint[i]);
convertor.translate(piontTrr, 1, 5, function (data) {
if (data.status === 0) {
pointArr.push(data.points[0]);
var content = ‘<p style="width:100%;margin:0;line-height:20px;">‘ + device + ‘SN:‘ + Sn + ‘<br/>‘ + time + ‘:‘ + dateTime + ‘</p>‘;
addMarker(data.points[0], content);
}
});
}
//解决坐标转化异步问题,采用定时器延迟执行方法
setTimeout(function () {
//doSomething
//轨迹生成方法
polyline(pointArr);
//让所有点在视野范围内
map.setViewport(pointArr);
},300);
};
function polyline(linePoint) {
var polyline = new BMap.Polyline(linePoint, {strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5}); //创建折线
map.addOverlay(polyline); //增加折线
}
//增加标注
function addMarker(point, content) {
var marker = new BMap.Marker(point);
map.addOverlay(marker);
addClickHandler(content, marker);//给标记点注册事件。
}
function addClickHandler(content, marker) {
marker.addEventListener("click", function (e) {
openInfo(content, e);
});
}
function openInfo(content, e) {
var p = e.target;
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow, point); //开启信息窗口
}
标签:打印 20px over 需要 开启 convert console 方法 cat
原文地址:http://www.cnblogs.com/tingzaizai/p/7608026.html