<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=qSIsbGP09ebZl2iBL2GRgglBH2QkqTX6"></script>
<script type="text/javascript" src="xlsx.core.min.js"></script>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<title>根据起终点经纬度驾车导航</title>
</head>
<body>
<input type="file" id="excel-file">
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
//添加控件
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl(new BMap.OverviewMapControl());
map.addControl(new BMap.MapTypeControl());
//设置样式
//var mapStyle={ style : "mapbox" }
//map.setMapStyle(mapStyle);
//var marker = new BMap.Marker(point); // 创建标注
//map.addOverlay(marker); // 将标注添加到地图中
//var traffic = new BMap.TrafficLayer(); // 创建交通流量图层实例
//map.addTileLayer(traffic); // 将图层添加到地图上
$('#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; // 如果只取第一张表，就取消注释这行
}
}
console.log(persons.length);
//Object {startLng: "120.1016", startLat: "30.86458", endLng: "120.2499444", endLat: "30.87941667", __rowNum__: 1}
try{
for(var i = 0; i < persons.length; i++) {
var p1 = new BMap.Point(persons[i].startLng,persons[i].startLat);
var p2 = new BMap.Point(persons[i].endLng,persons[i].endLat);
var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true},
onPolylinesSet:function(routes) {
searchRoute = routes[0].getPolyline();//导航路线
map.addOverlay(searchRoute);
},
onMarkersSet:function(routes) {
map.removeOverlay(routes[0].marker); //删除起点
map.removeOverlay(routes[1].marker);//删除终点
}
});
driving.search(p1, p2);
}
} catch(e) {
console.log(e);
}
};
// 以二进制方式打开文件
fileReader.readAsBinaryString(files[0]);
});
</script>
