利用百度地图api将excel中的经纬度数据可视化

最新推荐文章于 2025-04-07 23:10:59 发布

xiaotaoaaron

最新推荐文章于 2025-04-07 23:10:59 发布

阅读量4.7k

点赞数 6

文章标签： excel 百度数据可视化

本文链接：https://blog.csdn.net/xiaotaoaaron/article/details/108784527

版权

利用百度地图api将excel中的经纬度数据可视化

因为本人最近在研究2019年研究生数学建模华为杯D题，想将它3个excel文件汽车的经纬度数据在地图上画出来，找了很多方法才实现。现将它分享给大家，希望对大家有些帮助，觉得有益就给我点个赞吧！

前提条件
要有百度地图api开发的密钥，关于怎么申请密钥我就不多述说了，去网上看看教程吧！
我就放一个百度地图首页的地址：
百度地图首页

效果图如下：
在这里插入图片描述

代码如下：

<!DOCTYPE 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" />
	<title>选取文件画轨迹</title>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	<script src="https://cdn.bootcss.com/xlsx/0.11.5/xlsx.core.min.js"></script>
	<style type="text/css">
	 body, html,#container {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
	 #allmap{width:100%;height:500px;}
     p{margin-left:5px; font-size:14px;}
	</style>
</head>
<body>
    <input type="file" id="excel-file">
    <div id="container"></div>
	<script type="text/javascript">
	
    $('#excel-file').change(function(e) {
        var files = e.target.files;
        var fileReader = new FileReader();
		fileReader.onload = function(ev) {
			try {
				var data = ev.target.result,
					workbook = XLSX.read(data, {
						type: 'binary'
					}), // 以二进制流方式读取得到整份excel表格对象
					persons = []; // 存储获取到的数据
			} catch (e) {
				console.log('文件类型不正确');
				return;
			}

			// 表格的表格范围，可用于判断表头是否数量是否正确
			var fromTo = '';
			// 遍历每张表读取
			for (var sheet in workbook.Sheets) {
				if (workbook.Sheets.hasOwnProperty(sheet)) {
					fromTo = workbook.Sheets[sheet]['!ref'];
					console.log(fromTo);
					persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
					// break; // 如果只取第一张表，就取消注释这行
				}
			} 
			
			var map = new BMap.Map("container");
			map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
			map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
			// 生成坐标点
			var trackPoint = [];
			for (var i = 0, j = persons.length; i < j; i++) {
				trackPoint.push(new BMap.Point(persons[i].经度, persons[i].纬度));
			}
		
			map.centerAndZoom(trackPoint[0], 10);
			// 画线
			var polyline = new BMap.Polyline(trackPoint, {
				strokeColor: "#1869AD",
				strokeWeight: 3,
				strokeOpacity: 1
			});

			map.addOverlay(polyline);

		};
		// 以二进制方式打开文件
		fileReader.readAsBinaryString(files[0]);
	});
	</script>
</body>
</html>

其中数据读入在persons中

excel中数据结构如下：
在这里插入图片描述

person的数据机构如下：
在这里插入图片描述
以后要改就改下面一行就行了，将自己excel的经纬度加载进来就可以了。
具体操作
代码没问题后，将代码保存为.html文件，双击.html文件就可以在网页上看到如下界面：

点击浏览，就可以浏览文件了，选择excel文件就可以看到你想要的效果了。
参考：
百度地图根据点绘制轨迹.
百度地图api开发入门学习总结.