码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-09-28 19:14:04      阅读:299      评论:0      收藏:0      [点我收藏+]

标签:打印   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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!