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

本是古典何须时尚 2022-06-04 09:58 729阅读 0赞

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

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][https_segmentfault.com_a_1190000007319657]

[https_segmentfault.com_a_1190000007319657]: https://segmentfault.com/a/1190000007319657

发表评论取消回复

表情：

评论列表（有 0 条评论，729人围观）

还没有评论，来说两句吧...

相关阅读

相关百度地图地址转经纬度

一、文档介绍 1、格式。 http://api.map.baidu.com/geocoding/v3/?address=北京市海淀区上地十街10号&output

古城微笑少年丶/ 2023年10月10日 10:13/ 0 赞/ 76 阅读

相关百度地图，地图轨迹

百度地图，记录行动轨迹：效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

淩亂°似流年/ 2023年10月06日 10:37/ 0 赞/ 29 阅读

相关百度地图轨迹开发，如何绘制带有箭头的折线

　　最近在开发百度地图时，需要绘制行人行走的轨迹，并在轨迹内使用箭头表示方向，和我们平常使用百度地图导航时一样，能通过箭头表示人行走的方向。通过百度地图AP

川长思鸟来/ 2023年08月17日 16:36/ 0 赞/ 164 阅读

相关百度地图API，根据经纬度实现车辆移动轨迹绘制

百度地图，实现车辆轨迹绘制实现思路： 1.根据经纬度实现车辆轨迹绘制 2.使用百度地图API的两个覆盖物实现，Polyline（折线）绘制轨迹，Marker（图标）绘制

分手后的思念是犯贱/ 2022年08月20日 13:20/ 0 赞/ 506 阅读

相关通过百度地图API绘制经纬度map

通过百度的API来绘制经纬度map相比自己算坐标绘图来说，效率提升的不是一点半点，而且也符合多数人的使用习惯（应该有不少同学都用过百度地图查询信息），接下来不废话，先看一下效果

亦凉/ 2022年06月11日 04:57/ 0 赞/ 417 阅读

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

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

本是古典何须时尚/ 2022年06月04日 09:58/ 0 赞/ 730 阅读

相关百度地图鼠标点击或者移动获取坐标经纬度

var map = new BMap.Map('map'); var poi = new BMap.Point(112.53, 37.87); map.

﹏ヽ暗。殇╰゛Y/ 2022年05月17日 00:21/ 0 赞/ 577 阅读

相关 js百度地图计算两经纬度坐标点的距离

百度地图API-首页 [http://developer.baidu.com/map/][http_developer.baidu.com_map] 百度地图提

ゝ一纸荒年。/ 2022年04月12日 10:19/ 0 赞/ 658 阅读

相关百度地图API计算经纬度

百度地图API计算经纬度注册百度地图开发者申请应用的APKEY 设置白名单代码实现注册百度地图开发者注册地址：http:

浅浅的花香味﹌/ 2021年10月23日 22:50/ 0 赞/ 938 阅读

相关百度地图 echarts tooltip属性经纬度坐标不显示

中国地图、散点图结合点击后显示当前城市数量不显示经纬度坐标 ![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

- 日理万妓/ 2021年10月15日 11:35/ 0 赞/ 613 阅读