将文档中的地址标记在百度地图上

最新推荐文章于 2023-01-31 23:47:53 发布

光九

最新推荐文章于 2023-01-31 23:47:53 发布

阅读量630

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41509873/article/details/106298060

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、先将一个地址表格文档中的数据读取出来，这里用到了xlsx.core.min.js，可以在github上下载。再用百度地图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" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript"
//ak填自己申请的ak
src="http://api.map.baidu.com/api?v=2.0& ak=************">
</script>
<title>百度地图api展示</title>
<script type="text/javascript" src="xlsx.core.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
#allmap{
margin:5px;
border: 1px solid #ccc;
height: 800px;

}
#div1{
height: 50px;
padding-left: 50px;
padding-top: 20px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div id="div1">
<input type="file" id="excel-file">
</div>
<div id="allmap"></div>

</body>
</html>

<script type="text/javascript">
var points =[];
//读取文档
$('#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[0].地址);
search(persons);
};
// 以二进制方式打开文件
fileReader.readAsBinaryString(files[0]);
});

//创建地图
var map = new BMap.Map("allmap");
map.centerAndZoom("宁波", 12);
map.enableScrollWheelZoom(true); //启用滚轮放大缩小，默认禁用
map.enableContinuousZoom(true); //启用地图惯性拖拽，默认禁用
map.addControl(new BMap.OverviewMapControl({ isOpen: true, anchor: BMAP_ANCHOR_BOTTOM_RIGHT })); //右下角，打开

//创建搜索对象
var localSearch = new BMap.LocalSearch(map);
localSearch.enableAutoViewport(); //允许自动调节窗体大小\
//创建标注，输入keyword地点
function search(points) {
//console.log(points[0].店名);
//循环建立标注点
for(var i=0, pointsLen = points.length; i<pointsLen; i++) {
//console.log(addr,name);
localSearch.search(points[i].地址);
//查找地址的回调函数
localSearch.setSearchCompleteCallback(function (searchResult) {
var poi = searchResult.getPoi(0);
var marker = new BMap.Marker(new BMap.Point(poi.point.lng, poi.point.lat)); // 创建标注，为要查询的地方对应的经纬度
map.addOverlay(marker);
var content = "<br/><br/>店名："+poi.title+"<br/>地址："+poi.address;
var infoWindow = new BMap.InfoWindow("<p style='font-size:14px;'>" + content + "</p>");//显示信息框
marker.addEventListener("click", function () { this.openInfoWindow(infoWindow); });
// marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
});

}
}
</script>