百度地图JS API GPS坐标转换成百度地图坐标(修改版)

在上一篇博客中做的GPS坐标转换成百度地图坐标的功能中,在实际工作中发现了一个问题,就是画出来的行车轨迹会有很多的漂移和往复,经过分析,是由于BMap.Convertor.translate()方法调用的时候,是通过异步的方法调用的,所以导致转换后的数据随机排列,并且还会出现掉数据点的情况,现在来修改一下。

出现数据随机排列的原因是我在取出数据来转换的时候是用for循环来的,如何想解决这个问题,循环结构肯定是不能用的,用就一定会出现上述的问题,只能通过全局变量来实现。

定义两个全局变量:

//______________________________这是地图中其他的变量

var Models = "${PathHistory}";// 获取后台行车轨迹的数据

var CoordinatesArr=Models.split("/");// 分割数据
var map = new BMap.Map("container");   // 创建地图实例  116.399, 39.910	
	
var pArr=[];// 装转换过后的数组
var centerPoint=null;// 地图中心坐标
var markerhead=null;// 全局的标注
	
//______________________________这是地图中其他的变量

var al=CoordinatesArr.length - 1;// 数据的长度
var now=0;// 计数变量

在函数中取出数据转换:

// 转换数据函数
function makeLine() {
    var Coordinates = CoordinatesArr[now].split(",");

    BMap.Convertor.translate(new BMap.Point(Coordinates[0],Coordinates[1]),0,translateCallback);
    now++;
}

转换之后调用回调函数:

//坐标转换完之后的回调函数
function translateCallback(point){
    pArr.push(point);
    setTimeout("makepoly()", 250);// 调用画轨迹的函数
}

然后再调用画行车轨迹的函数:

        // 在地图上画行车轨迹的函数
	function makepoly() {

		// 删除之前添加的标注
		map.removeOverlay(markerhead);
		
		centerPoint = new BMap.Point(pArr[now-1].lng, pArr[now-1].lat);  // 创建点坐标
		
		map.centerAndZoom(centerPoint, 18);// 初始化地图,设置中心点坐标和地图级别
		map.addControl(new BMap.MapTypeControl()); 
		map.enableScrollWheelZoom();

		var polyline = new BMap.Polyline(pArr, {strokeColor:"red", strokeWeight:3, strokeOpacity:0.5}); //颜色、宽度为3
		map.addOverlay(polyline); // 将路线添加到地图上
	
		//添加标注    画意摄影主义
		markerhead = new BMap.Marker(centerPoint);        // 在起点创建标注  
		map.addOverlay(markerhead);                     // 将标注添加到地图中 
		
		// 判断计数变量是否比数据长度小,是就继续转换
		if(now<al){
			makeLine();
		}
	}

这其中非常重要的就是后面的判断:

// 判断计数变量是否比数据长度小,是就继续转换
if(now<al){
    makeLine();
}

如果还没有转换完成就继续转换,这样形成一个循环,才能把数据全部转换完整。


下面贴出完整的页面:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib prefix="s" uri="/struts-tags" %>

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>

  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" name="viewport" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

  <s:iterator id="map" value="PathHistoryCoordinates" var="map" status="index"></s:iterator>

<title>行车轨迹</title>
<style type="text/css">
#container{height:100%; width:100%;}
</style>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=F23c57cf276323e3f60ab6bb90af4767"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

</head>

<body style='padding:0;margin:0;'>
 <!-- 地图图层 -->
 <div id="container"></div>

<script type="text/javascript">

	var Models = "${PathHistory}";// 获取后台行车轨迹的数据

	var CoordinatesArr=Models.split("/");// 分割数据
	var map = new BMap.Map("container");   // 创建地图实例  116.399, 39.910	
	
	var pArr=[];// 装转换过后的数组
	var centerPoint=null;// 地图中心坐标
	var markerhead=null;// 全局的标注
	
	var al=CoordinatesArr.length - 1;// 数据的长度
	var now=0;// 计数变量


	var pointhead = CoordinatesArr[0].split(",");
	// 判断!如果云端没有数据,则提示用户,并将坐标定位到北京
	if(pointhead[0] && pointhead[1]){
		makeLine();
	}else{
		var centerPoint = new BMap.Point(108.27589,22.810024);  // 创建点坐标  南宁108.27589,22.810024
		//alert("云端没有数据!");
		if(Models=="设备没有绑定车辆!"){
			alert("设备没有绑定车辆!");
		}else{
			alert("云端没有数据!");
		}
	}

	// 转换数据函数
	function makeLine() {
		var Coordinates = CoordinatesArr[now].split(",");
		//p.push(new BMap.Point(Coordinates[0],Coordinates[1]));

		BMap.Convertor.translate(new BMap.Point(Coordinates[0],Coordinates[1]),0,translateCallback);
		
		now++;
	}
	
	//坐标转换完之后的回调函数
	function translateCallback(point){
	   //alert(point.lng + "," + point.lat);
		pArr.push(point);

		setTimeout("makepoly()", 250);// 调用画轨迹的函数
	}
	
	// 在地图上画行车轨迹的函数
	function makepoly() {

		// 删除之前添加的标注
		map.removeOverlay(markerhead);
		
		centerPoint = new BMap.Point(pArr[now-1].lng, pArr[now-1].lat);  // 创建点坐标
		
		map.centerAndZoom(centerPoint, 18);// 初始化地图,设置中心点坐标和地图级别
		map.addControl(new BMap.MapTypeControl()); 
		map.enableScrollWheelZoom();

		var polyline = new BMap.Polyline(pArr, {strokeColor:"red", strokeWeight:3, strokeOpacity:0.5}); //颜色、宽度为3
		map.addOverlay(polyline); // 将路线添加到地图上
	
		//添加标注    画意摄影主义
		markerhead = new BMap.Marker(centerPoint);        // 在起点创建标注  
		map.addOverlay(markerhead);                     // 将标注添加到地图中 
		
		// 判断计数变量是否比数据长度小,是就继续转换
		if(now<al){
			makeLine();
		}
	}


</script> 

<div id="testdiv"> </div>

</body>  
</html>




转载于:https://my.oschina.net/hehongbo/blog/478496

已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符 “速评一下”
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页