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

Posted 2020-10-08

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

代码如下：

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