基于百度地图JavaScript API，员工住址统计

公司一般都有通讯和住址的统计，但是文字化的表格根本就不知道住在哪。

用百度地图就可以轻松解决，

而且公司还经常人员变动，读取excel中的内容，就不用每次还要更改地图文件了。

在遇到需要聚餐在地图中标点时，在文本框中输入地址，多个地址需要用英文逗号“,”分割。

 

为了单个文件的方便，存放更雅观这里引用的全是网络地址：

<script src="http://api.map.baidu.com/getscript?v=2.0&ak=你的密钥"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/xlsx/0.14.3/xlsx.full.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.7.4/angular.min.js"></script>

 

下面是全部js代码：

// 百度地图API功能
    var map = new BMap.Map("l-map");
    map.centerAndZoom(new BMap.Point(114.413121, 30.480956), 13);
    map.enableScrollWheelZoom(true);
    var index = 0;
    var myGeo = new BMap.Geocoder();
    var adds = [];
    var names = [];
    var myFile;
    function change() {
        console.log("a");
        var adds = document.getElementById("chi").value.split(',');
        for (i in adds) {
            geocodeSearch("", adds[i], 1)
        }
    };

    function bdGEO(flag) {
        for (var i = 0; i < adds.length; i++) {
            var name = names[i];
            var add = adds[i];
            geocodeSearch(name, add, flag);
        }
    }
    function geocodeSearch(name, add, flag) {
        console.log(add);
        myGeo.getPoint(add, function (point) {
            if (point) {
                var address = new BMap.Point(point.lng, point.lat);
                addMarker(address, new BMap.Label(name + "\n" + add, { offset: new BMap.Size(20, -10) }), flag);
            }
        }, "武汉市");
    }

    function getMyIcon(flag) {
        var path = "http://api.map.baidu.com/img/markers.png";
        var p;
        if (flag == 0)
            p = {
                offset: new BMap.Size(10, 25), // 指定定位位置  

                imageOffset: new BMap.Size(0, -275) // 设置图片偏移  
            };
        else if (flag == 1)
            p = {
                offset: new BMap.Size(10, 25), // 指定定位位置  

                imageOffset: new BMap.Size(0, -300) // 设置图片偏移  
            };


        return myIcon = new BMap.Icon(path, new BMap.Size(20, 25), p);

    }
    // 编写自定义函数,创建标注
    function addMarker(point, label, flag) {
        var marker = new BMap.Marker(point, { icon: getMyIcon(flag) });
        map.addOverlay(marker);
        marker.setLabel(label);
    }
    
    (function () {
        var app = angular.module('myApp', []);
        app.controller('MyController', ['$scope', myController]);

        var excelJsonObj = [];
        function myController($scope) {
            $scope.uploadExcel = function () {
                myFile = document.getElementById('file');
                var input = myFile;
                var reader = new FileReader();
                reader.onload = function () {
                    var fileData = reader.result;
                    var workbook = XLSX.read(fileData, { type: 'binary' });

                    // 表格的表格范围，可用于判断表头是否数量是否正确
                    var fromTo = '';
                    var sheet0 = workbook.Sheets[workbook.SheetNames[0]];//sheet0代表excel表格中的第一页
                    var str = XLSX.utils.sheet_to_json(sheet0);//利用接口实现转换。
                    names = [];
                    adds = [];
                    for (var i in str) {
                        names.push(str[i].__EMPTY_1);
                        adds.push(str[i].__EMPTY_3);
                    }
                    bdGEO(0);

                };
                //获取地图上所有的覆盖物
                var allOverlay = map.getOverlays();
                for (var i = 1; i < allOverlay.length; i++) {
                    if (allOverlay[i].toString() == "[object Marker]") {
                        // if (allOverlay[i].getPosition().lng == longitude(待删除标注的经度) && allOverlay[i].getPosition().lat == latitude(待删除标注纬度)) {
                        //     map.removeOverlay(allOverlay[i]);
                        // }
                        map.removeOverlay(allOverlay[i]);
                        console.log(allOverlay[i]);
                    }
                }
                if (document.getElementById("chi").value != "") {
                    change();
                }
                if (myFile.value != "")
                    reader.readAsBinaryString(input.files[0]);

            };
        }
    })();

    var comAddr = new BMap.Point(114.413121, 30.480956);
    var label = new BMap.Label("公司地址", { offset: new BMap.Size(20, -10) });
    label.setStyle({
        color: "#f11",
        borderColor: "#000",
        backgroundColor: "#aaa"
    });
    addMarker(comAddr, label, 1);

附上源码下载地址：（含通讯录模板）

https://download.csdn.net/download/qq_38415250/11239541

 

转载请注明出处。