根据经纬度坐标值在百度地图上绘制轨迹

因为项目需要做物体轨迹检测，所以要把物体移动的轨迹在百度地图上进行绘制和显示，于是就在网上找到了这个方法，现在做个记录方便以后查阅：

1、html 部分设置存放地图的容器和设置你的百度地图的ak
html:

<div id="baiduMap"></div>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=9H***uNq7M20K1OGAm2***lC7j7t***l">//v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"//v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=您的密钥&callback=initialize"
</script>

2、js部分，相应的js

<script type="text/javascript">var map = new BMap.Map("baiduMap");var point = new BMap.Point(116.404, 39.915);map.centerAndZoom(point, 15);map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放map.addControl(new BMap.ScaleControl()); // 添加比例尺控件var pointStr = "104.038748,30.641821,104.047789,30.648128,104.063959,30.655336,104.067264,30.660307,104.067264,30.664438,104.064008,30.665316".split(",");var pointArr = [];for (var k = 0; k < pointStr.length; k += 2) {pointArr.push({lng: pointStr[k],lat: pointStr[k + 1]});}// 生成坐标点var trackPoint = [];for (var i = 0, j = pointArr.length; i < j; i++) {trackPoint.push(new BMap.Point(pointArr[i].lng, pointArr[i].lat));}map.centerAndZoom(trackPoint[0], 15);// 画线var polyline = new BMap.Polyline(trackPoint, {strokeColor: "#ad0e21",strokeWeight: 3,setStrokeStyle:"dashed",strokeOpacity: 1});map.addOverlay(polyline);// 配置图片var size = new BMap.Size(22, 22);var offset = new BMap.Size(0, 0);var imageSize = new BMap.Size(20, 20);var icon = new BMap.Icon("./images/f5.jpg", size, {imageSize: imageSize,infoWindowAnchor:new BMap.Size(0, -3)});// 画图标for (var i = 0, j = trackPoint.length; i < j; i++) {var marker = new BMap.Marker(trackPoint[i], {icon: icon,offset: offset}); // 创建标注map.addOverlay(marker);marker.addEventListener("click",function () {// alert(this.getPosition())var point=this.getPosition();alert("经度："+point.lng+"\n"+"纬度："+point.lat)})}//根据经纬极值计算绽放级别。 (从网上复制)function getZoom(maxLng, minLng, maxLat, minLat) {var zoom = ["50", "100", "200", "500", "1000", "2000", "5000", "10000", "20000", "25000", "50000", "100000", "200000", "500000", "1000000", "2000000"]; // 级别18到3。var pointA = new BMap.Point(maxLng, maxLat); // 创建点坐标Avar pointB = new BMap.Point(minLng, minLat); // 创建点坐标Bvar distance = map.getDistance(pointA, pointB).toFixed(1); //获取两点距离,保留小数点后两位for (var i = 0, zoomLen = zoom.length; i < zoomLen; i++) {if (zoom[i] - distance > 0) {return 18 - i + 3; //之所以会多3，是因为地图范围常常是比例尺距离的10倍以上。所以级别会增加3。}}}//  (从网上复制)function setZoom(points) {if (points.length > 0) {var maxLng = points[0].lng;var minLng = points[0].lng;var maxLat = points[0].lat;var minLat = points[0].lat;var res;for (var i = points.length - 1; i >= 0; i--) {res = points[i];if (res.lng > maxLng) maxLng = res.lng;if (res.lng < minLng) minLng = res.lng;if (res.lat > maxLat) maxLat = res.lat;if (res.lat < minLat) minLat = res.lat;}var cenLng = (parseFloat(maxLng) + parseFloat(minLng)) / 2;var cenLat = (parseFloat(maxLat) + parseFloat(minLat)) / 2;var zoom = getZoom(maxLng, minLng, maxLat, minLat);map.centerAndZoom(new BMap.Point(cenLng, cenLat), zoom);} else {//没有坐标，显示全中国map.centerAndZoom(new BMap.Point(103.388611, 35.563611), 5);}}setZoom(pointArr)
</script>

原文出自：https://segmentfault.com/a/1190000007319657

根据经纬度坐标值在百度地图上绘制轨迹相关推荐

android百度地图轨迹实现,android 获取GPS经纬度在百度地图上绘制轨迹
实现将一组GPS模块获取的经纬度数据在百度地图上绘制轨迹 1.将经纬度转换成百度地图坐标 /** * 标准的GPS经纬度坐标直接在地图上绘制会有偏移,这是测绘局和地图商设置的加密,要转换成百度地图坐标 ...
android 获取GPS经纬度在百度地图上绘制轨迹
实现将一组GPS模块获取的经纬度数据在百度地图上绘制轨迹 1.将经纬度转换成百度地图坐标 /*** 标准的GPS经纬度坐标直接在地图上绘制会有偏移,这是测绘局和地图商设置的加密,要转换成百度地图坐标* ...
如何在百度地图上绘制建筑楼块(矢量面)数据并导出为图片
万能地图下载器的矢量面绘制功能可以在百度地图上绘制行政边界.建筑楼块.街区.居民地.植被.水系和湖泊等矢量面状数据. 这里我们以绘制建筑为例,通过以下几个步骤说明如何在地图中绘制建筑楼块,但请确保你的 ...
百度地图API绘制轨迹
百度地图Javascript API绘制轨迹 (首先贴两个网站: 1.百度地图API官方示例. 2.百度地图Javascript API v3.0参考类. 一.新建Html文档新建文档可以直接从官方 ...
百度地图描绘轨迹html,百度地图API 绘制轨迹历史
DOCTYPE html> 2 3 4 5 6 7 body, html{width:100%;height:100%;overflow:hidden;margin:0;font-family: ...
python画地图轨迹图_如何使用python在单张地图上绘制轨迹？
我正在处理如下所示的数据帧.x和y是轨迹随时间变化的墨卡托x,y坐标.具有相同航向的行是属于同一轨迹的点.我们可以看到,所有0的行分隔了不同的轨迹.在VoyageID X Y Time 27 2 -7 ...
安卓开发：怎样实时在百度地图上绘制运动轨迹？
我的设想是这样的:每5秒将gps传来的值传入一个list里面,然后又立刻读取list中的值,然后将值作为参数传入划线方法中.但是这样就出现个问题,list的大小未知.反正最后运行也没出现轨迹. 有没 ...
03 在百度地图上定位到指定位置
O 需求将指定经纬度,显示在百度地图上. 一准备详见<01 如何将百度地图加入IOS应用程序?> 二编码 (New标示本次新添加的代码:Delete表示本次需要删除的代码:Modi ...
java echarts 散点图,echarts在地图上绘制散点图（任意点）
项目需求:在省份地图上绘制散点图,散点位置不一定是哪个城市或哪个区县,即任意点通过查询官网文档,找到一个与需求类似的Demo:https://www.echartsjs.com/gallery/ed ...

根据经纬度坐标值在百度地图上绘制轨迹

根据经纬度坐标值在百度地图上绘制轨迹相关推荐

最新文章

热门文章