百度地图坐标转换的异步回调事件

在后台拿到数据后，需要将坐标转化为百度坐标进行标注打点，同时进行划线。

var convertor = new BMap.Convertor();

convertor.translate（Array,callback）;

代码如下：

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); //开启信息窗口 }

 

转载于:https://www.cnblogs.com/tingzaizai/p/7608026.html