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

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>

 2、表格文档格式:

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读