百度地图JS API GPS坐标转换成百度地图坐标(修改版)
2019独角兽企业重金招聘Python工程师标准>>>
在上一篇博客中做的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}); //颜色、宽度为3map.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}); //颜色、宽度为3map.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
百度地图JS API GPS坐标转换成百度地图坐标(修改版)相关推荐
- 关于百度地图js api的getCurrentPosition定位不准确的解决方法
关于百度地图js api的getCurrentPosition定位不准确的解决方法 参考文章: (1)关于百度地图js api的getCurrentPosition定位不准确的解决方法 (2)http ...
- 将火星坐标转换成百度坐标
由于XX机票的项目,要用到酒店坐标定位,但是呢,服务器提供的坐标是高德 坐标,但是考虑到百度地图用的比较熟悉了,所以考虑将高德坐标转换成百度坐标来做. 以下介绍部分的内容转载自:http://blog ...
- 高德地图JS API 使用01
最近做项目,有个需求使用到高德地图JS API,现写博客总结一下. 需求要求大概是这样的: 使用地图高德或百度或谷歌都可以(这里吐槽一下,百度地图的jsAPI帮助文档写的太...谷歌你懂的...高德目 ...
- Vue 高德地图 js API Loca 如何使用 连接线图层、脉冲连线图层
Vue 高德地图 js API Loca 如何使用 连接线图层.脉冲连线图层 阅读此文你需要已经了解并掌握的: 已经会使用常规地图的生成方式 已经了解如何载入 Loca 插件 如果不了解,可以查看我之 ...
- 高德地图 JS API - 根据地名实现标记定位
德地图 JS API 使用前的准备工作请参考官方网站说明: https://lbs.amap.com/api/javascript-api/guide/abc/prepare 根据地名实现地图标记定位 ...
- cordova下使用高德地图js api在4g流量下定位失败问题的解决
问题描述 cordova页面中使用高德地图js api AMap.Geolocation的geolocation.getCurrentPosition()方法进行定位 用手机4g打开该页面,定位失败, ...
- 在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作 注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者 登陆之后,在进入「应用管理」 页面「创建新应用 ...
- vue高德地图JS API 实现海量点标记展示
官方文档:海量点标记-覆盖物-教程-地图 JS API | 高德地图API 需求:根据后台接口返回的部分数据,这里仅做展示 ,可参考使用. 可以加入弹窗点击的时候. 实现效果: JSAPI 的加载 J ...
- js室内地图开发_概述-室内地图 JS API | 高德地图API
室内地图 JavaScript API 简介 说明: 室内地图数据对新用户暂停开放,建议您使用 Javascript API 可实现室内外一体化效果. 高德室内地图 JavaScript API,是由 ...
- js室内地图开发_入门指南-室内地图 JS API | 高德地图API
快速入门将带您迅速了解高德地图室内JS API的基本使用,学习如何创建和设置地图,是您在最短时间内成为JS API的开发者. 第1步 准备页面 在正式开始开发地图应用之前,您需要做如下几步: 申请JS ...
最新文章
- R语言描述性统计分析:假设检验
- 2010年最火与最冷的IT职业
- select选择框变得可以输入、编辑
- 5.1 Android Basic QuickStart Layouts Linear Layout
- 【转】程序debug正常release错误
- leader选举的源码分析-QuorumPeer.start
- Android之应用程序如何调用支付宝接口
- TortoiseGit上传项目到GitHub
- openjudge 14:求10000以内n的阶乘
- ASP.NET网站还是ASP.NET Web应用程序?
- jupyterlab中使用conda虚拟环境
- 深入浅出mysql第二,mysql-深入浅出MySQL(第2版)-ITBook分享(pdf mongodb java javascript node )...
- 移动办公系统现状分析
- matlab将z域变为s域,时域、S域、Z域转换
- [Python数据分析]NBA的球星们喜欢在哪个位置出手
- 机器学习-朴素贝叶斯(高斯、多项式、伯努利)
- python libusb_python, libusb, pyusb
- cocos2dx内存优化
- 拼命加班撸Excel,准点下班的新人却被升职
- Maps uniqueIndex