根据经纬度坐标值在百度地图上绘制轨迹
2017-12-11 11:08
841 查看
因为项目需要做物体轨迹检测,所以要把物体移动的轨迹在百度地图上进行绘制和显示,于是就在网上找到了这个方法,现在做个记录方便以后查阅:
1、html 部分设置存放地图的容器和设置你的百度地图的ak
html:
2、js部分,相应的js
原文出自:https://segmentfault.com/a/1190000007319657
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); // 创建点坐标A var pointB = new BMap.Point(minLng, minLat); // 创建点坐标B var 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
相关文章推荐
- 百度地图根据多个经纬度,绘制路线
- (MapX)在地图上根据gps坐标绘制轨迹点与轨迹线
- java根据经纬度坐标计算两点的距离算法,与百度地图测距工具相符
- 根据经纬度绘制坐标点相对位置(分别用php和html5实现)
- 高德地图JavaScript根据后台坐标点绘制轨迹
- 百度地图API,根据经纬度实现车辆移动轨迹绘制
- 百度地图API,根据经纬度实现车辆移动轨迹绘制
- android 获取GPS经纬度在百度地图上绘制轨迹
- 百度地图API,根据经纬度实现车辆移动轨迹绘制
- 百度地图根据地理坐标转换经纬度
- 百度地图根据地点名称,获得坐标(但是延时太重,不利于使用)
- 根据地址查询经纬度IP(百度地图)
- c++根据两点经纬度坐标获取长度
- 百度地图 经纬度转换屏幕屏幕坐标
- 给定坐标点,绘制轨迹
- 用百度地图根据经纬度来获取地址
- 百度地图 根据坐标,获取省份,城市,区域
- 百度地图根据地址获取经纬度
- 百度地图显示历史轨迹时经纬度的处理方法
- android studio 经纬度与百度地图拾取坐标经!纬!初入深坑!