百度地图api-浏览器如何实时定位、画出轨迹？

来源：互联网发布：淘宝pad版编辑：程序博客网时间：2024/05/16 14:06

首先呢，对于这个标题的答案是：百度地图或者高德地图api都做不到浏览器实时导航，只能路线规划或者一次定位。

我们只能通过安卓或者ios的sdk来实现，而JavaScript难以做到。但如果后台能定时给你坐标的数据，那么还是可以做到实时定位并且画出行车轨迹的！

1.照顾百度地图新手，在百度地图开发之前，你需要一个密钥点我进入申请密钥链接在这里我就不写上自己的密钥了大家用自己的就行。

2. 点我进入百度地图JavaScript Demo示例点击前面的链接，里面都是基于JavaScript的百度地图api的demo，在demo里面把“你的密钥”替换掉就行。自己先写几个demo,复制粘贴就行，主要是熟悉一下。

3.我的思路就是，既然后台给我坐标，那我就根据坐标定位就行了。前一个链接里面最后一个示例讲的就是依据经纬度来定位，直接用！但是只能定位一次咋办？那就定时器setInterval调用不就行了，一秒五秒动一次都随你，基本效果都能实现的。剩下的就是画轨迹了：

function drawLine(){var polyline = new BMap.Polyline(coordinateArr, {strokeColor:"blue", strokeWeight:4, strokeOpacity:0.6});map.addOverlay(polyline);}

这里的coordinateArr 是我声明的一个数组，本来coordinateArr是这样：[new BMap.Point(116.404, 39.915,),new BMap.Point(116.414, 39.925)];我在每获取到一个坐标的时候，都以这样的形式push到这个数组里面，那他就可以一直画线了，然后定时器调用就行，注意画线的间隔小一些，或者说比定位的间隔小一些，否则会一直闪来闪去。

4.直接贴代码了：

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><style type="text/css">body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}#allmap{height:800px;width:100%;}#r-result{width:100%; font-size:14px;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=你的密钥"></script>  <title>城市名定位</title></head><body><div id="allmap"></div><div id="r-result">经度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" value="120.61990712"/>纬度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" value="31.31798737"/><input type="button" value="查询" onclick="theLocation()" /></div></body></html><script type="text/javascript">//画线需要的坐标数组，每n秒更新一次var coordinateArr = [];// 百度地图API功能var map = new BMap.Map("allmap");map.centerAndZoom(new BMap.Point("苏州"),14);map.enableScrollWheelZoom(true);// 用经纬度设置地图中心点function theLocation(){if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){map.clearOverlays(); var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);coordinateArr.push(new_point);var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/car.png", new BMap.Size(52, 26), {    //小车图片//offset: new BMap.Size(0, -5),    //相当于CSS精灵imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。  });var marker = new BMap.Marker(new_point,{icon:myIcon});  // 创建标注map.addOverlay(marker);              // 将标注添加到地图中map.panTo(new_point); //小车在地图中心     }}//自动改变经纬度var randoms = 0;function min(){document.getElementById("longitude").value-=0.0000681;}//绘制轨迹function drawLine(){var polyline = new BMap.Polyline(coordinateArr, {strokeColor:"blue", strokeWeight:4, strokeOpacity:0.6});map.addOverlay(polyline);}setInterval("min()",1000);setInterval("theLocation()",2000);//定位setInterval("drawLine()",500);//绘制轨迹</script>

2 0