基于百度地图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

转载请注明出处。