百度地图通过经纬度坐标绘制移动路径轨迹

前面我们博客中写到过用谷歌地图来绘制移动轨迹，但该方法存在一定的局限性：一是谷歌地图没有具体的建筑物轮廓；二是谷歌地图通常需要插件或者外网才能访问，非常不方便。
因此，本篇博文总结了网上大部分相关的博客和文章，通过实测来验证如何使用百度地图并通过经纬度坐标来绘制移动路径轨迹。按照博文所述步骤，所示代码经过测试可以直接运行。

一、效果展示

首先来一张效果展示图，加入我打算绕学校跑一圈，并且我有GPS相关的设备的话，每隔一小段时间记录下我运动的经纬度坐标。
然后我们输入这些经纬度坐标，直接用浏览器打开HTML文件，结果如下图所示：
在这里插入图片描述

二、HTML代码

以上效果可以直接通过HTML代码来实现，代码如下：

<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(103.983146,30.773511),
  new BMap.Point(103.986739,30.776117),
  new BMap.Point(103.988788,30.776242),
  new BMap.Point(103.990512,30.774938),
  new BMap.Point(103.992273,30.77469),
  new BMap.Point(103.994644,30.775063),
  new BMap.Point(103.998238,30.768329),
  new BMap.Point(103.996118,30.766809),
  new BMap.Point(103.994034,30.766157),
  new BMap.Point(103.994034,30.766157),
  new BMap.Point(103.993387,30.764544),
  new BMap.Point(103.991734,30.763302),
  new BMap.Point(103.983505,30.773697)
], {strokeColor:"blue", strokeWeight:6, strokeOpacity:0.5});
map.addOverlay(polyline);
</script>

代码解释说明：

var point = new BMap.Point(103.992351,30.77374);表示起始点坐标

new BMap.Point(103.983146,30.773511),
new BMap.Point(103.986739,30.776117),
…等一连串表示我们每隔一段时间记录下来的经纬度坐标

注意事项：
我们看到代码中第7行：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=这里输入你的ak秘钥">

以上代码不能直接运行，我们需要获取自己的ak秘钥，也就是调用百度地图的密钥，因此我们需要进行申请，申请以后再把我们的密钥填到"这里输入你的ak秘钥"处。

三、申请密钥

1.点击百度密钥申请，进行注册
在这里插入图片描述
2.申请秘钥

3.创建应用

4.点击查看应用，复制AK密钥到HTML代码处

四、运行

我们把整个代码复制并保存在记事本中，并且保证AK密钥已经填好，然后我们把txt后缀修改为.html后缀，然后用浏览器打开，得到我们最开始的效果图。

五、参考链接

如果需要更详细的研究，可以参考：
https://www.cnblogs.com/wujy/p/3897501.html

我们如何知道一个地方的经纬度呢？
使用百度的拾取坐标系统：
http://api.map.baidu.com/lbsapi/getpoint/index.html