百度地图坐标转换的异步回调事件
在后台拿到数据后，需要将坐标转化为百度坐标进行标注打点，同时进行划线。
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
百度地图坐标转换的异步回调事件相关推荐
- java百度地图坐标_java腾讯地图与百度地图坐标转换
/** * 坐标转换,腾讯地图转换成百度地图坐标 * @param lat 腾讯纬度 * @param lon 腾讯经度 * @return 返回结果:经度,纬度 */ public String m ...
- 火星坐标系转百度php,PHP版本实现火星，高德地图和百度地图坐标转换
作开发的朋友都知道百度地址或其它的google地址及火星,高德地图它们的坐标值都是不一样的,如果我们希望从高德地图转换到百度地址是需要转换坐标的否则就不准了,下面来看一个高德地图和百度地图坐标转换ph ...
- 百度地图坐标转换API
百度地图坐标转换API 之前写过一篇利用私有API处理Wgs到火星坐标的转换的问题 最近发现有个百度地图未公开的坐标转换API挺不错: http://api.map.baidu.com/ag/coor ...
- echarts引入百度地图并且添加点击事件
echarts引入百度地图并且添加点击事件 (1)下载依赖项 npm install echarts --save (2)引入echarts到页面当中 import * as echarts from ...
- 百度地图 坐标转换 顺序问题
之前在android系统上使用过百度API,感觉很好用,后来又通过VC+java集成过百度地图API,对比VC编辑google地图时的复杂度,简化了许多. 这次是由于要做智慧城市项目,需要根据GPS信 ...
- js GPS 百度地图坐标转换
2019独角兽企业重金招聘Python工程师标准>>> 首先要引用百度地图的 <scrtipt>: <script type="text/javascri ...
- gps转百度地图坐标 java,GPS坐标与百度地图坐标转换
空间坐标公式: image.png 上述四个方程式中待测点坐标x. y. z 和Vto为未知参数,其中di=c△ti (i=1.2.3.4). di (i=1.2.3.4) 分别为卫星1.卫星2.卫星 ...
- 百度地图-坐标转换及位置解析
在SpringBoot中测试如下 一共三个区域 左1是将GPS坐标转换后与转换前的对比 左2是将GPS坐标未转换的坐标 下图是根据地理位置转为经纬度坐标在百度地图上展示 html如下 <!DOC ...
- Android中高德地图与百度地图坐标转换
项目中实验数据点取自高德地图,它是火星坐标系统(下面会有解释),而现在希望用百度地图的SDK进行开发,两套不同的规范自然需要进行转换.如何解决这个问题呢?参考了网上很多人的博客和资料. 最终解决此问题 ...
- 修改百度地图点聚合点击事件获取markers数据
百度聚合点击事件(需要修改MarkerClusterer.js) this._clusterMarker.addEventListener('click', function (event) {tha ...
最新文章
- mysql 数据泵_Oracle 数据泵详解
- [Android动画] 帧动画－获取帧数（ getNumberOfFrames）七
- java 为什么重写equals一定要重写hashcode？
- ubuntu下codeblocks起步
- 【双十二】电商们的文案大战，猫狗快被玩坏了！
- 求数组中元素为另外两个元素和的最大元素
- php强大的函数,PHP中一些功能强大却很少使用的函数
- android中实现GPS定位功能,Android中实现GPS定位的简单例子
- tkinter中combobox下拉选择控件（九）
- 雷林鹏分享：PHP 实例 - AJAX 与 XML
- 判断一个数是否为质数
- 三级等级保护之安全运维管理
- 单片机c语言编程定时,单片机C语言编程定时器的几种表达方式
- 常用计算机接口类型,常见的电脑数据接口类型有哪些
- 变速齿轮Delphi实现
- 3D建模学习对于电脑配置要求高不高？显卡内存等全方面解析，小白福音
- 神经网络模型（TensorFlow）
- Material Design系列之BottomNavigationView详解
- iOS 应用信息、手机设备信息、网络信息、权限信息、GPS、网络信息、存储信息、屏幕信息、传感器信息、手机卡信息等信息获取工具
- DB DBS和DBMS的区别