成品如下：

这是放在前端网页的div容器里，因为我的标注多，而且在虚拟机里，所以比较卡其实。

API介绍说明

使用的是JS API，所以注意的是在百度地图webAPI找是找不到的

地图 JS API | 百度地图API SDK (baidu.com)https://lbsyun.baidu.com/index.php?title=jspopular3.0

使用前需要读一下类参考，才会有理解

百度地图JSAPI 3.0类参考 (bcebos.com)https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_reference_3_0.html

本次使用的是：标注类，包括三类，建议去上面看这三类的参考方法，不然会很糊涂

点	Marker	表示地图上的点，可自定义标注的图标
文本	Label	表示地图上的文本标注，您可以自定义标注的文本内容
折线	Polyline	表示地图上的折线

JavaScript API - 标注 | 百度地图API SDK (baidu.com)https://lbsyun.baidu.com/index.php?title=jspopular3.0/guide/mark

勿多言，代码

<!--html--><div style = " position:fixed; top:420px;left:950px; background-color:bold; width:900px;height:385px; background-color:rgba(0,0,0,0.1); border-radius:12px" ><div id="allmap" style = "border-radius:12px"></div></div><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=！！！！！！！！！！！！！！！！！"></script><script type="text/javascript">//百度地图调用脚本var map = new BMap.Map("allmap");
var point = new BMap.Point(116.404, 39.915);
map.centerAndZoom(point, 6);
map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {scale: 0.5,                     //图标缩放大小strokeColor:'#fff',             //设置矢量图标的线填充颜色(方向箭头)strokeWeight: '3',              //设置线宽});
var icons = new BMap.IconSequence(sy, '10', '30');var arr = [['拍摄时间'，['地址'，'省'，'市'，'县'，'位置']，[30.25877974229535, 120.16856505290376]],['拍摄时间'，['地址'，'省'，'市'，'县'，'位置']，[30.234845676643793, 120.20532390477369]]   //我的数据格式，是从百度地图API查询GPS，返回后自行处理的格式，可以按需换，
//实际我是用django的{{}}传参的赋值arrconsole.log(arr);
var path = [];for(var p in arr){var point = new BMap.Point(arr[p][2][1],arr[p][2][0]);path.push(point);var label = new BMap.Label((Number(p)+1).toString());var marker = new BMap.Marker(point);marker.setLabel(label);marker.setTitle(arr[p][0] + "\n" + arr[p][1][0] + "\n" + arr[p][1][4]);//鼠标放标注上会有地址显示map.addOverlay(marker);}var polyline = new BMap.Polyline(path, {strokeColor:"green", strokeWeight:6, strokeOpacity:1, icons:[icons]});map.addOverlay(polyline);
</script>

简易版学习代码，我的学习参考：(3条消息) 百度地图通过经纬度坐标绘制移动路径轨迹_fallwind_of_july的博客-CSDN博客_导入经纬度生成轨迹

<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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=这里输入你的ak秘钥"></script>
<title>route</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">var map = new BMap.Map("allmap");
var point = new BMap.Point(103.992351,30.77374);
map.centerAndZoom(point, 15);
var polyline = new BMap.Polyline([new BMap.Point(30.25877974229535, 120.16856505290376),new BMap.Point(30.234845676643793, 120.205323904773697),new BMap.Point(30.24458532732261, 120.1133204679477),], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
map.addOverlay(polyline);
</script>

更详细的参考：百度地图之多点步行路径连线问题 - 踏浪帅 - 博客园 (cnblogs.com)

注意，GPS位置坐标要换成百度地图坐标,不然画的有误差

#pythondef wgs84tobaidu(x, y):data = str(x) + ',' + str(y)output = 'json'url = 'http://api.map.baidu.com/geoconv/v1/?coords=' + data + '&from=1&to=5&output=' + output + '&ak=！！！！！！！！！！！！！！！'req = urlopen(url)res = req.read().decode()temp = json.loads(res)baidu_x = 0baidu_y = 0if temp['status'] == 0:baidu_x = temp['result'][0]['x']baidu_y = temp['result'][0]['y']return baidu_x, baidu_y

百度地图绘制历史轨迹加标注，简易版相关推荐

百度地图 js 在安卓端手指缩放无效_利用百度地图绘制3D轨迹演示
简介百度地图很强大,也为开发者提供很好的开发接口.今天用3D地图上路线轨迹可视化的小功能. 使用第一步:申请ak ak申请介绍创建的时候选择浏览器端~ 第二步:填写ak 有了 ak 后,复制下面 ...
百度地图绘制行驶轨迹、折线上添加箭头、修改地图底色
页面效果页面代码 <!DOCTYPE html> <html> <head><meta http-equiv="Content-Type" ...
js百度地图小车html,H5页面引用百度地图绘制车辆历史轨迹
//打开百度地图 function openbMap(){ //模拟数据 var cars = {"car_5":[{"id":1,"order_id ...
百度地图api实现轨迹运动效果
百度地图api实现轨迹运动效果实现逻辑: 实现轨迹运动的效果无非就是将一段路程细化为很多个点,然后不过的根据这些点来画出移动轨迹. 实现流程: 1)使用DrivingRoute,根据起点和终点的位置 ...
百度地图-绘制工具以及覆盖物的简单使用
这几天重拾了地图相关的功能,做一个小小的总结. 本文的示例的后端为flask框架,前端使用了bootstrap和jQuery以及百度地图API. 接下来是展示部分. 地图上的覆盖物表示高校所处的位置, ...
vue结合百度地图绘制工具遇到的问题及解决方案(多边形编辑状态下形状显示不全、marker点添加事件无效)
vue如何引入百度地图绘制工具百度地图绘制工具示例 http://developer.baidu.com/map/jsdemo.htm#f0_7 百度地图绘制工具api文档 http://api.m ...
百度地图绘制实时路线以及最短线路规划
如何使用百度地图绘制实时路线以及最短线路规划最近在做百度地图的实时路线绘制,发现一些问题,比如由于定位漂移带来的路线绘制偏差,还有由于定位漂移,导致人未走动时,也会绘制路线等.百度鹰眼的线路纠偏个人 ...
使用百度地图绘制点、线、面 | Javascript
写在前面: 本文为百度地图开发系列文章之一, 前期回顾: webGIS,基于百度地图的HelloWord实现如何使用前端css代码去掉百度地图左下角的图标使用百度地图绘制点.线.面 | Javas ...
百度地图API显示多个标注点带提示的代码 / 单个标注点带提示代码
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><me ...

百度地图绘制历史轨迹加标注，简易版

成品如下：

API介绍说明

勿多言，代码

注意，GPS位置坐标要换成百度地图坐标,不然画的有误差

百度地图绘制历史轨迹加标注，简易版相关推荐

最新文章

热门文章