成品如下：
这是放在前端网页的div容器里，因为我的标注多，而且在虚拟机里，所以比较卡其实。
API介绍说明
使用的是JS API，所以注意的是在百度地图webAPI找是找不到的
地图 JS API | 百度地图API SDK (baidu.com)
https://lbsyun.baidu.com/index.php?title=jspopular3.0
使用前需要读一下类参考，才会有理解
本次使用的是：标注类，包括三类，建议去上面看这三类的参考方法，不然会很糊涂
| 点 | Marker | 表示地图上的点，可自定义标注的图标 |
| 文本 | Label | 表示地图上的文本标注，您可以自定义标注的文本内容 |
| 折线 | Polyline | 表示地图上的折线 |
勿多言，代码
<!--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的{
{}}传参的赋值arr
console.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位置坐标要换成百度地图坐标,不然画的有误差
#python
def 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 = 0
baidu_y = 0
if temp['status'] == 0:
baidu_x = temp['result'][0]['x']
baidu_y = temp['result'][0]['y']
return baidu_x, baidu_y