百度地圖坐標轉換的異步回調事件
阿新 • • 發佈：2017-09-28
執行方法 創建 dcl map 設備 完整 stroke cli 題解
在後臺拿到數據後，需要將坐標轉化為百度坐標進行標註打點，同時進行劃線。
代碼如下：
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); //開啟信息窗口
}
百度地圖坐標轉換的異步回調事件